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
Manakah dari berikut ini yang menentukan class dengan benar?
new class()
myClass = class {}
class MyClass {}
Berapa banyak metode constructor()
yang dapat dimiliki sebuah class?