[JavaScript]프로토타입(Prototype)

프로토타입(Prototype)

__proto__ => 던더(Dunder) 게터
[[]] 대괄호 두개 => 숨겨진 객체

숨겨진 [[Prototype]] 객체에 접근 하는 방법

1.__proto__게터를 통해 접근 가능

let o = {};
console.log(o.__proto__);

__proto__와 [[Prototype]]는 다름!
(__proto__은 [[prototype]]객체에 접근하기 위한 하나의 관문같은 것)

2.Object.getPrototypeOf를 통해 접근 가능

let o = {};
console.log(Object.getPrototypeOf(o));

게터를 통해서 접근하든 메서드를 통해서 접근하든 둘 다 결과는 같다.

프로토타입

• 객체 속성이나 메서드에 접근 할 때 만약 해당 객체에서 속성, 메서드를 발견하지 못하면 객체의 [[Prototype]] 객체에 접근 후 해당 속성, 메서드가 있는지 찾는다.
  => 프로토 타입 체인을 따라서 검색한다.
• 프로토 타입 체인을 따라 검색하다 가장 먼저 나온 속성, 메서드에 접근한다.
• 모든 함수는 정의되자마자 자동으로 prototype 속성을 갖는다. (*화살표 함수는 제외*)
• prototype 속성에 저장된 값은 객체인데 해당 객체는 constructor라는 속성을 가지고 있으며 그 안에는 자기 자신을 가리키는 함수가 저장된다.

//함수 선언식이든 표현식이든 상관없이 prototype을 갖는다.
function func1() {};
let func2 = function() {};

console.log(func1.prototype); //{constructor: func1}
console.log(func2.prototype); //{constructor: func2}

• new 키워드와 함께 함수를 호출하면 this에 새 객체를 할당 하고 자동으로 this를 반환한다.
• 또한, 해당 객체를 생성할 때 this.__proto__에 자동으로 생성자 함수의 prototype을 대입한다.
• 객체에 원하는 값이 없으면 prototype에서 찾는다.

function User(name){
	//자동으로 대입
	//this = {}
	//this.__proto__ = User.prototype //{ constructor: User}
	this.name = name;
	//return this;
}

※ prototype 객체에 공통 메서드를 정의하더라도 this의 값은 점(.) 앞 객체를 가리키므로 문제 없이 사용 가능하다.