Class

ES6 memperkenalkan konsep "kelas" di JavaScript, yang berbeda dari dalam bahasa pemrograman lain. Di sini, class adalah fungsi khusus yang berfungsi sebagai template untuk membuat objek yang sudah berisi data, properti yang terkait dengan data tersebut, dan metode yang terkait dengan manipulasi data tersebut. Objek, properti, dan metode ini secara kolektif disebut "anggota" dari .

Untuk menentukan class, gunakan kata kunci class. Mengikuti praktik terbaik dan yang ditetapkan oleh fungsi konstruktor bawaan JavaScript, mulailah ID kelas dengan huruf kapital:

class MyClass {}

Kelas dimaksudkan untuk menyediakan cara yang lebih mudah diakses untuk bekerja dengan fitur prototipe dan fungsi konstruktor:

class MyClass {}

typeof MyClass;
> "function"

Karena class ditambahkan sebagian agar berfungsi dengan JavaScript lanjutan fitur lebih mudah dan lebih menarik, mereka kadang-kadang disebut sebagai "sugar sintaktis". Namun, melakukan lebih dari sekadar menyediakan singkatan yang berguna untuk bekerja dengan pewarisan prototipe. Memperkenalkan sintaksis class yang menciptakan peluang untuk menangani desain yang sudah lama ada masalah pada JavaScript tanpa menimbulkan masalah kompatibilitas mundur. Sebagai satu semua kode di dalam isi class selalu dievaluasi dalam mode ketat.

Untuk membuat instance class, gunakan operator new.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

Fungsi yang ditentukan di dalam isi class ditampilkan sebagai metode masing-masing dari instance class tersebut.

class MyClass {
    classMethod() {
        console.log( "My class method." );
    }
}

const myClassInstance = new MyClass();

myClassInstance.classMethod();
> "My class method."

Sebuah metode yang didefinisikan di dalam sebuah class akan menjadi sebuah metode pada prototipe instance yang dihasilkan. Karena sifat rantai prototipe, Anda dapat memanggil metode ini langsung pada objek yang dihasilkan:

class MyClass {
  classMethod() {
    console.log( "My class method." );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { }
    <prototype>: Object { … }
        classMethod: function classMethod()
        constructor: class MyClass { constructor(myPassedValue) }
        <prototype>: Object { … }

myClassInstance.classMethod();
> "My class method."

Membuat instance class akan memanggil metode constructor() khusus yang melakukan "penyiapan" yang diperlukan untuk instance yang baru dibuat dan melakukan inisialisasi properti apa pun yang terkait dengannya. Argumen apa pun yang diteruskan ke class saat instance yang dibuat akan tersedia untuk metode constructor():

class MyClass {
  constructor( myPassedValue ) {
    console.log( myPassedValue );
  }
}

const myClassInstance = new MyClass( "A string." );
> "A string."

Dalam isi class, nilai this mengacu pada instance itu sendiri, dengan properti apa pun yang ditentukan pada this terekspos sebagai properti setiap instance kelas tersebut:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProperty = myPassedValue;
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { instanceProperty: "A string." }

Properti ini juga tersedia untuk semua metode dalam isi class:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  myMethod() {
    console.log( this.instanceProp );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance.myMethod();
> "A string."

Jika Anda tidak menentukan constructor() untuk class Anda, mesin JavaScript mengasumsikan "default" kosong constructor. Setiap kelas hanya dapat memiliki satu spesial metode bernama constructor():

class MyClass {
  constructor() {}
  constructor() {}
}
> Uncaught SyntaxError: A class may only have one constructor

Anda dapat menentukan class menggunakan deklarasi class atau ekspresi class. Semua contoh sebelumnya adalah deklarasi class, yang mengharuskan nama dipanggil menggunakan new. Ekspresi kelas dapat diberi nama atau dibiarkan tanpa nama untuk membuat profil "anonim" .

let ClassExpression = class {
    constructor() {}
};

ClassExpression;
> class  {}

Satu hal yang dapat Anda gunakan dengan ekspresi kelas anonim adalah fungsi yang membuat class "dengan cepat":

function classMaker() {
  return class {
    constructor() {}
  };
}

let MyVariable = classMaker();

MyVariable;
> class  {}

Mendeklarasikan ulang class menggunakan deklarasi class akan menyebabkan error sintaksis:

class MyClass {
    constructor( ) {
        console.log( "My class." );
    }
};

class MyClass {
    constructor() {
        console.log( "My new class." );
    }
};
> Uncaught SyntaxError: redeclaration of class MyClass

Namun, ekspresi class memungkinkan Anda menentukan ulang class:

let ClassExpression = class MyClass { };

ClassExpression = class MyOtherClass {
    constructor( myString ) {
        this.myProp = myString;
    }
};

new ClassExpression( "String." );
> MyOtherClass {myProp: 'String.'}

Anda tidak dapat memanggil ekspresi class yang dinamai berdasarkan nama seperti halnya class deklarasi. Namun, nama yang ditetapkan untuk ekspresi kelas tersedia sebagai dari instance yang dibuat, umumnya untuk mempermudah proses debug:

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

Saat Anda melakukan inisialisasi variabel menggunakan ekspresi class, aturan pengangkatan variabel itu diikuti seperti yang diharapkan. Deklarasi class mengikuti "zona mati sementara" yang sama aturan sebagai let dan const, dan berperilaku seolah-olah belum diangkat ke bagian atas cakupan saat ini, artinya memanggil class sebelum deklarasi class akan menyebabkan error:

{
    let myVar = new MyClass( "Property string." );

    class MyClass {
        myProp;

        constructor( myString ) {
            this.myProp = myString;
        }
    };
};
> Uncaught ReferenceError: Cannot access 'MyClass' before initialization

Menguji pemahaman Anda