모던 자바스크립트 (프로토타입과 프로토타입 상속) 6-2. 내장 객체의 프로토타입 / 프로토타입 메서드와 __proto__가 없는 객체

Object.prototype

: [object] [object] 문자열을 생성하는 코드

: obj = new Object() 는 obj = {} 과 같음

: Object는 내장 객체 생성자 함수인데 이 생성자 함수의 프로토타입은 toString을 비롯한

  다양한 메서드가 구현되어 있는 거대한 객체를 참조함

let obj = {};

alert(obj.__proto__ === Object.prototype); // true

alert(obj.toString === obj.__proto__.toString); //true
alert(obj.toString === Object.prototype.toString); //true

alert(Object.prototype.__proto__); // null

 

 

 

 

다양한 내장 객체의 프로토타입

: Array, Date, Function을 비롯한 내장 객체들도 프로토타입에 메서드를 저장

: 예를들면 배열 [1,2,3]을 생성했을 때 디폴트 생성자가 동작하여 Array.prototype이 배열 [1,2,3]의 프로토타입이 되고 

  개발자는 Array.prototype을 통해 배열 메서드를 이용할 수 있음

: 이러한 내부 동작은 메모리 효율을 높여줌

 

let arr = [1, 2, 3];

// arr은 Array.prototype을 상속받았나요?
alert( arr.__proto__ === Array.prototype ); // true

// arr은 Object.prototype을 상속받았나요?
alert( arr.__proto__.__proto__ === Object.prototype ); // true

// 체인 맨 위엔 null이 있습니다.
alert( arr.__proto__.__proto__.__proto__ ); // null

alert(arr); // 1,2,3 <-- Array.prototype.toString의 결과

: 크롬 개발자 콘솔과 같은 도구를 사용하면 상속 관계를 확인할 수 있음

: console.dir을 사용하면 내장 객체의 상속 관계 확인 가능

 

 

 

원시값의 프로토타입

: 원시값의 프로퍼티에 접근 할때는 String, Number, Boolean을 사용하는 임시 래퍼 객체가 생성되고

  메서드를 제공한 뒤 사라짐

: null과 undefined에 대응하는 래퍼 객체는 없음

String.prototype.show = function() {
  alert(this);
};

"BOOM!".show(); // BOOM!

if (!String.prototype.repeat) { // repeat이라는 메서드가 없다고 가정합시다
  // 프로토타입에 repeat를 추가

  String.prototype.repeat = function(n) {
    // string을 n회 반복(repeat)합니다.

    // 실제 이 메서드를 구현하려면 더 복잡한 코드가 필요합니다.
    // 전체 알고리즘은 명세서에서 확인할 수 있는데,
    // 명세서를 완벽히 구현하지 않은 폴리필이라도 충분히 쓸만하니 예시는 이 정도로만 작성해보겠습니다.
    return new Array(n + 1).join(this);
  };
}

alert( "라".repeat(3) ); // 라라라

※ 프로토타입은 전역으로 영향을 미치기 때문에 폴리필을 만들때 빼고는 네이티브 프로토타입의 수정은 권장하지 않음

 

 

 

 

프로토타입에서 메서드 빌려오기

: 네이티브 프로토타입에 구현된 메서드를 빌리는 경우  

let obj = {
  0: "Hello",
  1: "world!",
  length: 2,
};

obj.join = Array.prototype.join;

alert( obj.join(',') ); // Hello,world!

 

 

 

 

___proto___ 대신 사용하는 모던한 방법

- Object.create(proto, [descriptors])

: [[Prototype]]이 proto를 참조하는 빈 객체 생성

 

- Object.getPrototypeOf(obj)

: obj의 [[Prototype]] 반환

 

- Object.setPrototypeOf(obj, proto)

: obj의 [[Prototype]]이 proto가 되도록 설정

let animal = {
  eats: true
};

// 프로토타입이 animal인 새로운 객체를 생성합니다.
let rabbit = Object.create(animal);

alert(rabbit.eats); // true

alert(Object.getPrototypeOf(rabbit) === animal); // true

Object.setPrototypeOf(rabbit, {}); // rabbit의 프로토타입을 {}으로 바꿉니다.

let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));

: Object.create를 호출하면 obj의 모든 프로퍼티를 포함한 완벽한 사본이 만들어짐

 

 

※ 속도가 중요하다면 기존 객체의 [[Prototype]]을 변경하지 말 것

 

 

 

 

 

 

 

Refference

내장 객체의 프로토타입

프로토타입 메서드와 __proto__가 없는 객체