[JavaScript]Prototype & Prototype chain

❓What Is Prototype?

 사람은 유전자를 통해서 자신들의 유전 정보를 자식들에게 넘겨줄 수 있다. 

👉javascript에서 유전자 역할을 하는 것은 prototype이다. 모든 객체는 prototype object를 가지고 있고 이를 통해 부모 객체의 정보를 가져올 수 있다.

👇아래 코드예시를 보고 이해해보자!

function neko(){
	this.color = 'black';
	this.gender = 'male';
}

neko.prototype.name = 'chco'


const Neko = new neko();

// Neko = { color:'black', gender:'male'}
// Neko.name = 'chco'
/*이렇게 생성된 오브젝트는 name을 직접 가지지는 않지만*/
/*부모가 가진 정보를 가져올 수 있다.*/

 

console.dir을 통하면 오브젝트의 데이터 값을 살펴볼수 있습니다..

👇console.dir로 Neko의 데이터 값을 확인해 보자!

Neko에는 neko() 함수의 값과 [[prototype]](인터널 슬롯)과 constructor property(생성자 함수)를 가지고 있다.

👆위에서 넣었던 이름 ' chco'가 [[prototype]] 아래에 위치하고 있음을 알 수 있다.)

 

📌인터널 슬롯(Internal slot)

모든 객체들은 전부 [[Prototype]]이라는 인터널 슬롯(internal slot)을 가지고 있으며 [[Protype]]에는 Prototype 객체의 값을 가지고 있다, [[Prototype]]은 __proto__ accessor property로 접근할 수 있다.

console.log(neko.__proto__ === Function.prototype); //true
//neko함수객체의 부모 역활을 하는 Function.prototype을 가르킴

/*###추가 prototype 프로퍼티(!함수 일때만)
console.log(neko.prototype === Neko.__proto__); //true
함수 객체가 생성자로 사용될 때 이 함수의 부모 역할을 하는 객체(prototype object)를 가리킨다.
*/

 

📌Prototype Link

객체의 __proto__ property로 자신의 부모객체에 접근할 수 있는 속성을 prototype Link라 한다

 

📌Constructor property(생성자 함수)

또한 prototype object의 경우 constructor(생성자) property를 갖게 되는데 이 property는 객체 입장에서 자신이 생성한 객체를 가킨다.

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

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

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

 

🔗Prototype chain

function neko(){
	this.color = 'black';
	this.gender = 'male';
}
neko.prototype.name = 'chco'

//neko의 객체 생성
const Neko = new neko();

new키워드를 이용해서 Neko의 객체 생성 시 prototype Link속성을 통해 상위 프로토타입 간 연결이 이루어진다.

새롭게 생성된 객체 Neko에서 name을 가져오겠습니다.

console.log(Neko.name); //출력 'chco'

Neko객체에는 name이 정의되어 있지 않지만 chco가 출력되었다. 어떻게 가능한 걸까❓

📌Neko 객체의 name에 접근할 때, 해당 객체에게 name가 없다면 그다음으로 상위 프로토타입(원형) 속성에서 name이 있는지 확인한다. 없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 찾는다. 이것을 프로토타입 체인이라고 한다.

📌동일함에도 여러 번 코드가 작성되었을 때. 비효율적이기도 하고, 계속 새로운 변수로 만들어지는 것이므로 성능면에서도 불리할 것이다. 이러한 부분은 prototype chain을 통해 해결할 수 있다.

 

🔩클래스, 프로토타입, 인스턴스의 관계도

 

🔎DOM으로 보는 prototype

📌브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있음. 이렇게 생성된 div 엘리먼트는 HTMLDivElement라는 클래스의 인스턴스임

📌위의 EventTarget의 부모로는 모든 클래스의 조상인 Object가 존재이다

📌__proto__  를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있다

let div = document.createElement('div');

div.__proto__   //HTMLDivElement
div.__proto__.__proto__  // HTMLElement
div.__proto__.__proto__.__proto__  // Element
div.__proto__.__proto__.__proto__.__proto__  //Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ //EventTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__  // object

 

❓Property란?❓

property는 어떤 값을 나타냅니다. 그런데 이 값이 다른 값과 연관되어 있을 때 property라고 부릅니다.

예))
=> 문자열에는 length라는 property가 포함되어 있는데 이 프로퍼티는 문자열 안에 있는 문자의 양을 정수로 나타낸 값을 담고 있습니다.

const str = '문자수';

//str문자열 객체의 length 프로퍼티를 출력
console.log(str.length);

//출력된 값
//>3
[출처] [JavaScript] property란 무엇인가?|작성자 AIdev