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()
āĻĒāĻĻā§āϧāϤāĻŋāĻāĻŋ āĻŦāĻžāĻĻ āĻĻā§āĻāϝāĻŧāĻž āĻšāϝāĻŧ, āϤāĻāύ āĻāĻžāĻāĻžāϏā§āĻā§āϰāĻŋāĻĒā§āĻā§āϰ āĻ
āύā§āϤāϰā§āύāĻŋāĻšāĻŋāϤ āĻāύā§āϏāĻā§āϰāĻžāĻā§āĻāϰ āĻāĻāĻ āĻāϰā§āĻā§āĻŽā§āύā§āĻā§āϰ āϏāĻžāĻĨā§ āĻĒā§āϝāĻžāϰā§āύā§āĻ āĻāύāϏā§āĻā§āϰāĻžāĻā§āĻāϰāĻā§ āĻāϞ āĻāϰā§āĨ¤ āϝāĻžāĻāĻšā§āĻ, āϝāĻĻāĻŋ āϏāĻžāĻŦāĻā§āϞāĻžāϏ⧠āĻā§āύ āĻāύāϏā§āĻā§āϰāĻžāĻā§āĻāϰ āĻĨāĻžāĻā§, āϤāĻžāĻšāϞ⧠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 }
Getters āĻāĻŦāĻ setters āĻšāϞ āĻŦāĻŋāĻļā§āώ āĻĒāĻĻā§āϧāϤāĻŋ āϝāĻž āϝāĻĨāĻžāĻā§āϰāĻŽā§ āĻĒā§āύāϰā§āĻĻā§āϧāĻžāϰ āĻāĻŦāĻ āϏāĻāĻā§āĻāĻžāϝāĻŧāĻŋāϤ āĻāϰāĻžāϰ āĻāύā§āϝ āĻāĻāĻā§āĻāĻŋāϝāĻŧāĻžāĻāĻžāĻŦā§ āĻŦā§āϝāĻŦāĻšā§āϤ āĻšāϝāĻŧāĨ¤ 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.