[JS/Prototype] Javascript Prototype Chain에 대하여

뭔가 모호하게 이해했었는데 다시 확실하게 개념을 정리하려고 쓰는 글이다!

 

-아래 예제는 바닐라코딩(Vanilla Coding) 수업 시간에 쓰인 예제 코드 중 일부입니다.-

function Car (owner) {
  this.owner = owner;
}

Car.prototype.soldTo = function (newOwner) {
  this.owner = newOwner;
};

 

여기 자동차를 만드는 Car라는 이름의 constructor 함수가 있다.

이 생성자 함수에는 owner라는 인자를 받아서 할당한 owner 속성을 가지고 있다.

 

Car의 prototype에는 soldTo라는 메소드가 존재한다.

 

 

function ElectricCar (owner) {
  Car.call(this, owner);
  this.power = 0;
}

 

이제 ElectricCar라는 새로운 constructor 함수가 생겼다.

이 생성자 함수는 power라는 속성이 있고,

Car라는 constructor를 call을 사용하여 호출하는 실행문이 있다.

 

만약에 ElectricCar 함수에 string을 인자로 넣어서 새로운 인스턴스를 만들면

ElectricCar함수는 인자로 받은 string을 Car 함수에 인자로 넘겨주고 Car 함수를 실행할 것이다.

이 때 this값을 ElectricCar의 this로 설정하고 실행하는 것이다.

 

그러면 그 새 인스턴스에 할당된 객체는 {owner: "Julia", power: 0} 이런 식으로 만들어진다.

 

 

ElectricCar.prototype = Object.create(Car.prototype);

 

이제 이 문장을 실행하면 Car의 prototype을 prototype으로 하는 새로운 객체가 생성되어

ElectricCar의 prototype에 할당된다.

 

그러면 ElectricCar의 prototype의 prototype은 Car의 prototype이 된다.

 

 

ElectricCar.prototype.constructor = ElectricCar;

 

근데 문제는 ElectricCar의 프로토타입에 빈 객체가 할당되었기때문에 constructor속성이 없다.

그렇기 때문에 우리는 ElectricCar의 prototype에 constructor라는 속성을 만들고 거기에 ElectricCar를 할당해주어야한다.

 

 

 

 

ElectricCar.prototype.recharge = function (time) {
  var that = this;

  setTimeout(function () {
    that.power = Math.min((time / 100), 100);
  }, time);
};

 

이제 ElectricCar의 prototype에 recharge라는 새로운 메소드를 추가하였다.

 

 

 

 

var myCar = new ElectricCar('Julia');

 

이제 myCar라는 변수에 ElectricCar의 인스턴스를 생성하여 할당하였다.

 

이제 myCar.soldTo()라는 메소드를 실행하면,

자바스크립트는 myCar 인스턴스에 soldTo라는 메소드가 있는지 확인한다.

그 메소드가 존재하지 않기 때문에 상위의 ElectricCar의 prototype에 soldTo()가 있는지 확인한다.

여전히 존재하지 않으므로 ElectricCar.prototype의 prototype인 Car.prototype으로 가서 확인한다.

 

Car.prototype에는 soldTo 메소드가 존재하기 때문에 myCar 인스턴스는 soldTo 메소드를 사용할 수 있게 된다.