포도가게의 개발일지

Prototype chain 본문

[JS,TS,Node]

Prototype chain

grape.store 2024. 9. 22. 17:17
반응형

### __proto__와 prototype property

-  __proto__와 prototype 프로퍼티는 동일한것을 가리킬 수 있지만 사용 주체가 다릅니다.

- __proto__는 모든 객체가 가지고있으며 [[Prototype]] 내부 슬롯에 직접 접근을 할 수 있기 때문에 참조 접근하기 위하여 즉 객체가 자신의 prototype에 접근 또는 수정하기 위해서 사용되는 프로퍼티 입니다.

- prototype 프로퍼티는 생성자(constructor)만 가지고 있으며 생성자 함수가 자신이 생성할 객체에 어떤 프로토타입을 할당해야하는지를 저장하기위한 목적으로 사용됩니다.

 

### 생성자 함수와 Prototype

생성자 함수에 매번 method를 만들게 되면 중복되는 code가 매번생성되며 memory를 낭비하게 됩니다. 이를 해결하기 위해 prototype과 생성자를 분리하여 중복되는 코드를 prototype에 저장하게 됩니다.

 

 

 

ordinaryObjectCreate란 javascript에서 객체를 생성하기 위한 interface입니다.

 

javascript에서는 5가지의 객체를 생성하는 방법을 제공합니다.

```

객체 리터럴

Object 생성자 함수

class

Object.create 메서드

생성자 함수

```

가 존재합니다.

 

각 방식에 따라 어떤 prototype이 전달되어 생성된 instance의 내부 슬롯 [[Prototype]]에 저장되어 상속을 구현하게 됩니다.

 

### 객체 리터럴 방식은

```js

const obj = { x:1 };

```

js engine이 런타임이 들어가기전 평가하여 객체를 생성할 때 추상 연산인 OrdinaryObjectCreate를 호출하여, 이때 전달되는 prototype은 Object.prototype이게 됩니다.  이로 인해 객체리터럴로 생성된 객체의 [[Prototype]]에는 Object.prototype이 들어가게 됩니다.

 

### Object 생성자함수

```js

const obj = new Object();

```

이때도 전달되는 prototype은 Object.prototype이 전달되며 저장되는 값 또한 Object.prototype입니다.

 

### 생성자 함수

```js

function Person(name) {

  this.name = name;

}

const obj = new Person('Hello');

```

이때 OrdinaryObjectCreate가 호출 될때 전잘되는 prototype은 Person 생성자 함수가 평가될때 만들어진

Person.prototype 이 전달 되며 [[Prototype]]에는 Person.prototype이 저장됩니다.

 

Person 생성자 함수의 prototype에는 Person.prototype이 저장되며, Person.prototype.constructor에는 Person 생성자 함수가 저장되며 서로 참조하게 됩니다. Person.prototype의 [[Prototype]]에는 Object.prototype이 저장되게 됩니다. Person 생성자 함수의 [[Prototype]]에는 Function.prototype이 저장되게 됩니다.

 

### Object.create

```js

const obj = Object.create(null); // [[Prototype]]에 null이 저장되며, 체인의 종점에 속하게 된다.

const obj2 = Object.create(Object.prototype) // [[Prototype]]에 Object.prototype을 가지게 된다.

```

Object.create는 첫번째 argument에 prototype을 받게되며 OrdinaryObjectCreate의 전달하게 된다.

 

### static method

- static method는 생성자 함수에 존재하며 prototype에 존재하지 않는다 때문에 생성된 객체에서 접근할수 없는것이다.

 

'[JS,TS,Node]' 카테고리의 다른 글

[RxJS] RxJS?  (0) 2022.03.26
TypeScript  (0) 2022.03.13
[Js] 고급 문법  (0) 2022.03.02
[Node] 작동 원리  (0) 2022.02.09
[Java Script]생성자 함수, Closure, generator  (0) 2022.02.08
Comments