프로토타입

[[prototype]] null 또는 객체며 상속 구현

[[prototype]] 값은 Prototype 객체이며 __proto__로 접근 가능하다 

접근하게되면 내부적으로 Object.getPrototypeOf 호출되어 프로토타입 객체 반환

객체를 생성할때 프로토타입 결정되지만 프로토타입 객체는 다른 임의의 객체로 변경 
(부모 객체인 프로토타입을 동적으로 변경할 수 있다는것을 의미 -> 상속 구현)

 

[[Prototype]] vs prototype 프로퍼티

[[prototype]]은 객체라면 모두 갖고있고 상속을 위해 사용, 

함수의 경우 객체이기 때문에 기본적으로 [[prototype]] 갖고 (Function.prototype) + 'prototype 프로퍼티' 소유

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

var foo = new Person('Lee');

console.dir(Person) // prototype 프로퍼티가 있다
console.dir(foo) // prototype 프로퍼티가 없다

함수 객체가 생성자로 사용될때 이 함수를 통해 생성될 객체의 부모역할을 하는 개체를 가리킨다.

console.log(Person.prototype === foo.__proto__)

 

Constructor 프로퍼티

프로토타입 객체는 constructor 프로퍼티를 갖는다. (인스턴스가 초기화될 때 실행하는 생성자 함수)

객체의 입장에서 자신을 생성한 객체를 가리킨다.

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

var foo = new Person('Lee');

//Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Person.prototype.constructor === Person);

//foo 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(foo.constructor === Person);

// Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다
console.log(Person.constructor === Function);

 

Object.create() // 대문자 'O' -> constructor로 사용한다는것을 의미

첫번째 인자로 들어가는 prototype을 복사해서 만듬

const myObject = Object.create(Object.prototype);
const myLiteral = {};
const noProto = Object.create(null);

console.dir(myObject);
console.dir(myLiteral);
console.dir(noProto); // NO Properties

 

constructor 사용여부

const Car = function(color){
	this.color = color;
}

const car1 = new Car('red'); 생성자 실행
const car2 = Object.create(Car.prototype); 생성자 실행 x prototype의 참조 목적

console.dir(car1); // red o 
console.dir(car2); // red x

const Car = function(color){
	this.color = color;
}

Car.prototype = {
	getColor(){
    	return this.color;
    }
};

const ToyCar = function(){

};

ToyCar.prototype = Object.create(Car.prototype);

const legoCar = new ToyCar();

ToyCar - getColor 메소드
legoCar - color, getColor메소드

console.dir(legoCar instanceof ToyCar); // true
console.dir(legoCar instanceof Car); // true

console.dir(ToyCar.prototype.isPrototypeOf(legoCar)); // true
console.dir(Car.prototype.isPrototypeOf(legoCar)); // true