Extends, Super
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)}`
}
Author And Source
이 문제에 관하여(Extends, Super), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tastestar/Extends-Super저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)