javascript_jquery_basic_3_3a

프로토타입을 통한 공유는 어떻게 동작하는가?

키워드

• Prototype
• __proto__ == [[prototype]]
• Constructor

ECMAScript 규격 내용

1. 모든 객체는 __proto__ 객체를 프로퍼티로 갖는다. (내부 참조용으로 사용)
2. 생성자(또는 생성자 함수)는 prototype 객체를 프로퍼티로 갖는다.
3. prototype 객체는 constructor 객체를 프로퍼티로 갖는다.

// 생성자 선언
function Person (name) {
	this.name = name;
};

Person.prototype.getName = function() {
	return this.name;
};

// Person은 어떻게 toString()을 사용이 가능한 것일까?
function Person (name) {
	this.name = name;
};

Person.prototype.getName = function() {
	return this.name;
};

// toString은 Person의 속성이 아니다.
console.log(Person.toString());

Function.toString() 예제
Function.prototype (MDN)

// 인스턴스 생성
function Person (name) {
	this.name = name;
};

Person.prototype.getName = function() {
	return this.name;
};

var person1 = new Person('Lee');
console.log(person1.getName());

new를 이용해 새로운 인스턴스를 생성하게 되면 아래 코드가 내부에서 동작한다.

var person1 = new Person('Lee');

// 엔진 내부에서 하는 일
person1 = {}; // 새로운 객체를 만들고
Person.call(person1, 'myName'); // call 이용해 Person 생성자를 호출(this를 person1로)
person1.__proto__ = Person.prototype; // 프로토타입을 연결한다.

person1.getName(); // 'Lee'

객체생성 및 프로토타입 연결

위 코드가 실행되면 다음과 같은 형태로 프로토타입 체인이 생성된다.

프로토타입 식별자 검색

프로토타입 체인을 통해 객체의 메서드나 속성을 찾아가는 것

var a = {
    attr1: 'a'
};

var b = {
    __proto__: a,
    attr2: 'b'
};

var c = {
    __proto__: b,
    attr3: 'c'
};

c.attr1 // 'a'

a에 존재하는 attr1 속성을 검색하는 과정

1. c객체 내부에 attr1 속성을 찾는다. -> 없다.
2. c객체에 __proto__ 속성이 존재하는지 확인한다. -> 있다.
3. c객체의 __proto__ 속성이 참조하는 객체로 이동한다. -> b객체로 이동
4. b객체 내부에 attr1 속성을 찾는다. -> 없다.
5. b객체에 __proto__ 속성이 존재하는지 확인한다. -> 있다.
6. b객체의 __proto__ 속성이 참조하는 객체로 이동한다. -> a객체로 이동
7. a객체 내부에 attr1 속성을 찾는다. -> 있다. 찾은 속성의 값을 리턴한다.

어떤 객체에도 존재하지 않는 attr0 속성을 검색하는 과정

1. a객체 내부에 attr0 속성을 찾는다. -> 없다.
2. a객체에 __proto__ 속성이 존재하는지 확인한다. -> 있다.
3. a객체의 __proto__ 속성이 참조하는 객체로 이동한다. -> Object.prototype로 이동
4. Object.prototype 에서 attr0 속성을 찾는다. -> 없다.
5. Object.prototype 에서 __proto__ 속성을 찾는다. -> 없다.

모든 프로토타입 체인의 끝은 항상 Object.prototype 이다. 그래서 Object.prototype은 __proto__ 속성이 없다. attr0 라는 속성은 프로토타입의 마지막 단계인 Object.prototype에 존재하지 않고 Object.prototype에는 __proto__ 속성이 존재하지 않으니 탐색을 종료하고 undefined를 리턴한다.

무엇을 할 수 있는가?

쉽게 이해하는 자바스크립트 프로토타입 체인