JavaScript - 프로토타입 체인

프로토타입 객체도 또 다시 상위 프로토타입 객테로부터 메소드와 속성을 상속 받을 수 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 **프로토타입 체인(prototype chain)**이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다.

 

정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 protorype이라는 속성에 정의되어 있다.

 

JavaScript에서 객체 인스턴스와 프로토타입 간의 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__속성으로 객체 인스턴스를 구현하고 있다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색한다.

 

프로토타입 체인

const myObject = {
    city:"Madrid",
    greet(){
        console.log(`Greeting from${this.city}`);
    },
};

myObject.greet(); // Greeting from Madrid

위 오브젝트는 데이터 속성으로 city를 메소드 속성으로 greet()를 가지고 있다.  브라우저의 콘솔창에 myObject. 과 같이 타이핑하면 콘솔은 해당 오브젝트에서 사용가능한 많은 속성들을 보여줄 것이다. 그래서 우리는 city나 geet이외 에도 많은 다른 것을 볼 수 있게된다.

__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
__proto__
city
constructor
greet
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocaleString
toString
valueOf

그 중 하나에 접근해 보자

myObject.toString(); // "[object Object]"

심지어 확실시 toString()이 통할것 같지 않은 변수에도 작동한다.

 

모든 자바스크립트는 내상속성을 가지고 있고 그것은 프로토타입이라고 불려진다. 프로토 타입그 그 자체로 object이다. 그래서 프로토타입은 자신만은 속성을 가진다. 무엇이 프로토타입체인이라고 부를수 있도록 만들까?  프로토타입의 프로토 타입이 null 값을 가질때 프로토 타입 체인은 끝난다.

 

Note :  object의 속성 관점에서 프로토타입은 프로토타입이라고 불려지지 않는다. 그 이름은 표준적이지 않다. 그러나 관습적으로 모든 브라운저가 사용한다 __proto__. 객체의 프로토타입의 접근하는 표준적인 방식은 Object.getPrototypeOf()메소드를 사용하는 것이다.

 

object의 속성에 접근할 때 : 만약 그 속성이 object스스로 찾을 수 없을 경우 그 속성을 프로토타입이 찾게된다. 그럼에도 여전히 속성을 찾을 수 없으면, 프로토타입의 프로토타입이 그 속성을 찾게된다. 그리고 계속 프로토타입이 속성을 찾거나 혹은 프로토 타입체인의 끈에 도달하게 된다. 그럼에도 해당하는 속성을 찾을 수 없는 겨우 undefined가 return 된다.

 

myObject.toString()을 사용하면 브라우저는

• myObject 객체에서 toString()메소드를 찾는다.
• myObject에서 찾을 수 없으면, myObject에 프로토타입 object에서  toStirng메소드를 찾는다.
• 상위 프로토타입에서 찾으면 그곳에서 메서드를 불러온다.

 

myObject를 위한 프로토타입dl 무엇인지 찾기위해  Object.getPrototypeOf() 함수를 사용

Object.getPrototypeOf(myObject); //object {}

getPrototypeOf(myObject)로 불러진 object를 Object.prototype이라고 한다. 그리고 Object.prototype은 가장 기본적인 프로토타입이다. 모든 JavaScript의 object는 Object.prototype을 기본적으로 가지고 있다. 특정 속성이 Object.prototype에서 null이라면 거기서 프로토타입 체인이 끝난다

 

[출처 - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes]