소년코딩의 자바스크립트 강좌 13. 프로토타입(Prototype)

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다.

이것은 마치 객체지향 언어의 상속과 같은 개념으로, 부모 객체의 프로퍼티를 자신의 것처럼 쓸 수 있는 특징이 있다.

자바스크립트에서는 이러한 부모 객체를 프로토타입 객체라고 한다.

 

var blog = {
    name: "oppa",
    age: 25
};
console.log(blog.valueOf());  // Object {name: "oppa", age: 24}

생성한 blog 객체에서 valueOf() 메서드가 없으므로 에러가 발생해야 하지만 결과가 정상적으로 출력되었다.

그 이유는 blog 객체의 프로토타입(부모 객체)에 valueOf() 메서드가 이미 정의되어 잇고, blog 객체가 상속처럼 valueOf() 메서드를 호출했기 때문이다.

자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Protytpe]]이라는 숨겨진 내부 프로터피를 가지고 있으며,

크롬브라우저에서는 __proto__로 표현한다.

 

모든 객체의 프로토타입은 자바스크립트 룰에 따라 객체를 생성할 떄 결정된다.

• Object.prototype
• Array.prototype
• Function.prototype

---

1. Object.prototype

객체 리터럴 방식으로 생성된 객체의 경우 Object.prototype 객체가 프로토타입 객체가 프로토타입 객체가 된다.

또한 Object.prototype 객체는 자바스크립트 모든 객체의 최상위 부모다.

 

blog 객체의 __proto__ 프로퍼티가 가리키는 객체가 바로 Object.prototype 객체이며 toString(), valueOf() 등과 같은 모든 객체에서 호출 가능한 자바스크립트 기본 내장 메서드가 포함되어 있다.

그 결과 blog 객체는 blog.valueOf(), blog.toString()등을 마치 자신의 프로퍼티인 것처럼 상속받아 사용할 수 있다.

---

2. Array.prototye

배열도 자바스크립트의 객체다.

자바스크립트의 모든 객체는 자신의 부모역할을 하는 객체와 연결되어 있기 때문에 배열 또한 Array.prototype 객체가 프로토타입이다.

모든 배열에 존재하는 length 프로퍼티, push(), pop()....등과 같은 메서드들은 Array.prototype 객체의 프로퍼티다.

Object.prototye은 자바스크립트 객체의 최상위 부모이기 때문에 배열 객체 또한 Object.prototye의 프로퍼티를 사용(호출) 가능하다.

 

---

3. Function.prototye

함수 역시 자바스크립트의 객체이므로 프로토타입이 있다.

자바스크립트 모든 함수들의 부모 객체는 Function.prototype 객체다.

function sum(x, y) {
    console.log(x + y);
}

---

또한 객체를 생성할 때 결정된 프로토타입 객체(=부모 객체) 를 임의의 다른 객체로 변경하는 것도 가능하다.

부모 객체를 동적으로도 바꾸는게 가능한데, 이러한 특징을 활용해 객체 상속등의 기능을 구현할 수 있다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.