JavaScript
내장 객체의 프로토타입
- 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