Extends

상속을 위해 사용하는 키워드

class People {
	constructor (name, hobby) {
    this.name = name
    this.hobby= hobby
    }
  addHobby(hobby) {
  	this.hobby.push(hobby)
  }
}

class User extends People {
	printHobby() {
    	console.log(this.hobby.join(','));
    }
}

const user = new User('choi', 'dev');
user.addHobby('js');
user.printHobby(); // dev, js

User는 클래스 People을 상속 받았기 때문에 User 안에 없는 addHobby 메서드 역시 사용할 수 있습니다.

extends가 User.prototype.[[Prototype]]을 Person.prototype.으로 설정하기 때문에 User.prototype에 없다면 상위 프로토타입에 찾게됩니다.

수퍼클래스와 서브클래스 간의 상속관계를 설정

• 수퍼 클래스 : 베이스 클래스, 부모 클래스
• 서브 클래스 : 파생 클래스, 자식 클래스

서브 클래스

서브 클래스에서 constructor 을 생략하면, 다음과 같은 constructor가 숨겨져있다

class Uer extends People {
	constructor(...args) { // 클래스 생성할 떄 전달된 인수 리스트
    super(...args)  // 수퍼클래스를 호출해서 인스턴스를 생성
    }
}

Super

super 키워드는 인스턴스를 생성한다.

인스턴스 생성과정

1) extends 호출

2) 상속 클래스 생성자 함수에는 특수 내부 프로퍼티인 [[ConstructorKind]]가 있습니다.
수퍼클래스는 [[ConstructorKind]] : "base"가
서브클래스에는 [[ConstructorKind]] : "derived"를 값으로 가집니다.

3) super 호출

4) 서브클래스는 직접 인스턴스를 생성하지않고 수퍼클래스에게 인스턴스를 위임

5) 빈 객체가 만들어지고, this에 이 객체가 할당되어집니다.(바인딩)

super 참조

class Base  {
	constructor (name) {
    	this.name = name
    }
  	sayHi() {
    	return `Hi ${this.name}`
    }
}

class Derived extends Base {
	sayHi  () {
    	return `${super.sayHi()}`
    }
}

const derived = new Derived("Lee") // Hi Lee

수퍼 클래스의 메서드를 참조하려면 super가 수퍼클래스이 메서드가 바인딩된 객체, 수퍼 클래스의 prototype 프로퍼티에 바인딩된 프로토타입을 참조할 수 있어야함

[[HomeObject]]

• 메서드 자신을 바인딩하고 있는 객체를 가리킴
• 메서드 축약 표현으로 정의된 함수만 가능

super = Object.getPrototypeOf([[HomeObject]])

sayHi() {
  const __super = Object.getPrototypeOf(Derived.prototype);
	return `${__super.sayHi.call(this)}`
}