19장 프로토타입 (3)

19.7 프로토타입 체인

• JS 는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라고 한다. 이는 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.

• 체인의 최상위에 위치하는 객체는 Object.prototype 이다. 모든 객체는 Object.protytpe을 상속받는다. Object.prototype 를 프로토타입 체인의 종점이라고 한다.

• Object.prototype  에서도 프로퍼티를 검색할 수 없는 경우 undefinded를 반환한다. 에러가 발생하지 않는 것에 주의!

• 프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘이다. 이해 반해 스코프 체인은 식별자 검색을 위한 메커니즘이다.

me.hasOwnProperty('name');

• 여기서는 먼저 스코프 체인에서 me 식별자를 검색한다. me 식별자를 검색한 다음, me 객체의 프로토타입 체인에서 hasOwnProperty 메서드를 검색한다.
• 스코프 체인과 프로토타입 체인은 서로 협력하여 식별자와 프로퍼티를 검색하는 데 사용한다.

19.8 오버라이딩과 프로퍼티 섀도잉

const Person = (function () {
    // 생성자 함수
    function Person(name) {
        this.name = name;
    }

    Person.prototype.sayHello = function () {
        console.log(`Hi! My name is ${this.name}`);
    };

    // 생성자 함수를 반환
    return Person;
}());

const me = new Person('Lee');

// 인스턴스 메서드
me.sayHello = function () {
    console.log(`Hi! My name is ${this.name}`);
};

// 인스턴스 메서드가 호출된다. 프로토타입 메서드는 인스턴스 메서드에 의해 가려진다. 
me.sayHello();  // Hi! My name is Lee

• 프로토타입 프로퍼타 : 프로토타입이 소유한 프로퍼티(메서드 포함)
• 인스턴스 프로퍼티 : 인스턴스가 소유한 프로퍼티
• 인스턴스 메서드 sayHello는 프로토타입 메서드 sayHello를 오버라이딩했고 프로토타입 메서드 sayHello는 가려진다.
  • 오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식
  • 오버로딩 : 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식. JS는 오버로딩은 지원하지 않지만 arguments객체를 사용하여 구현할 수 있음
• 상속관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라고 한다.

// 인스턴스 메서드 삭제 
delete me.sayHello;
me.sayHello(); //Hi! My name is Lee

// 프로ㅗ 타입 메서드 변경

Person.prototype.sayHello = function () {
    console.log(`Hey! My name is ${this.name}`);
};
me.sayHello(); 

// 프로토타입 메서드 삭제
delete Person.prototype.sayHello;
me.sayHello(); // TypeError: me.sayHello is not a function

• 하위 객체를 통해 프로토타입의 프로퍼티를 변경 또는 삭제하는 것은 불가능하다. 즉 프로토타입에 get 엑세스는 허용되나 set 엑세스는 허용되지 않는다.
• 프로토타입 프로퍼티를 변경/삭제 하려면 프로토타입에 직접 접근해야 한다.

19.9 프로토타입의 교체 🙌

• 프로토타입은 부모 객체인 프로토타입을 동적으로 변경할 수 있다.
• 생성자 함수 또는 인스턴스에 의해 교체할 수 있다.

19.10 instanceof 연산자

객체 instanceof 생성자 함수

• instanceof 연산자는 우변의 생성자 함수의 prototype 에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true로 평가되고 그렇지 않은 경우에는 false로 평가된다.
• 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인한다.

🌳 느낀점

• 프로퍼티 섀도잉이라는 개념도 있었구나
• 오늘도 배웠다 👍 👍

위 글은 위키북스의 모던 자바스크립트 Deep Dive 를 읽고 정리한 내용입니다.