JavaScript

JavaScript

kimddakki 2022. 5. 18. 17:21
내장 객체의 프로토타입

 - prototype 프로퍼티는 자바스크립트 내부에서도 광범위하게 사용됩니다.

   모든 내장 생성자 함수에서 prototype 프로퍼티를 사용합니다.

 - 이번 챕터에서는 내장 객체의 프로토타입에 대해 자세히 살펴본 후 어떻게 내장 객체의 프로토타입 프로퍼티를

   응용할 수 있는지 알아보자!

 

Object.prototype

 - 빈 객체가 있다고 가정해보자.

let obj = {};
console.log(obj.toString()); // [object Object]
console.log(obj); // {}

obj = new Object();
console.log(obj); // {}
console.log(obj.__proto__); // [Object: null prototype] {}
console.log(Object.prototype); //[Object: null prototype] {}

 - obj = new Object()를 줄이면 obj = {}가 된다. 여기서 Object는 내장 객체 생성자 함수인데, 이 생성자 함수의

   prototype은 toString을 비롯한 다양한 메서드가 구현되어 있는 거대한 객체를 참조하게 된다.

 - new Object()를 호출하거나 리터럴 문법 { ... }을 사용해 객체를 만들 때 새롭게 생성된 객체의 [[Prototype]]은

   바로 앞 챕터에서 언급한 규칙을 따라 Object.prototype을 참조하게 된다.

 - 따라서 obj.toString()을 호출하면 Object.prototype에서 해당 메서드를 가져오게 된다.

console.log(obj.__proto__ === Object.prototype); // true

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

※ 하지만 이때 Object.prototype 위 쪽엔 [[Prototype]] 체인이 없다는 점을 주목해야 합니다!!

console.log(Object.prototype.__proto__); // null
다양한 내장 객체의 프로토타입

 - Array, Date, Function을 비롯한 내장 객체들 역시 프로토타입에 메서드를 저장해 놓습니다.

 - 배열 [1, 2, 3]을 만들면 new Array() default 생성자가 내부에서 동작하여 Array.prototype이 배열의 [1, 2, 3]의

   프로토타입이 되고 개발자는 Array.prototype을 통해 배열 메서드를 사용할 수 있게 됩니다.

 - 이런 내부 동작은 메모리의 효율을 높여주는 장점을 가져다 주게 됩니다.

 

 - 명세서에선 모든 내장 프로토타입의 상속 트리 꼭대기에는 Object.prototype이 있어야 한다고 규정합니다. 

 - 이런 명세 때문에 몇몇 사람들은 "모든 것은 객체를 상속받는다"라는 말을 하기도 합니다.

let arr = [1, 2, 3];

// arr은 Array.prototype을 상속 받음
console.log(arr.__proto__ === Array.prototype); // true
// arr은 Object.prototype을 상속 받음
console.log(arr.__proto__.__proto__ === Object.prototype); // true
// 체인 맨 위엔 null이 있다.
console.log(arr.__proto__.__proto__.__proto__); // null

 - 체인 상의 프로토타입에는 중복 메서드가 있을 수 있다. Array.prototype엔 요소 사이에 쉼표를 넣어 요소 전체를

   합친 문자열을 반환하는 자체 메서드 toString()이 있다.

 

console.log(arr); //[1, 2, 3]
console.log(arr.toString()); // 1, 2, 3

 - 하지만 Object.prototype에도 메서드 toString이 존재한다. 이렇게 중복 메서드가 있을 때는 체인 상에서 

   가장 가까운 곳에 있는 메서드가 사용된다. Array.prototype이 체인상에서 더 가깝기 때문에 Array.prototype의 

   toString이 사용 되었다.

 - 배열이 아닌 다른 객체들 또한 같은 방법으로 동작하게 된다. 함수도 마찬가지다.

 - 함수는 내장 객체 내의 Function 생성자를 사용해 만들어 지는데, call, apply를 비롯한 함수에서 사용하는 메서드는 

   Function.prototype 에서 받아오게 된다. 참고로 함수에도 toString이 구현되어 있다.

console.log(f.__proto__ === Function.prototype); // true
console.log(f.__proto__.__proto__ === Object.prototype); // true

 

 

내장 객체의 프로토타입

 

ko.javascript.info