Inheritance in JavaScript

🤔...

function Car(name, speed) {
  this.name = name;
  this.speed = speed;
}

Car.prototype.drive = function () {
  console.log(`${this.name} runs at ${this.speed}`)
};

var morning = new Car('morning', 50);

morning.drive();

function Bike(name, speed, maxSpeed) {
  Car.apply(this, arguments)
  this.maxSpeed = maxSpeed;
}

Bike.prototype = Object.create(Car.prototype);
Bike.prototype.constructor = Bike;
Bike.prototype.boost = function () {
  console.log(`${this.name} boosts its speed at ${this.maxSpeed}`)
}

var honda = new Bike('honda', 100, 200);

honda.drive();
honda.boost();

위 코드의 풀이는 대략 아래와 같다.

• Car.apply(this, arguments); 는 Car의 this들을 그대로 받으라는 의미이다. 즉, Car 생성자에 this와 arguments를 적용하라는 말이다. arguments는 매개변수를 의미한다.

• Bike.prototype = Object.create(Car.prototype)은 Car의 메소드인 drive를 사용하기 위해 Bike의 prototype과 Car의 prototype을 연결해준다.

• Object.create() 는 새로운 객체를 만드는 메소드이다. Object.create(Car.prototype) 과 new Car() 의 차이는, Object.create는 객체를 만들되 생성자는 실행하지 않는다. 즉 프로토타입만 넣는다.

• Bike에 빈 Car.prototype이 들어있는 객체를 주었기 때문에 원래 갖고 있던 prototype과 constructor가 삭제되었다. 따라서 다시 constructor를 지정해주는 작업을 해 줘야한다.

또 다른 예제도 만들어볼까?

function Fruit () {
  this.colorRed = function () {
    console.log("RED")
  }
}

function Apple (name) {
  this.name = name;
  this.colorRed = function () {
    console.log("RED")
  }
}

var apple = new Apple("apple");

Fruit 함수와 Apple 함수에 중복되는 코드가 있다. 중복되는 코드를 삭제하고싶을 때 어떻게 해야할까? 여기서 우리는 코드의 상하위를 구분 해야한다. Apple보다 Fruit가 상위이기 때문에 apple에서 중복되는 함수를 지워준다.

function Fruit () {
  this.colorRed = function () {
    console.log("RED")
  }
}

function Apple (name) {
  ✅ Fruit.call(this);
  this.name = name;
  }
}

var apple = new Apple("apple");

Apple 함수에서 Fruit의 속성을 가져 오기 위해 call 메소드를 사용해준다. call 메소드의 인자로 들어가는 this는 뭐가 될까?
Fruit 함수가 call 메소드로 호출되어 Fruit 함수 안의 this가 Apple.call의 인자 this가 된다. 이렇게 Fruit와 Apple에게 colorRed 라는 속성을 연결시켜주었다.

function Fruit () {
  this.colorRed = function () {
    console.log("RED")
  }
}

✅Fruit.prototype.sweet = function () {
  console.log("SWEET")
}

function Apple (name) {
  Fruit.call(this);
  this.name = name;
  }
}

var apple = new Apple("apple");

Fruit에 sweet라는 속성을 추가한다. Fruit와 sweet는 연결이 되었지만 Apple에는 sweet가 없다. 여기서 Object.create()가 필요하게 된다.

Object.create()

지정된 프로토타입 객체 및 속성을 갖는 새로운 빈 객체를 만들어서 반환한다.

Object.create() 는 객체를 만들되, 생성자 함수를 실행시키지 않는다. 즉, 객체의 프로토타입만 가져온다.

function Fruit () {
  this.colorRed = function () {
    console.log("RED")
  }
}

Fruit.prototype.sweet = function () {
  console.log("SWEET")
}

function Apple (name) {
  Fruit.call(this);
  this.name = name;
  }
}

✅Apple.prototype = Object.create(Fruit.prototype);

var apple = new Apple("apple");

Object.create()를 통해 반환된 빈 객체의 prototype이 Fruit.prototype으로 설정되었다. 여기서 또 문제가 생긴다. 모든 함수에는 prototype 속성이 있기 때문에 Apple 또한 prototype이 있다. 그러나 이를 Object.create()를 사용해 빈 객체로 재할당 해버렸다. prototype에는 constructor 라는 속성이 있고 이 또한 사라져버렸다. 그래서 constructor를 다시 설정 해줘야 한다.

function Fruit () {
  this.colorRed = function () {
    console.log("RED")
  }
}

Fruit.prototype.sweet = function () {
  console.log("SWEET")
}

function Apple (name) {
  Fruit.call(this);
  this.name = name;
  }
}

Apple.prototype = Object.create(Fruit.prototype);
✅Apple.prototype.constructor = Apple;

var apple = new Apple("apple");
var food = new Fruit();

food.sweet();
apple.sweet();

참조
MDN : Object.create()
Zerocho blog : 객체 확장
Poiemaweb : 5.2 프로토타입 패턴 상속