javascript 기초부시기 - prototype(프로토타입) 1

1. 프로토타입 객체

 

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다. 그렇기 때문에 자바스크립트를 이해하기위해서는

 

프로토타입이 무엇인지 확실히 이해할 필요가 있다. 

 

자바스크립트의 모든 객체는 자신의 부모역할을 담당하는 객체와 연결되어있는데, 그로 인해 부모 객체의 프로퍼티와 

 

메소드를 상속받아 사용할 수 있게한다. 이러한 부모객체를 프로토타입 객체를 줄여서 프로토타입이라고 한다.

 

2.1 프로토타입 객체 확인하기

 

const obj = {
  name: 'Kim'
}
console.log(obj.hasOwnProperty("name")) //true

 

위의 코드는 객체 리터럴로 간단한 객체를 생성하고 그 객체에서 hasOwnProperty 메소드를 사용해 name이란 프로퍼티가 있는지 

 

확인하는 코드이다. 개발자라면 위의 코드는 매우 자연스럽게 동작하는 코드일 것이나, 객체를 처음 접한 사람이라면 한가지 의문이

 

들 수 있다.

 

obj에는 hasOwnProperty라는 메소드가 없는데요?

 

그렇다. obj에는 분명 hasOwnProperty메소드가 없는데 정상적인 실행이 된다. 이는 위에서 잠깐 설명한것처럼 

 

프로토타입 객체에 상속을 받았기 때문이다. 

 

객체 리터럴로 생성한 객체의 프로토타입 객체는 Object.prototype로 확인 할 수 있다.

console.log(Object.prototype)
/*
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
*/

로그로 확인해보면 Object.prototype의 프로퍼티들이 보이고, 그중에 아까 사용했던 메소드인 hasOwnProperty가 확인된다.

 

모든 객체는 Object.prototype을 상속하며, 배열은 Array.prototype을 Date는 Date.prototype을 상속 받아 프로퍼티를 

 

참조하거나 변경, 메소드를 사용 할 수 있다. 그리고 Object.prototype을 제외한 Array, Date, String과 같은 프로토타입들은 또

 

Object.prototype을 상속받는다. 코드로 확인해보자.

 

const obj = {
  name: 'Kim'
}

console.log(Object.prototype.__proto__) //null
console.log(obj.__proto__ === Object.prototype) // true 
console.log(Array.prototype.__proto__ === Object.prototype) // true
console.log(Date.prototype.__proto__ === Object.prototype) //true

 

__proto__는 해당 객체의 프로토타입 객체를 참조할 수 있는데, Object.prototype은 모든 객체의 프로토타입 객체이고, 

 

다른 객체에 상속을 받지않는 부모 객체이므로 프로토타입 객체를 참조해도 어떤 값도 없기 때문에 null이다.

 

그외에 프로토타입 객체인 Array와 Date 등은 Object.prototype의 상속을 받는다.

 

2.2 프로토타입 체인

 

위의 코드를 보면 어떤 배열이 있다고했을때, 해당 배열은 Array.prototype을 프로토타입 객체로 두고있으며, 이 Array.prototype객체는 Object.prototype를 프로토타입 객체로 두었다고 할 수 있다. 그럼 배열에서도 Object.prototype의 프로퍼티를 참조 할 수 있다.

 

console.log([1,2,3].hasOwnProperty(1)) //true

 

위처럼 배열에서  hasOwnProperty프로퍼티를 사용하면

1. 해당 배열은 배열이지만 사실상 자바스크립트에서는 객체이므로 객체의 프로퍼티를 순회하여 찾는다.

2. 해당 프로퍼티가 없다면 프로토타입 객체(Array.prototype)에서 다시 hasOwnProperty를 찾는다.

3. 해당 프로퍼티가 없다면 프로토타입 객체(Object.prototype)에서 다시 hasOwnProperty를 찾는다.

4. Object.prototype에 해당 메소드가 있으므로 해당 메소드 실행 

 

위와 같이 동작하게된다. 위의 과정을 프로토타입 체인이라 하며, 당연히 상속이 지나치게 많으면 리소스에 영향을 줄 수 있다.

 

다음 포스트에서는 프로토타입 객체를 직접 만들어 상속해보고 활용하는 방법을 알아보겠습니다.