자바스크립트 입문_프로토타입(prototype)

(본 포스팅은 위키북스의 '코어자바스크립트' 책을 공부하면서 작성되었습니다_내돈내산)

 

• 자바스크립트는 프로토타입(prototype)기반 언어임. 
• 프로토타입 기반의 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조) 함으로써 클래스기반 언어의 '상속'과 비슷한 효과를 얻음.

< 프로토타입의 개념 이해 >

var instance = new Constructor; // 이러한 코드 구문을 순서대로 풀어서 설명해보면 ! 

1.  어떤 생성자 함수(Constructor)를 new연산자와 함께 호출하면
2. Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(Instance)가 생성됨.
3. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여됨.
4. 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조함.

>> __proto__와 prototype 이 두 객체의 관계가 프로토타입 개념의 핵심임.

• prototype은 객체이며, 이를 참조하는 __proto__ 역시 당연히 객체.
• prototype 객체 내부에는 인스턴스가 사용할 메서드가 저장되고, __proto__를 통해 이 메서드들에 접근할 수 있음.

---

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

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

• Person 이라는 생성자 함수의 prototype에 getName 이라는 메서드가 지정되어 있음.
• Person의 인스턴스는 __proto__프로퍼티를 통해 getName 을 호출가능함. ( instance의 __proto__가 Constructor의 prototype 프로퍼티를 참조하기때문에 둘은 같은 객체를 바라봄)

var suzi = new Person('suzi');
suzi.__proto__.getName(); // undefined

• instance의 __proto__가 Constructor의 prototype과 같은 객체를 바라보기 때문에 getName()이 함수로써 작동함.
  (만일 함수로 작동하지 않았다면, TypeError가 발생했을 것임) 
• 하지만 getname함수에서 반환되는 값은 this._name 이므로 getName()앞에 있는 suzi.__proto__를 가리키게 됨. suzi.__proto__에는 name이라는 객체가 존재하지 않으므로 undefined를 반환하게됨.
• __proto__는 생략가능한 프로퍼티 이므로, 제대로된 값을 얻고 싶다면 __proto__를 제외하고 suzi.getName()으로 사용하는 방법이 적절한 방법임.

---

__ in detail

• 자바스크립트는 함수에 자동으로 prototype이라는 객체를 프로퍼티로 생성해 놓음.
• 해당 함수를 생성자 함수로서 사용할 경우(new 연산자와 함께 함수를 호출할 경우), 그로부터 생성된 인스턴스에는 숨겨진 프로퍼티인 __proto__가 자동으로 생성되며, 이 프로퍼티는 생성자 함수의 prototype 프로퍼티를 참조함.
• __proto__ 프로퍼티는 생략이 가능하기 때문에, 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됨.