[JS] 프로토타입

1. __proto__

모든 객체는 __proto__ 프로퍼티가 있다.

__proto__ 프로퍼티가 참조하는 객체(프로토타입 객체)의 속성을 자신의 속성처럼 사용 가능하다.

* ECMA-262 기술 규격에서는 __proto__를 [[Prototype]]로 표기

 

객체 리터럴 방식을 생성시 __proto__은 Object.prototype 객체가된다.

var obj = {};
console.log(obj.__proto__ == Object);				// false
console.log(obj.__proto__ == Object.prototype);			// true
console.log(obj.toString == Object.prototype.toString);		// true

var arr = [];
console.log(arr.__proto__ == Array);				// false
console.log(arr.__proto__ == Array.prototype);			// true
console.log(Array.prototype == Object.prototype);		// false
console.log(Array.prototype.__proto__ == Object.prototype);	// true
console.log(arr.__proto__.__proto__ == Object.prototype);	// true

var fun = function () {};
console.log(fun.__proto__ == Function);				// false
console.log(fun.__proto__ == Function.prototype);		// true
console.log(Function.prototype.__proto__ == Object.prototype);	// true
console.log(fun.__proto__.__proto__ == Object.prototype);	// true

Prototype Chain

객체의 프로퍼티(메서드)에 접근하려고 할때, 해당 객체에 프로퍼티가 없다면,

차례대로 __proto__ 링크를 따라, 일치하는 프로토타입 객체의 프로퍼티 검색

Object.prototype이 프로토타입 체인의 마지막 객체이다.

 

2. prototype

모든 함수는 prototype 프로퍼티가 있다.

모든 함수는 객체 생성자 함수가 될 수 있으며(인스턴스 생성시 new 연산자 사용), 생성된 인스턴스의 __proto__ 프로퍼티가 객체 생성자 함수의 prototype 프로퍼티를 참조한다.

즉, 함수는 prototype 프로퍼티가 생성된 인스턴스의 프로토타입 객체가 된다.

* 객체 생성자 함수로 사용되는 함수는 첫문자를 대문자로 표기(PascalCase) 권장

 

인스턴스의 메소드는 공통으로 사용할 수 있으므로, prototype 프로퍼티의 메소드로 추가한다.

function Obj() {}

// method는 공유 메모리 공간에 선언됨
Obj.prototype.method = function () {};

var obj = new Obj();
console.log(obj.__proto__ == Obj.prototype);	// true

프로토타입 객체는 constructor 프로퍼티가 있는데, 객체 생성자 함수를 참조한다.

console.log(Obj.prototype.constructor == Obj);	// true

 

3. constructor

생성된 객체의 프로토타입의 constructor 프로퍼티는 생성자 함수를 참조하는데, 아래 표현식을 통해서 생성자 함수의 이름을 알 수 있다.

Object.getPrototypeOf(object).constructor.name

* 기본형 중 null, undefined는 오류발생

 

자료형 식별에 typeof 연산자를 많이 사용하나, 참조형 변수의 경우에는 함수를 제외하고 모든 출력이 object이므로 구체적인 식별에 한계가 있는데, 위의 표현식을 이용하면 유용하다

let fun = () => {};
console.log(typeof fun); // function
console.log(fun instanceof Function); // true
console.log(Object.getPrototypeOf(fun).constructor.name); // Function

let arr = [];
console.log(typeof arr); // object
console.log(arr instanceof Array); // true
console.log(Object.getPrototypeOf(arr).constructor.name); // Array