자바스크립트는 함수를 생성할 때 prototype 객체를 property에 넣어 두고 해당 함수가 new 연산자와 함께 생성자 함수로 활용될 경우 해당 instance에 __proto__ 라는 property를 생성하고 prototype 객체를 참조하게 한다.

개념

var instance = new Constructor();

Prototype은 다음과 같이 움직인다.

1. constructor > new > instance

constructor에 new를 넣음으로써 instance가 생성된다.

1. prototype > instance.__proto__

instance가 생성됨과 동시에 __proto__라는 property도 생기게 되는데 이 property는 Constructor의 prototype을 참조한다.

prototype 객체

__proto__가 참조하는 prototype은 instance가 사용할 method를 저장한다.

고로 __proto__는 저장된 method들을 prototype을 거쳐서 사용할 수 있게 된다.

(공식적으로는 __proto__ 가 아니라 Object.getPrototypeof(), Object.create()을 이용해서 __proto__을 사용한다.)

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

var suzi = new Person('Suzi');
suzi.__proto__.getName();
// undefined (예상과 다름)

suzi.__proto__ === Person.prototype //true

이때 suzi.__proto__getName()이 undefined가 나왔다는 건 함수는 있는데 리턴 값이 없다는 것이다.

이유는 위 코드에서 getName이 this.name을 리턴하는데 suzi.__proto__.getName()을 하게 되면 this가 suzi__proto__를 지칭하게 되기 때문이다. (method로 사용되는 함수의 this는 호출한 객체를 가리킨다.)

suzi.__proto__에는 name이라는 프로퍼티가 없으니 객체에서 존재하지 않는 프로퍼티를 탐색하면 JS엔진에서 주는 undefined 가 나온 것이다.

var suzi = new Person('Suzi');
suzi.__proto__._name='SUZI__proto__';
suzi.__proto__.getName(); // 'SUZI__proto__'

위 코드처럼 프로퍼티를 채우면 그대로 출력되게 된다.