클래스 선언 또는 표현식에서 extends
키워드는 상위 클래스('기본 클래스'라고도 함)가 하위 클래스('서브클래스' 또는 '파생 클래스'라고도 함)의 프로토타입 역할을 하는 다른 클래스의 서브클래스로 작동하는 클래스를 만드는 데 사용됩니다.
class ParentClass {}
class ChildClass extends ParentClass {}
Object.getPrototypeOf( ChildClass );
> class ParentClass {}
이러한 서브클래스는 상위 클래스의 속성과 메서드를 상속합니다. 이를 통해 가능한 모든 사용 사례에 맞게 상위 클래스를 오버로드하거나 비슷한 목적을 위한 코드를 다시 구현하지 않고도 클래스의 핵심 기능을 확장하여 더 구체적인 목적을 제공할 수 있습니다.
하위 클래스는 상위 클래스에서 상속된 메서드를 자체적으로 구현할 수 있습니다.
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
classMethod() {
console.log( `The value was '${ this.instanceProp }.'`)
}
}
class ChildClass extends MyClass {
classMethod() {
console.log( `The value was '${ this.instanceProp },' and its type was '${ typeof this.instanceProp }.'`)
}
}
const myParentClassInstance = new MyClass( "My string." );
const mySubclassInstance = new ChildClass( 100 );
myParentClassInstance.classMethod();
> "The value type was 'string.'"
mySubclassInstance.classMethod();
> "The value was '100,' and its type was 'number.'"
super
를 사용하여 하위 클래스의 컨텍스트에서 상위 클래스에 정의된 메서드를 호출할 수도 있습니다.
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
classMethod() {
console.log( `The value was '${ this.instanceProp }.'`)
}
}
class ChildClass extends MyClass {
subclassMethod() {
super.classMethod();
console.log( `The value type was '${ typeof this.instanceProp }.'`)
}
}
const mySubclassInstance = new ChildClass( 100 );
mySubclassInstance.subclassMethod();
> The value was '100.'
> The value type was 'number.'
이전 예에서 본 것처럼 하위 클래스의 컨텍스트에서 constructor()
메서드가 생략되면 JavaScript의 암시적 생성자는 동일한 인수 집합과 함께 상위 생성자를 호출합니다. 그러나 서브클래스에 생성자가 있는 경우 this
를 참조하기 전에 먼저 필요한 인수와 함께 super()
를 호출해야 합니다.
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
classMethod() {
console.log( `The value was '${ this.instanceProp }.'`)
}
}
class ChildClass extends MyClass {
constructor( myPassedValue ) {
super( myPassedValue );
this.modifiedProp = myPassedValue + 50;
}\
subclassMethod() {
super.classMethod();
console.log( `The value type was '${ typeof this.instanceProp }.'`)
}
}
const mySubclassInstance = new ChildClass( 100 );
mySubclassInstance;
> MyClass { instanceProp: 100, modifiedProp: 150 }
getter와 setter는 각각 값을 검색하고 정의하는 데만 사용되는 특수 메서드입니다. get
및 set
키워드를 사용하여 정의된 메서드를 사용하면 정적 속성인 것처럼 상호작용할 수 있는 메서드를 만들 수 있습니다.
class MyClass {
constructor( originalValue ) {
this.totalValue = 0;
}
set doubleThisValue( newValue ) {
this.totalValue = newValue * 2;
}
get currentValue() {
console.log( `The current value is: ${ this.totalValue }` );
}
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass { totalValue: 0 }
myClassInstance.doubleThisValue = 20;
myClassInstance.currentValue;
> The current value is: 40
get
및 set
속성은 클래스의 프로토타입 속성에 정의되므로 클래스의 모든 인스턴스에서 사용할 수 있습니다.
이해도 테스트
extends
키워드로 만든 클래스에 관한 올바른 설명을 선택하세요.
It can't overwrite methods from a parent class.