프로토타입

자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반의 언어에서는 상속을 사용 하지만 프로토타입 기반 언어는 객체간 상속을 구현할 때 프로토타입을 사용합니다. 프로토타입은 객체의 원형이며 이를 참조 함으로써 상속과 비슷한 효과를 얻습니다.

객체가 어떤 속성이나 메서드에 접근시 해당 객체에 메서드나 속성이 있는지 확이하고 없다면 프로토타입 체인에 따라 상위 프로토타입에서 확인합니다.

우선 아래의 그림을 보면서 프로토타입을 확인해보겠습니다.

Constructor - prototype
		------------------
		| 
		|
new	|                 (추후 이미지로 교체)
		|
		|
instance - __proto__

이 도식을 설명하면 어떤 생성자 함수를 new연산자를 이용해 호출하면 Constructor에 정의된 내용을 바탕으로 인스턴스가 생성이 됩니다. 이 instance에는 __proto__라는 프러퍼티가 자동으로 부여되는데 이 프로토는 Constructor의 prototype을 참조합니다.

여기서 prototype은 객체이고 이를 참조하는 proto역시 객체입니다. 그리고 prototype의 객체에는 인스턴스가 사용할 메서드들이 저장되어있습니다. 그렇다면 prototype을 참조하는 proto를 통해 인스턴스에서도 정의된 메서드들을 사용할 수 있게됩니다.

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

Person.prototype.sayHello = function(){
  console.log(`my name is ${this.name}`)
}

const person1 = new Person('tony')
const person2 = new Person('chloe')

person1.sayHello() // 'my name is tony'
person2.sayHello() // 'my name is chloe'

위의 코드를 설명해보겠습니다. 우선 Person이라는 함수는 객체를 생성하는 생성자 함수입니다. 그리고 Person.prototype에는 sayHello메서드를 포함합니다. 그리고 이 메서드는 모든 Person객체가 상속을 받습니다. 이제 생성자 함수를 이용해서 인스턴스를 생성해주었고 각각의 인스턴스는 Person의 prototype에 저장된 메서드를 사용할 수있습니다.

Person.prototype에 메서드를 저장하면 person1.proto에서도 이 메서드를 사용할 수 있다는 점을 알았는데 아래의 상황을 보겠습니다.

person1.__proto__.sayHello() // undefined

우선 에러가 나오지 않았습니다. 즉, 호출할 수있는 함수라는 뜻이네요. 그런데 왜 undefined일까요?
this입니다. 현재 sayHello라는 함수에서 this의 대상 객체는 person1이 아닌 person1.proto이고 이 객체 내부에는 Name프로퍼티가 없습니다. 그래서 정의되어있지 않은 식별자에 접근을 하니 javascript엔진이 에러가 아닌 undefined를 반환한 것 입니다.

프로토타입 체인

자바스크립트에서 객체가 특정 속성 또는 메서드를 찾을 때, 해당 객체의 프로토타입 체인을 따라 한단계씩 올라가면서 찾게 됩니다.

프로토타입 체인은 객체가 다른 객체로 부터 상속 받은 속성이나 메서드를 검색 할 때 사용됩니다. 먼저 해당 객체에 자신에게 해당 속성, 메서드가 존재하는지 확인하고 만약 없다면, 프로토타입 체인을 따라 상위 포로토타입에서 해당 속성과 메서드를 찾습니다. 그리고 이 과정은 끝에 도달할 때 까지 계속됩니다.