10. Javascript 프로토타입 체이닝 (3) - 생성자 함수로 생성한 객체의 프로토타입 체이닝

 

 

프로토타입 체이닝을 공부할 때는, 생성 패턴과 관계없이 다음의 원칙을 기본으로 숙지하고 있어야 합니다. 이는 앞선 아티클에서 살펴보았던 객체 리터럴 방식으로 생성한 객체이든, 이번 아티클에서 볼 생성자 함수를 통해 생성한 객체이든 마찬가지입니다.

 

Javascript에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 부모 객체로 취급한다.

 

그럼 아래의 예제에서, 생성자 함수를 통해 객체를 생성한 다음 해당 객체에서는 프로토타입 체이닝이 어떻게 이루어지는지를 살펴보도록 하겠습니다. 

 

function Rapper(rapName, age, lable) {
    this.rapName = rapName;
    this.age = age;
    this.lable = lable;
}

Rapper.prototype.newFunc = function() {
    console.log(this.rapName);
}

var simonD = new Rapper('Simon Dominic', 30, 'AOMG');

simonD.newFunc();
console.log(simonD.hasOwnProperty('rapName'));

// 출력
// Simon Dominic
// true

 

위의 예제에서는 생성자 함수 Rapper를 통해 객체 simonD를 생성했습니다. 우리가 알고 있는 프로토타입 체이닝 원칙을 대입하여 살펴보면, 우선 객체 simonD의 [[Prototype]]은 Rapper.prototype가 됩니다. 이에 따라 우선 Rapper 객체의 프로토타입 객체에 선언해둔 임의의 새 메서드 newFunc는 simonD를 통해서도 호출할 수 있게 되었습니다. 

 

또한 hasOwnProperty 메서드를 실행했는데 정상적으로 true가 출력되었습니다. 사실, 생성자 함수 Rapper에는 hasOwnProperty가 선언되어 있지 않습니다. 하지만 프로토타입 체이닝 원칙에 따라 Rapper.prototype은 다시 Object.prototype을 [[Prototype]]으로 갖기 때문에 Rapper에 해당 메서드가 없다면 다시 링크를 타고 부모 객체를 확인하게 됩니다. Object에는 hasOwnProperty가 선언되어 있기 때문에 이 메서드를 정상적으로 사용할 수 있게 됩니다. 

 

 

---

 

프로토타입 체이닝은 위에서 설명한 것처럼, Object까지 지속적으로 링크가 되어 있습니다. 즉, 객체 리터럴 방식으로 생성한 객체이든 혹은 생성자 함수를 통해 생성한 객체이든 관계없이 Object.prototype에 도달하게 되는 것입니다. 결과적으로 함수의 생성 방식에 관계없이 모든 Javascript객체는 프로토타입 체이닝을 통해 Object.prototype 객체가 가진 프로퍼티와 메서드에 접근이 가능하고, 공유가 가능하게 됩니다. Object.prototype은 표준 빌트인 객체이고, 이를 통해 isPrototypeOf / hasOwnProperty 같은 표준 메서드를 자유롭게 쓸 수 있게 되는 것입니다.