클래스 상속

원문: Class inheritance

클래스 상속은 한 클래스가 다른 클래스를 확장하는 방법이다.

따라서 기존 기능 위에 새로운 기능을 만들 수 있다.

"extends"

Animal 클래스가 있다고 가정 해 보자

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

animal 객체와 Animal 클래스를 그림으로 표현하면 아래와 같다.

/resource/yongkwan/31/01.svg

이 Animal 클래스로 Rabbit 클래스를 만들어 보자.

토끼는 동물이기 때문에 Rabbit 클래스는 Animal에 기반을 두며, Animal 클래스의 메서드에 접할 수 있다. 따라서 토끼는 "일반적인" 동물이 할 수 있는 일을 할 수 있다.

클래스를 확장하는 구문은 다음과 같다.: class Child extends Parent.

Animal을 상속받은 class Rabbit을 만들어 보자 :

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

Rabbit클래스로 만든 객체는 rabbit.hide()와 같은 Rabbit 메서드와 rabbit.run()와 같은 Animal 메서드 둘다 접근이 가능하다.

내부적으로 extends 키워드는 기존 프로토타입 기법을 사용하여 동작한다. extends 는 Rabbit.prototype.[Prototype](/Lee-hyuna/33-js-concepts-kr/wiki/Prototype)를 Animal.prototype로 설정한다. 따라서 Rabbit.prototype에 찾는 메소드가 없으면 JavaScript는 Animal.prototype에서 메소드를 찾는다.

/resource/yongkwan/31/02.svg

예를 들어, rabbit.run 메서드를 찾기 위해 엔진은 내부적으로 아래와 같이 동작한다.

1. rabbit객체(run이 없는) 확인.
2. 프로토타입인 Rabbit.prototype(hide는 있지만 run이 없는) 확인
3. 프로토타입인 Animal.prototype( extends으로 인해) 확인. 마침내 run 메소드를 찾는다 .

Native prototypes 장에서 기억할 수 있듯이, JavaScript 자체는 내장 객체에 프로토 타입 상속을 사용합니다. 예를 들면 Date.prototype.[Prototype](/Lee-hyuna/33-js-concepts-kr/wiki/Prototype)는 Object.prototype이다. 그렇기 때문에 날짜가 일반 객체 메소드에 접근할 수 있다.

extends 뒤엔 어떤 표현이 와도 상관 없다 클래스 구문은 extends 뒤에 어떤 표현이와도 된다.

예를 들어, 부모 클래스를 생성하는 함수 호출 :

function f(phrase) {
return class {
   sayHi() { alert(phrase) }
 }
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

여기서 class User는 f("Hello") 결과로부터 를 상속 받은 것 이다.

상황에 따라 클래스를 생성하는 함수사용하여 상속한다면 고급 프로그래밍 패턴에 유용 할 수 있다.

메소드 오버라이딩(재정의)

메소드를 재정의 방법을 알아보자. 기본적으로 class Rabbit에 없는 모든 메소드는 class Animal에서 "있는 그대로" 가져온다.

그러나 아래 예제에서 보듯이 stop()와 같이 Rabbit 내부에 자체 메소드를 지정하면 대신 사용된다.

class Rabbit extends Animal {
  stop() {
    // ...now this will be used for rabbit.stop()
    // instead of stop() from class Animal
  }
}

일반적으로 오버라이딩은 부모 메소드를 완전히 대체한다는 것 보단, 그 위에 기능을 조정 또는 확장할때 사용한다. 우리의 메서드에서 뭔가를 하지만, 그 전후나 그 과정에서 부모 메서드를 부른다.

클래스는 이를위한 "super" 키워드를 제공한다.

• super.method(...)는 부모 메서드를 호출한다.
• super(...)는 부모 생성자를 호출한다. (생성자 내부에서만)

예를 들어, 토끼가 멈추었을 때 자동 숨기기를 설정해보자.

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }

  stop() {
    super.stop(); // call parent stop
    this.hide(); // and then hide
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White rabbit hides!

이제 Rabbit은 부모의 메서드를 호출하는 super.stop()을 가진 stop메서드가 있다.

화살표 함수는 super가 존재하지 않는다.

화살표 함수 장에서 언급했듯이 화살표 함수에는 super가 없다.

super에 접근하려하면 외부 함수에서 가져온다. 예를 들어 :

class Rabbit extends Animal {
  stop() {
    setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
  }
}

화살표 함수안 super는 stop() 함수안에 super와 동일하다. 그래서 의도대로 작동한다. 여기에 일반적인 함수를 지정하면 오류가 발생한다.

// Unexpected super
setTimeout(function() { super.stop() }, 1000);

생성자 오버라이딩(재정의)

생성자를 오버라이딩하는 것은 약간 까다롭다.

지금까지는 Rabbit에 constructor가 없었다.

스펙 에 따르면 , 클래스가 다른 클래스를 확장하고 constructor없는 경우 다음과 같은 "빈" constructor이 생성된다.

class Rabbit extends Animal {
  // generated for extending classes without own constructors
  constructor(...args) {
    super(...args);
  }
}

위에서 볼 수 있듯이 기본적으로 모든 인수를 전달하면서 부모의 constructor 호출한다. 자신의 생성자를 작성하지 않으면 위처럼 동작한다.

이제에 Rabbit에 사용자 정의 생성자를 추가해보자. name과 earLength 인자로 받는 생성자를 만들 것이다.

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  // ...
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    this.speed = 0;
    this.name = name;
    this.earLength = earLength;
  }

  // ...
}

// Doesn't work!
let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.

으악! 오류가 발생했다. 토끼를 만드는데 실패했다. 무엇이 잘못 됐을까?

답은 상속 클래스의 생성자가 this를 사용하기전에 .super(...) 호출해야만 한다는 것이다.

그러나 왜 그래야만할까?

자세한 진행 상황을 보면 이해가 가능하다.

JavaScript에는 상속 클래스의 생성자 함수만의 특징이 있다. 상속 클래스의 생성자 함수는 특수한 내부 속성으로 레이블이 지정된다. [ConstructorKind](/Lee-hyuna/33-js-concepts-kr/wiki/ConstructorKind):"derived".

차이점은 다음과 같다.

• 일반 생성자가 실행될 때, 빈 객체를 만들어 this에 할당한다.
• 그러나 상속 클래스의 생성자가 실행될 때는, 이 작업을 수행하지 않는다. 부모 생성자가 이 작업을 수행 할 것으로 기대한다.

따라서 상속 클래스에 생성자를 만들었다면 super를 호출해야한다. 그렇지 않으면 this 대한 객체가 생성되지 않는다. 그리고 에러가 발생한다.

예를 들어 Rabbit 생성자가 동작하려면 아래처럼 this를 사용하기 전에, super()를 호출해한다.

lass Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  // ...
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    super(name);
    this.earLength = earLength;
  }

  // ...
}

// now fine
let rabbit = new Rabbit("White Rabbit", 10);
alert(rabbit.name); // White Rabbit
alert(rabbit.earLength); // 10

Super: internals, HomeObject

참고

이 튜토리얼을 처음 읽는 경우 이 섹션을 건너 뛸 수 있다. super와 상속 내부 메커니즘에 관한 것이다.

super를 좀 더 깊게 파악해 보자. 이 과정에서 흥미로운 것들을 보게 될 것이다.

super가 기술적으로 어떻게 작동해야하는지 스스로에게 물어 보자. 객체 메소드가 실행될 때, 객체 메소드는 현재 객체를 this로 가진다. super.method() 호출하면 엔진은 method를 이 현재 객체의 프로토타입에서 가져와야한다. 그러나 어떻게 가져올까?

단순 해 보일 수 있지만 그렇지 않다. 엔진은 현재 객체( this)를 알고있으므로, 부모를 method를 this.__proto__.method로써 가져올 수 있을것만 같다. 불행히도 이러한 "순진한" 솔루션은 작동하지 않는다.

문제가 무엇일까? 클래스가 없으면 단순성을 위해 일반 객체를 사용한다.

세부 사항을 알기를 원하지 않으면 이 부분을 건너뛰고 하위 섹션인 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)으로 이동해도 된다 . 문제되진 않는다. 하지만 깊이 이해하는 데 관심이 있다면 계속 읽어보자.

아래 예에서 rabbit.__proto__ = animal를 보라. 이제 rabbit.eat()안에서 this.__proto__를 사용해서 animal.eat()를 호출해보자.

let animal = {
  name: "Animal",
  eat() {
    alert(`${this.name} eats.`);
  }
};

let rabbit = {
  __proto__: animal, // rabbit.__proto__ = animal
  name: "Rabbit",
  eat() {
    // that's how super.eat() could presumably work
    this.__proto__.eat.call(this); // (*)
  }
};

rabbit.eat(); // Rabbit eats.

(*) 라인을 보면 프로토타입( animal)에서 eat을 가져와서 현재 객체의 컨텍스트에서 호출한다. 여기서 중요한 건 .call(this)이다. 왜냐하면 this.__proto__.eat()으로만 실행한다면, 현재 객체의 컨텍스트가 아닌 프로토타입의 컨텍스트 안에 있는 부모의 eat 실행할 것이다.

위의 코드는 실제로 의도한대로 alert이 동작한다.

이제 체인에 객체를 하나 더 추가해보자. 어떻게 망가지는지 볼 것이다.:

let animal = {
  name: "Animal",
  eat() {
    alert(`${this.name} eats.`);
  }
};

let rabbit = {
  __proto__: animal,
  eat() {
    // ...bounce around rabbit-style and call parent (animal) method
    this.__proto__.eat.call(this); // (*)
  }
};

let longEar = {
  __proto__: rabbit,
  eat() {
    // ...do something with long ears and call parent (rabbit) method
    this.__proto__.eat.call(this); // (**)
  }
};

longEar.eat(); // Error: Maximum call stack size exceeded

코드가 더 이상 동작하지 않는다! longEar.eat()를 호출하면 오류가 발생한다.

그다지 명백하지는 않지만, longEar.eat()호출을 따라가다 보면 이유를 알 수 있다. (*)및 (**)의 두 라인에서 this의 값은 은 현재 오브젝트 (longEar)이다. 모든 객체 메소드는 현재 객체를 this로 가진다.

따라서 (*)과 (**) 두 라인의 값 this.__proto__는 값은 rabbit값으로 정확히 동일하다. 따라서 둘 다 rabbit.eat를 끊임 없이 호출한다.

무슨일이 일어나는지 아래 그림에서 설명한다.

/resource/yongkwan/31/03.svg

1. longEar.eat()안에서, (**)라인은 rabbit.eat호출 하는데, this값은 longEar이다.

// inside longEar.eat() we have this = longEar
this.__proto__.eat.call(this) // (**)
// becomes
longEar.__proto__.eat.call(this)
// that is
rabbit.eat.call(this);

2. 그런 다음 rabbit.eat의 (*)라인에서 , 더 높은 체인에 있는 함수를 호출하고 싶지만 this=longEar이다 . 따라서 this.__proto__.eat는 다시 rabbit.eat가 된다.

// inside rabbit.eat() we also have this = longEar
this.__proto__.eat.call(this) // (*)
// becomes
longEar.__proto__.eat.call(this)
// or (again)
rabbit.eat.call(this);

3. 따라서 rabbit.eat 호출은 더 이상 올라갈 수 없기 때문에 호출은 자기 자신을 끊임 없이 호출한다.

이 문제는 this만을 사용해선 해결할 수 없다.

[HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)

해결책을 제공하기 위해 JavaScript는 함수에 대한 내부 속성인 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)을 추가한다.

함수가 클래스 또는 객체 메서드로 지정되면 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)속성이 해당 객체가됩니다.

그런 다음 super가 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject) 속성을 사용하여 상위 프로토타입을 연결한다.

먼저 일반 객체로 작동 방식을 살펴보자.

let animal = {
  name: "Animal",
  eat() {         // animal.eat.[HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject) == animal
    alert(`${this.name} eats.`);
  }
};

let rabbit = {
  __proto__: animal,
  name: "Rabbit",
  eat() {         // rabbit.eat.[HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject) == rabbit
    super.eat();
  }
};

let longEar = {
  __proto__: rabbit,
  name: "Long Ear",
  eat() {         // longEar.eat.[HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject) == longEar
    super.eat();
  }
};

// works correctly
longEar.eat();  // Long Ear eats.

[HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)으로 인해 의도 한대로 동작한다. longEar.eat와 같은 메소드는 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)을 알기때문에 this를 사용하지 않고도 부모 메소드를 프로토타입에서 가져온다.

메서드는 자유가 아니다

우리가 이전에 알고 있듯이, 일반적으로 함수는 "자유"이며 JavaScript의 객체에 바인딩되지 않는다. 따라서 객체간에 복사하여 다른 객체와 this와 함께 호출 할 수 있다.

그러나 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)의 존재 자체가 그 원칙을 위반한다. [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)변경할 수 없으므로 바인딩은 영원히 지속된다.

[HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)가 사용되는 유일한 장소 는 super이다. 따라서, super를 사용하지 않는 메소드일 경우엔 자유롭고 복사가 가능하다. .그러나 super를 사용한다면 상황이 잘못 될 수 있다.

super사용한 메소드를 복사하여 잘못된 경우는 다음과 같다.

let animal = {
  sayHi() {
    console.log(`I'm an animal`);
  }
};

// rabbit inherits from animal
let rabbit = {
  __proto__: animal,
  sayHi() {
    super.sayHi();
  }
};

let plant = {
  sayHi() {
    console.log("I'm a plant");
  }
};

// tree inherits from plant
let tree = {
  __proto__: plant,
  sayHi: rabbit.sayHi // (*)
};

tree.sayHi();  // I'm an animal (?!?)

tree.sayHi()를 호출하면 "I’m an animal"이 출력된다. 분명히 잘못됐다..

이유는 간단하다.

• (*)라인에서 메소드 tree.sayHi메서드는 rabbit에서 복사되었습니다 코드 중복을 피하고 싶었을까?
• rabbit에서 만들어 졌기 때문에 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)는 rabbit이다. [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)를 변경할 수 없다.
• tree.sayHi()의 코드 내부에 super.sayHi()가 있다. super.sayHi()는 animal에 있는 메소드를 가져온다.

다음은 어떻게 진행되는지에 대한 그림이다.

/resource/yongkwan/31/04.svg

메서드는 함수(function) 형태가 되면 안된다.

클래스와 일반 객체에서 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)는 메서드를 위해 정의된다. 그러나 객체의 경우, 메서드가 "method: function()"아닌 method()로 정확하게 지정 되어야한다.

우리가 느끼기엔 중요하지 않는 것 처럼 보이지만, JavaScript에는 중요하다.

아래 예제에서 비 메소드 구문이 비교에 사용된다. [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)속성이 설정되지 않고 상속이 작동하지 않는다.

let animal = {
  eat: function() { // intentially writing like this instead of eat() {...
    // ...
  }
};

let rabbit = {
  __proto__: animal,
  eat: function() {
    super.eat();
  }
};

rabbit.eat();  // Error calling super (because there's no [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject))

요약

1. Parent 클래스를 Child 클래스가 상속하려면 class Child extends Parent:
   • 이 의미는 메소드가 상속되도록 Child.prototype.__proto__이 Parent.prototype 될 것이란 의미이다.
2. 생성자를 오버라이딩 하는 경우 :
   • this를 사용하기전에 먼저, Child클래스의 생성자에서 super()를 이용해 부모의 생성자를 호출해야한다.
3. 메서드를 오버라이딩하는 경우 :
   • Child메서드에서 super.method()를 사용해 Parent 메서드를 호출할 수 있다.
4. 내부 :
   • 메서드는 내부 [HomeObject](/Lee-hyuna/33-js-concepts-kr/wiki/HomeObject)속성을 통해 자신의 클래스/객체를 기억한다. 이것이 super를 통해 부모에 접근이 가능한 이유다.
   • 따라서 한 객체에서 다른 객체로 super를 이용해 메서드를 복사하는 것은 안전하지 않다..

또한:

• 화살표 함수는 this또는 super를 갖고 있지 않다. 따라서 사용할때는 주의하자.