19장 프로토타입(2)

* 아래 내용은 이웅모 저자님의   모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다.

   저작권에 문제가 된다면 삭제하도록 하겠습니다.

 

19.5 프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.

19.5.1 사용자 정의 생성자 함수와 프로토타입 생성 시점

 생성자 함수로서 호출할 수 있는 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.

non-constructor는 프로토타입이 생성되지 않는다. 

함수 선언문으로 정의된 생성자 함수는 호이스팅되어 어떤 코드보다 먼저 평가되어 함수 객체가 된다. 이때 프로토타입도 더불어 생성된다.

생성된 프로토타입은 오직 constructor 프로퍼티만 갖는 객체다. 생성된 프로토타입의 프로토타입은 언제나 Object.prototype이다.

 

19.5.2 빌트인 생성자 함수와 프로토타입 생성 시점

Object, Function 등과 같은 빌트인 생성자 함수도 마찬가지로 함수 객체를 생성하는 시점에 프로토타입도 생성된다. 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성되고, 생성된 프로토타입은 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩 된다.

이후 생성자 함수또는 리터럴 표기법으로 객체를 생성하면 프로토타입은 생성된 객체의 [[Prototype]] 내부 슬롯에 할당된다.

 

19.6 객체 생성 방식과 프로토타입의 결정

 객체 생성방식은 다양하지만 추상연산 OrdinaryObjectCreate에 의해 생성된다는 공통점이 있다. 프로토 타입은 추상 연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다. 

19.6.1 객체 리터럴에 의해 생성된 객체의 프로토타입

추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 Object.prototype이다. 즉, 객체리터럴에 의해 성성되는 객체의 프로토타입은 Object.prototype이다. 

const obj = { x: 1 };

// 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype을 상속받는다.
console.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty('x'));    // true

 

19.6.2 Object 생성자 함수에 의해 생성된 객체의 프로토타입

 객체 리터럴과 마찬가지로 추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 Object.prototype이다. 

const obj = new Object();
obj.x = 1;

// Object 생성자 함수에 의해 생성된 obj 객체는 Object.prototype을 상속받는다.
console.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty('x'));    // true

 

19.6.3 생성자 함수에 의해 생성된 객체의 프로토타입

추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체다. 

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

// 프로토타입 메서드
Person.prototype.sayHello = function () {
  console.log(`Hi! My name is ${this.name}`);
};

const me = new Person('Lee');	// 	prototype : Person.prototype
const you = new Person('Kim');	//	prototype : Person.prototype

me.sayHello();  // Hi! My name is Lee
you.sayHello(); // Hi! My name is Kim

 

19.7 프로토타입 체인

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

 프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype이다.(체인의 종점)

 프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘이라고 할 수 있다.

 

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(`Hey! My name is ${this.name}`);
};

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

 프로토타입 프로퍼티와 같은 이름이 프로퍼티를 인스턴스에 추가하면 인스턴스 프로퍼티로 추가한다. 이 때 인스턴스 매서드 sayHello는 프로토타입 매서드 sayHello를 오버라이딩 했고 프로토타입 매서드 sayHello는 가려진다. 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉 이라고 한다.

 

19.9 프로토타입 교체

 프로토타입은 임의의 다른 객체로 변경할 수 있다.(상속 관계를 동적으로 변경할 수 있다.)

19.9.1 생성자 함수에 의한 프로토타입의 교체

const Person = (function () {
  function Person(name) {
    this.name = name;
  }

  // ① 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
  Person.prototype = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  };

  return Person;
}());

const me = new Person('Lee');

// 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.
console.log(me.constructor === Person); // false
// 프로토타입 체인을 따라 Object.prototype의 constructor 프로퍼티가 검색된다.
console.log(me.constructor === Object); // true

프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다. 프로토 타입으로 교체한 객체 리터럴에 constructor프로퍼티를 추가하여 프로토타입의 constructor프로퍼티를 되살릴 수도 있다.

19.9.2 인스턴스에 의한 프로토타입의 교체

인스턴스의 __proto__ 접근자 프로퍼티를 통해 프로토타입을 교체할 수도 있다.

생성자 함수의 prototype 프로퍼티에 다른 임의의 객체를 바인딩하는 것은 미래에 생성할 인스턴스의 프로토타입을 교체하는 것이다.

__proto__ 접근자 프로퍼티를 통해 프로토타입을 교체하는 것은 이미 생성딘 객체의 프로토타입을 교체하는 것이다.

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

const me = new Person('Lee');

// 프로토타입으로 교체할 객체
const parent = {
  sayHello() {
    console.log(`Hi! My name is ${this.name}`);
  }
};

// ① me 객체의 프로토타입을 parent 객체로 교체한다.
Object.setPrototypeOf(me, parent);
// 위 코드는 아래의 코드와 동일하게 동작한다.
// me.__proto__ = parent;

me.sayHello(); // Hi! My name is Lee

// 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.
console.log(me.constructor === Person); // false
// 프로토타입 체인을 따라 Object.prototype의 constructor 프로퍼티가 검색된다.
console.log(me.constructor === Object); // true

생성자함수에 의한 프로토타입 교체와 인스턴스에 의한 프로토타입 교체는 비슷하지만, 다른점이 있다면 

생성자함수에 의한 프로토타입 교체에서는 Person생성자 함수의 prototype 프로퍼티가 교체된 프로토타입을 가리키지만,

인스턴스에 의한 프로토타입 교체에서는 Person생성자 함수의 prototype 프로퍼티가 교체된 프로토타입을 가리키지 않는다.

 

 

Reference

- 이웅모 ,  모던 자바스크립트 Deep Dive , 위키북스 , 2020