코어 자바스크립트 정리 - [6] 프로토타입

자바스크립트는 프로토타입(prototype) 기반 언어.

어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻음.

 

01 - 프로토타입의 개념 이해

1) constructor, prototype, instance

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

prototype 과 __proto__ 는 객체임.

예제)

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

var suzi = new Person('Suzi');

if(Person.prototype === suzi.__proto__) {}   // true
suzi.__proto__.getName();             // undefined

suzi.__proto__._name = 'SUZI__proto__';

// this 가 suzi.__proto__ 이기 때문에 suzi.__proto__._name 이 출력됨.
suzi.__proto__.getName();             // SUZI__proto__

// this 가 suzi 이기 때문에 suzi._name 이 출력됨.
suzi.getName();                        // Suzi

// __proto__ 는 생략이 가능한 프로퍼티 이다.
// suzi.__proto__.getName()
// -> suzi(.__proto__).getName()
// -> suzi.getName()

__proto__는 생략이 가능한 프로퍼티이기 때문에 생성자 함수의 prototype에 어떤 매서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됨.

※ isArray 메서드는 Array의 prototype 내부에 없기때문에 인스턴스에서 접근할 수 없다.

var arr = [1, 2];
arr.forEach(function () {});  // 0
Array.isArray(arr);           // true
arr.isArray();                // TypeError : arr.isArray is not a function

 

2) constructor  프로퍼티

생성자 함수의 프로퍼티 내부에는 constructor이라는 프로퍼티가 있음.

원래 생성자함수를 참조하며 인스턴스의 원형이 무엇인지 알수 있음

 

 

02 - 프로토타입 체인

1) 메소드 오버라이드

prototype에 정의된 메소드보다 instance의 메소드가 우선

자바스크립트 엔진은 가장 가까운 대상부터 메소드를 검색.

자신의 프로퍼티 > __proto__ > __proto__.__proto__ ......

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

var iu = new Person('지금');
iu.getName = function () {
    return '바로 ' + this.name;
}
console.log(iu.getName());
// 출력
// 바로 지금

 

2) 프로토타입 체인

어떤 데이터의  __proto__  프로퍼티 내부에 다시  __proto__  가 연쇄적으로 이어진것.

자바스크립트 엔진은 가장 가까운 대상부터 메소드를 검색.

자신의 프로퍼티 > __proto__  > __proto__.__proto__ ......

 

3) 객체 전용 메서드의 예외사항

어떤 생성자 함수이든 prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재.

Object.prototype 에 있는 메소드는 어떠한 데이터도 사용이 가능하다 ( Array, Map 등의 객체도 당연히 포함)

반대로 객체(Object)에서만 사용할 메서드는 다른 데이터 타입처럼 프로토타입 객체 안에 정의할 수 없다.

Array, Map 등의 다른 객체에서도 접근할 수 있음.

 

4) 다중 프로토타입 체인

두단계 이상의 체인을 지니는 다중 프로토타입체인도 가능하다

 

 

---

참조 : 코어 자바스크립트 ( 정재남 )