[FE 45] _23.05.12 _ Day 23 (JS_객체 지향 프로그래밍)

---

오늘은 객체 지향 프로그래밍 마지막 날 !

오전에 프로토타입 공부와 오후에는 Beesbeesbees 과제까지 마무리 했다!

---

Bessbessbess 과제에 중심이된 클래스 상속

클래스 상속

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있습니다.

기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있죠.

• ‘extends’ 키워드

  class Animal {
    constructor(name) {
      this.speed = 0;
      this.name = name;
    }
    run(speed) {
      this.speed = speed;
      alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
    }
    stop() {
      this.speed = 0;
      alert(`${this.name} 이/가 멈췄습니다.`);
    }
  }
  
  let animal = new Animal("동물");
  

  객체 animal과 클래스 Animal의 관계를 그림으로 나타내면 다음과 같습니다.또 다른 클래스 Rabbit을 만들어보겠습니다.클래스 확장 문법 class Child extends Parent를 사용해 클래스를 확장해 봅시다.

  class Rabbit extends Animal {
    hide() {
      alert(`${this.name} 이/가 숨었습니다!`);
    }
  }
  
  let rabbit = new Rabbit("흰 토끼");
  
  rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
  rabbit.hide(); // 흰 토끼 이/가 숨었습니다!
  

  클래스 Rabbit을 사용해 만든 객체는 rabbit.hide() 같은 Rabbit에 정의된 메서드에도 접근할 수 있고, rabbit.run() 같은 Animal에 정의된 메서드에도 접근할 수 있습니다.
  1. 객체 rabbit에 run이 있나 확인합니다. run이 없네요.
  2. rabbit의 프로토타입인 Rabbit.prototype에 메서드가 있나 확인합니다. hide는 있는데 run은 없습니다.
  3. extends를 통해 관계가 만들어진 Rabbit.prototype의 프로토타입, Animal.prototype에 메서드가 있나 확인합니다. 드디어 메서드 run을 찾았습니다.
  내장 객체의 프로토타입에서 알아본 것처럼 자바스크립트의 내장 객체는 프로토타입을 기반으로 상속 관계를 맺습니다. Date.prototype.[[Prototype]]이 Object.prototype인 것처럼 말이죠. Date 객체에서 일반 객체 메서드를 사용할 수 있는 이유가 바로 여기에 있습니다.클래스 문법은 extends 뒤에 표현식이 와도 처리해줍니다.

  function f(phrase) {
    return class {
      sayHi() { alert(phrase) }
    }
  }
  
  class User extends f("Hello") {}
  
  new User().sayHi(); // Hello
  

 

여기서 class User는 f("Hello")의 반환 값을 상속받습니다.</aside>

이 방법은 조건에 따라 다른 클래스를 상속받고 싶을 때 유용합니다. 조건에 따라 다른 클래스를 반환하는 함수를 만들고, 함수 호출 결과를 상속받게 하면 됩니다.

아래 예시처럼 extends 뒤에서 부모 클래스를 만들어주는 함수를 호출할 수 있죠.

<aside> 💡 extends 뒤에 표현식이 올 수도 있습니다.

엔진은 다음 절차를 따라 메서드 rabbit.run의 존재를 확인합니다(그림을 아래부터 보세요).

키워드 extends는 프로토타입을 기반으로 동작합니다. extends는 Rabbit.prototype.[[Prototype]]을 Animal.prototype으로 설정합니다. 그렇기 때문에 Rabbit.prototype에서 메서드를 찾지 못하면 Animal.prototype에서 메서드를 가져옵니다.

Animal을 상속받는 class Rabbit를 만들어 보겠습니다.

토끼는 동물이므로 Rabbit은 동물 관련 메서드가 담긴 Animal을 확장해서 만들어야 합니다. 이렇게 하면 토끼도 동물이 할 수 있는 ‘일반적인’ 동작을 수행할 수 있습니다.

 

• 먼저, 클래스 Animal을 만들어보겠습니다.
• super 키워드와 [[HomeObject]]
• 자유로운 this자바스크립트에선 모든 함수에 this를 사용할 수 있습니다.
  • 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우됩니다.
    • 단순 호출
    • [bind 메서드](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드)
    • 화살표 함수
    • 객체의 메서드로서
    • 객체의 프로토타입 체인에서의 this
    • 접근자와 설정자의 this
    • 생성자로서
    • DOM 이벤트 처리기로서
    • 인라인 이벤트 핸들러에서

---

this - JavaScript | MDN

https://ko.javascript.info/function-prototype

함수의 prototype 프로퍼티

---