JavaScript: Bidang Kelas Umum dan Privat

Beberapa saran memperluas sintaksis kelas yang ada di JavaScript dengan fungsionalitas baru. Artikel ini menjelaskan sintaks baru untuk bidang kelas publik di V8 v7.2 dan Chrome 72, serta bidang pribadi yang akan datang.

Berikut ini adalah contoh kode yang membuat instantiates kelas IncreasingCounter :

const counter = new IncreasingCounter(); counter.value; // logs 'Getting the current value!' // → 0 counter.increment(); counter.value; // logs 'Getting the current value!' // → 1 

Perhatikan bahwa nilai mengakses mengeksekusi beberapa kode (mengeluarkan pesan ke log) sebelum mengembalikan nilai. Sekarang tanyakan pada diri Anda: bagaimana Anda mengimplementasikan kelas ini dalam JavaScript?

Kelas ES2015

Di bawah ini adalah contoh bagaimana kelas IncreasingCounter dapat diimplementasikan menggunakan sintaks ES2015:

 class IncreasingCounter { constructor() { this._count = 0; } get value() { console.log('Getting the current value!'); return this._count; } increment() { this._count++; } } 

Kelas menyediakan nilai rajin dan metode untuk menambah nilai dalam prototipe. Lebih anehnya, kelas memiliki konstruktor yang menginisiasi properti _count dan menetapkan nilai awalnya menjadi 0. Sekarang kita menggunakan awalan garis bawah untuk menunjukkan bahwa _count tidak boleh digunakan langsung di luar kelas, tetapi ini hanya sebuah konvensi; pada kenyataannya, ini bukan milik pribadi, dan semantik ini tidak didefinisikan dalam bahasa itu sendiri.

 const counter = new IncreasingCounter(); counter.value; // logs 'Getting the current value!' // → 0 // Nothing stops people from reading or messing with the // `_count` instance property. counter._count; // → 0 counter._count = 42; counter.value; // logs 'Getting the current value!' // → 42 

Bidang publik kelas

Sintaks baru untuk bidang publik menyederhanakan definisi kelas:

 class IncreasingCounter { _count = 0; get value() { console.log('Getting the current value!'); return this._count; } increment() { this._count++; } } 

Properti _count sekarang secara ringkas dideklarasikan di awal kelas. Kami tidak lagi memerlukan konstruktor hanya untuk mendefinisikan beberapa bidang. Hebat!

Namun, _count masih menjadi milik umum. Dan dalam contoh khusus ini, kami ingin mencegah bidang ini diakses secara langsung.

Bidang kelas pribadi

Di sinilah bidang pribadi datang untuk menyelamatkan. Sintaks baru untuk bidang pribadi mirip dengan sintaksis bidang publik, kecuali bahwa Anda menandainya sebagai pribadi menggunakan simbol # . Anda mungkin berpikir bahwa # hanya bagian dari nama bidang:

 class IncreasingCounter { #count = 0; get value() { console.log('Getting the current value!'); return this.#count; } increment() { this.#count++; } } 

Bidang pribadi tidak tersedia di luar badan kelas:

 const counter = new IncreasingCounter(); counter.#count; // → SyntaxError counter.#count = 42; // → SyntaxError 

Properti Statis

Sintaks bidang kelas dapat digunakan untuk membuat properti dan metode statis publik dan pribadi, seperti yang ditunjukkan di bawah ini:

 class FakeMath { // `PI` is a static public property. static PI = 22 / 7; // Close enough. // `#totallyRandomNumber` is a static private property. static #totallyRandomNumber = 4; // `#computeRandomNumber` is a static private method. static #computeRandomNumber() { return FakeMath.#totallyRandomNumber; } // `random` is a static public method (ES2015 syntax) // that consumes `#computeRandomNumber`. static random() { console.log('I heard you like random numbers…') return FakeMath.#computeRandomNumber(); } } FakeMath.PI; // → 3.142857142857143 FakeMath.random(); // logs 'I heard you like random numbers…' // → 4 FakeMath.#totallyRandomNumber; // → SyntaxError FakeMath.#computeRandomNumber(); // → SyntaxError 

Sederhanakan pekerjaan dengan subclass

Manfaat sintaks bidang kelas baru menjadi lebih jelas ketika bekerja dengan subclass yang memperkenalkan bidang tambahan. Bayangkan kelas dasar Animal berikut:

 class Animal { constructor(name) { this.name = name; } } 

Untuk membuat subkelas Cat yang menambahkan properti baru ke instance, Anda sebelumnya perlu memanggil super () untuk memanggil konstruktor kelas dasar Animal sebelum membuat properti ini:

 class Cat extends Animal { constructor(name) { super(name); this.likesBaths = false; } meow() { console.log('Meow!'); } } 

Ada banyak kode boilerplate hanya untuk menunjukkan bahwa kucing tidak benar-benar suka mandi. Untungnya, sintaks bidang kelas baru menghilangkan kebutuhan untuk mendefinisikan konstruktor ini dengan panggilan canggung ke super () :

 class Cat extends Animal { likesBaths = false; meow() { console.log('Meow!'); } } 

Total

Bidang kelas publik tersedia mulai dengan V8 v7.2 dan Chrome 72. Ada rencana untuk segera merilis bidang kelas privat.