코어자바스크립트 6장 part1 ( prototype , __proto__ )

용어

1. constructor : 생성자 함수
2. prototype
3. instance : 생성자 함수가 new 연산자를 통해 만들어진 인스턴스

외워야 할 내용

new 연산자로 Constructor를 호출하면 instance가 만들어지고 이 instance의 생략 가능한 프로퍼티인 __proto__는 Constructor의 prototype를 참조한다.

Constructor.prototype === instance.__proto__

(나만의 정리) 부모같은 생성자 함수의 prototype에 저장시켰던 메소드 혹은 내용을 저장해놓고 이를 instance에서 사용하기 위해서 instance.__proto__.메소드 혹은 instance.메소드로 사용한다.
이때, 두 차이는 this 와 관련이 있다.

예시

var Person = function(name ){
    this._name = name;
};

Person.prototype.getName = function(){
  	console.log(this,this._name);
    return this._name;
};

var suzi = new Person('Suzi');


suzi.__proto__.getName();	//(1)

suzi.getName();			//(2)

(1)

{getName: ƒ, constructor: ƒ} undefined
undefined

위의 결과가 나타나는데 this는 getName메소드를 사용하는 가장 가까운 부분인 suzi.__proto__이므로 이는 Person.prototype과 같은 부분이므로 현재 저장된 getName, constructor를 의미한다. 그리고 this._name은 현재 this에 _name은 없으므로 undefined가 된다.

(2)

Person {_name: "Suzi"} "Suzi"
"Suzi"

위의 결과가 나타나는데 this는 getName메소드를 사용하는 가장 가까운 부분인 Suzi이므로 이는 this._name은 현재 this인 Suzi에 포함된 내용이 존재하므로 Suzi를 출력한다.

결론

우리는 constructor에서 prototype에 저장한 메소드를 사용하는데 있어서 instance.__proto__.메소드 혹은 instance.메소드 둘다 사용할 수 있다.
그 이유는 __proto__가 생략 가능한 프로퍼티이기 때문이다.
단지 Constructor.prototype === instance.__proto__을 이해하고 __proto__를 쓸때와 안쓸때의 this가 달라진 다는 2가지를 인식하고 있어야한다.

출처

코어자바스크립트