JavaScript에서 __proto__, [[Prototype]] 및 .prototype의 차이점

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, 특히 프로토타입 기반 상속 개념을 처음 접하는 초보자 및 중급자

핵심 요약

• [[Prototype]]은 모든 객체의 내부 슬롯으로, 프로토타입 체인을 구성하는 핵심 요소이며 Object.getPrototypeOf()로 접근 가능
• __proto__는 비추천된 접근 방식으로, [[Prototype]]을 참조하지만 성능 저하와 예측 불가능한 동작 유발 가능
• .prototype은 생성자 함수에만 존재하며, 인스턴스가 상속받는 메서드/속성 정의에 사용됨
• Object.create() 사용이 권장되며, __proto__ 직접 조작은 피해야 함

섹션별 세부 요약

1. 프로토타입 기반 상속의 핵심 개념

• [[Prototype]]은 모든 객체(Null 제외)의 내부 슬롯으로, 상속을 위한 프로토타입 체인의 기초
• __proto__는 [[Prototype]]을 참조하는 getter/setter로, Object.setPrototypeOf() 대신 사용 권장
• .prototype은 생성자 함수에만 존재하며, 인스턴스가 상속받는 속성/메서드 정의에 사용됨

2. `__proto__`의 사용과 한계

• __proto__는 Object.getPrototypeOf() 대신 사용되지 않도록 권장
• 동적으로 __proto__를 조작하면 JavaScript 엔진의 최적화가 무효화되어 성능 저하 발생
• 예시:

```javascript

const dog = { __proto__: animal }; // 비추천

const dog = Object.create(animal); // 권장

```

3. `.prototype`과 생성자 함수의 관계

• 생성자 함수의 .prototype은 인스턴스가 상속받는 속성/메서드 정의
• .prototype의 __proto__는 Object.prototype을 가리킴
• 예시:

```javascript

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

Person.prototype.greet = function() { return Hello, ${this.name}; };

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype); // true

```

4. 프로토타입 체인의 동작 방식

• 속성 접근 시 객체 내부 → [[Prototype]] → 상위 프로토타일 체인 순으로 검색
• 예시:

```javascript

const grandparent = { lastName: "Smith" };

const parent = { __proto__: grandparent };

const child = { __proto__: parent };

console.log(child.lastName); // "Smith" (grandparent에서 상속)

```

5. `Object.create()` vs `__proto__`의 차이

• Object.create(animal)는 새로운 객체를 생성하여 animal을 프로토타일로 설정
• __proto__ 직접 설정은 불필요한 중간 레이어 추가 가능
• 예시:

```javascript

const dog = Object.create(animal); // 권장

const dog2 = { __proto__: Object.create(animal) }; // 비추천

```

결론

• [[Prototype]]과 .prototype은 프로토타입 체인의 핵심 개념이며, __proto__는 성능과 예측 가능성 측면에서 피해야 함
• Object.create() 사용을 통해 프로토타입을 명시적으로 설정하고, Object.setPrototypeOf()는 기존 객체의 프로토타일 변경 시 사용
• 프로토타입 체인의 이해는 JavaScript의 상속 메커니즘을 효과적으로 활용하는 데 필수적