프로토 타입 체인

생성자 함수로 만들어진 객체는 생성자 함수를 프로토타입으로 가리킵니다..

function person(name){
    this.name = name;
}
const one = new person('lee');

console.log(Object.getPrototypeOf(one) === person.prototype); // true

 

그렇다면 생성자 함수도 객체이므로 프로토 타입을 갖게 되므로 person의 프로토 타입은 Object 프로토  타입입니다.

console.log(Object.getPrototypeOf(person.prototype) === Object.prototype); // true

 

객체의 프로퍼티를 확인하는 hasOwnProperty는 person.prototype에 존재하지 않고 Object.prototype의 메서드로 존재합니다. 

자바스크립트는 객체의 프로퍼티(메서드)에 접근하려가할 때 해당 객체에 프로퍼티가 없을때 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로톹 타입의 프로퍼티를 순차적으로 검색합니다.. 
이를 프로토 타입 체인이라고 하며, 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘이 됩니다.

 

오바리이딩

생성자 함수를 통해 프로토타입에 메서드를 추가한 다음 객체에 같은 이름의 메서드를 추가한다면 어떨까요?

function person(name){
    this.name = name,
    person.prototype.sayHello = function(){
        console.log('person');
    };
}

const one = new person('lee');
one.sayHello = function(){
    console.log('child');
}
console.log(one.sayHello()); // child

 객체의 프로토타입에 sayHello라는 메서드가 존재하지만 자신 객체에 같은 이름의 메서드가 존재하면 자신에 잇는 메서드를 호출하는걸 확인할 수 있습니다. 그렇다고 부모프로퍼티에 존재하는 메서드가 삭제되거나 덮는 것이 아닙니다.

이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라고 합니다.