Memperluas class

Kata kunci extends digunakan dalam deklarasi atau ekspresi class untuk membuat yang bertindak sebagai subclass dari class lain, dengan class induk (terkadang disebut "class dasar") yang berfungsi sebagai prototipe class turunan (terkadang disebut "{i>subclass<i}" atau "class turunan").

class ParentClass {}
class ChildClass extends ParentClass {}

Object.getPrototypeOf( ChildClass );
> class ParentClass {}

Subclass ini mewarisi properti dan metode class induk. Ini memungkinkan Anda memperluas fungsi inti class untuk menyajikan tujuan tanpa membebani kelas induk agar sesuai dengan setiap kemungkinan kasus penggunaan, atau menerapkan kembali kode yang memiliki tujuan serupa.

Class turunan dapat menyediakan implementasinya sendiri dari metode yang diwarisi dari class induk:

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.'"

Anda juga bisa memanggil metode yang didefinisikan pada class induk dalam konteks class turunan menggunakan 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.'

Seperti yang terlihat pada contoh sebelumnya, saat metode constructor() dihilangkan di konteks kelas turunan, konstruktor implisit JavaScript memanggil induk bersama dengan kumpulan argumen yang sama. Namun, jika ada di subclass, fungsi harus memanggil super() terlebih dahulu beserta semua argumen yang diperlukan sebelum merujuk this.

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 }

Pengambil dan penyetel adalah metode khusus yang digunakan secara eksklusif untuk mengambil dan menentukan masing-masing. Metode yang ditentukan menggunakan kata kunci get dan set memungkinkan Anda membuat metode yang dapat berinteraksi seolah-olah metode tersebut statis properti baru.

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

Properti get dan set ditentukan di properti prototipe class, sehingga tersedia untuk semua instance class.

Menguji pemahaman Anda

Pilih pernyataan yang benar tentang kelas yang dibuat dengan kata kunci extends.

Ini bertindak sebagai turunan dari class yang diperluasnya.
Class ini mewarisi properti dan metode class induknya.
It can't overwrite methods from a parent class.
Berfungsi sebagai induk class yang diperluas.