자바스크립트 프로토타입 Prototype (2)

📌 프로토타입 (객체) ?

 

❗ 객체 간 상속inheritance을 구현하기 위한 핵심 개념 ❗
❗ 프로토타입의 프로토타입은 언제나 Object.prototype ❗
프로토타입은 어떤 객체의 상위 객체(부모 객체)의 역할을 하는 객체로,
다른 객체에 공유 프로퍼티/메서드를 제공한다.

 

프로토타입을 상속받은 하위 객체(자식 객체)는 상위 객체의 프로퍼티/메서드를
본인의 프로퍼티/메서드처럼 자유롭게 사용할 수 있다.

 

 

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

 

😮 (진심으로 너무 다양한) 객체 생성 방법들 ...
✔ 객체 리터럴
✔ Object 생성자 함수
✔ 생성자 함수 (new 연산자)
✔ Object.create 메서드
✔ 클래스(ES6)

 

 

 📍 객체 리터럴 

객체 리터럴에 의해 생성되는 객체의 프로토타입은 Object.prototype 이다.

 

const obj = {x: 1};

console.log(obj.constructor === Object);  // true
console.log(obj.hasOwnProperty('x'));     // true

// 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype 을 상속받는다.

 

 

 📍 Object 생성자 함수 

Object 생성자 함수에 의해 생성되는 객체의 프로토타입은 Object.prototype 이다.

 

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

console.log(obj.constructor === Object);  // true
console.log(obj.hasOwnProperty('x'));     // true

// Object 생성자 함수에 의해 생성된 obj 객체는 Object.prototype 을 상속받는다.
// 객체 리터럴 방식은 객체 리터럴 내부에 프로퍼티를 추가하지만
// Object 생성자 함수 방식은 일단 빈 객체를 생성한 후 프로퍼티를 추가한다.

 

 

 📍 생성자 함수 (new 연산자) 

생성자 함수에 의해 생성되는 객체의 프로토타입은
생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체다.

 

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

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

const me = new Person('Lee');
const you = new Person('Kim');

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

// Person 생성자 함수를 통해 생성된 모든 객체는
// 프로토타입에 추가된 sayHello 메서드를 상속받아 자신의 메서드처럼 사용할 수 있다.

 

 

 📍 Object.create 메서드 

Object.create 메서드는 프로토타입을 명시적으로 지정하여 새로운 객체를 생성.
Object.create 메서드의 첫 번째 매개변수에는 생성할 객체의 프로토타입으로 지정할 객체를,
두 번째 매개변수에는 생성할 객체의 property key 와 property descriptor 로 이뤄진 객체를 전달.

 

// Object.create(prototype, [, propertiesObject])

// 지정된 프로토타입 및 프로퍼티를 갖는 새로운 객체를 생성하여 반환한다.
// @param {Object} prototype - 생성할 객체의 프로토타입으로 지정할 객체
// @param {Object} [propertiesObject] - 생성할 객체의 프로퍼티를 갖는 객체
// @returns {Object} 지정된 프로토타입 및 프로퍼티를 갖는 새로운 객체

 

// obj → null
let obj = Object.create(null);
console.log(Object.getPrototypeOf(obj) === null);  // true
console.log(obj.toString());                       // Object.prototype을 상속받지 못함.

// obj → Object.prototype → null
// obj = {}; 와 동일
obj = Object.create(Object.prototype);
console.log(Object.getPrototypeOf(obj) === Object.prototype);  // true

// obj → Object.prototype → null
// obj = {x: 1}; 와 동일
obj = Object.create(Object.prototype, {
  x: {value: 1, writable: true, enumerable: true, configurable: true}
});
// 위 코드는 아래와 동일하다.
// obj = Object.create(Object.prototype);
// obj.x = 1;
console.log(obj.x);                                            // 1
console.log(Object.getPrototypeOf(obj) === Object.prototype);  // true

// obj → myProto → Object.prototype → null
// 임의의 객체 직접 상속받기
const myProto = {x: 10};
obj = Object.create(myProto);
console.log(obj.x);                                            // 10
console.log(Object.getPrototypeOf(obj) === myProto);           // true

// obj → Person.prototype → Object.prototype → null
function Person(name){
  this.name = name;
}
obj = Object.create(Person.prototype);
obj.name = 'Lee';
console.log(obj.name);                                         // Lee
console.log(Object.getPrototypeOf(obj) === Person.prototype);  // true

 

 

📌 Object.prototype ?

 

프로토타입 체인의 종점 (end of prototype chain)
Object.prototype 의 프로토타입, 즉 [[Prototype]] 내부 슬롯의 값은 null 이다.

 

프로토타입 체인의 종점에 위치하는 객체는 Object.prototype 의 built-in 객체를 사용할 수 없다 ❗

그래서 Object.prototype 의 built-in 메서드는 간접적으로 호출하는 것이 좋다.

 

const obj = Object.create(null);
obj.a = 1;

// console.log(obj.hasOwnProperty('a'));
// TypeError: obj.hasOwnProperty is not a function

// Object.prototype의 built-in 메서드는 간접적으로 호출할 것 ❗
console.log(Object.prototype.hasOwnProperty.call(obj, 'a'));  // true

 

 

📌 프로토타입 체인 vs 스코프 체인

 

프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘
스코프 체인은 식별자 검색을 위한 매커니즘

자바스크립트 엔진은 프로토타입 체인을 따라 프로퍼티/메서드를 검색한다.
자바스크립트 엔진은 스코프 체인을 따라 식별자를 검색한다.
프로토타입 체인과 스코프 체인은 서로 협력하여 프로퍼티와 식별자를 검색하는 데 사용된다.

 

 

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

 

📍 오버라이딩 overriding

상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

 

📍 프로퍼티 섀도잉 property shadowing

상속 관계에 의해 프로퍼티가 가려지는 현상

 

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

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

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

const me = new Person('Lee');

// 인스턴스 메서드
me.sayHi = function(){
  console.log(`Hey, my name is ${this.name}`);
};

me.sayHi();  // Hey, my name is Lee

// 인스턴스 메서드가 호출된다. 
// 프로토타입 메서드는 인스턴스 메서드에 의해 가려진다.

 

 

 

• 참고 자료

자바스크립트 DEEP DIVE - 이웅모