javascript의 prototype이란?

참고 블로그

: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

: http://insanehong.kr/post/javascript-prototype/

자바스크립트는 프로토타입 기반 언어

: 자바크립트는 class라는 개념이 없음. 대신 Prototype이 존재

Prototype의 사용 예시

function Person() {
  this.eyes = 2;
  this.nose = 1;
}

var kim  = new Person();
var park = new Person();

console.log(kim.eyes);  // => 2
console.log(kim.nose);  // => 1

console.log(park.eyes); // => 2
console.log(park.nose); // => 1

=>위의 코드에서는 메모리에 각 kim과 park의 eyes, noes 메모리가 2개씩 총 4개가 할당됨.

function Person() {}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

var kim  = new Person();
var park = new Person():

console.log(kim.eyes); // => 2
...

=>그러나 위의 코드에서는 Person.prototype이라는 Object가 존재하고 Person함수로부터 생성된 객체들은 이 Object의 값을 가져다 쓴다. 즉 공유해서 사용한다.

Prototype Link와 Prototype Object

1.Prototype Object

: 객체는 항상 함수로 생성되는데, 함수가 정의될 때 2가지일이 동시에 일어난다.

1) 해당 함수에 Constructor(생성자) 자격 부여

: 즉, new를 통해 객체를 만들 수 있게 됨.

2) 해당 함수의 Prototype Object 생성 및 연결

: 함수를 정의하면 Prototype Object도 같이 생성됨.

 prototype이라는 속성을 통해 접근이 가능.

 Prototype Object는 일반적인 객체와 같고, 기본적 속성으로 constructor와 __proto__를 가지고 있다.

=> Person 함수를 통해 생성되었으니 Person.prototype(=>Prototype Object)을 참조할 수 있게 됩니다.

=> 속성을 마음대로 추가/삭제 가능

Person.prototype.eyes = 2;

Person.prototype.nose = 1;

2.Prototype Link

__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다.

__proto__속성은 모든 객체가 빠짐없이 가지고 있는 속성이다.

__proto__가 Prototype Object에 존재하는 eyes를 참조할 수 있게 해주는 역할을 한다.

즉, Person 함수의 Prototype Object인 Person.prototype을 가리키고 있다.

해당 속성을 찾을 때까지 상위 프로토타입을 탐색하고, 최상위인 Object의 Prototype Object까지 도달하여도 못찾은 경우 undefined를 리턴한다.

 이렇게 __proto__속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라한다.