) direka untuk memudahkan pembina dengan ahli swasta dan statik. Cadangan ini kini berada di TC39 Fasa 3: Tahap Calon dan kemungkinan akan ditambah kepada ES2019 (ES10). Node.js 12, Chrome 74, dan Babel kini menyokong medan peribadi. Sebelum kita memahami bagaimana bidang kelas dilaksanakan, adalah berguna untuk mengkaji semula kelas ES6. Artikel ini dikemas kini pada tahun 2020. Untuk pengetahuan JavaScript yang lebih mendalam, baca buku kami "JavaScript: Dari Newbie ke Ninja, Edisi Kedua".

mata utama

ES6 memperkenalkan kelas untuk JavaScript, tetapi untuk aplikasi yang kompleks, mereka boleh menjadi terlalu mudah. Bidang kelas ES2019 direka untuk memudahkan pembina dengan ahli swasta dan statik yang boleh ditambah kepada ES2019 (ES10).
Pelaksanaan medan kelas baru membolehkan permulaan sifat awam di luar mana -mana pembina di bahagian atas kelas. Jika pembina masih diperlukan, inisialisasi dilaksanakan sebelum ia berjalan.
bidang kelas dalam ES2019 membolehkan medan kelas swasta diisytiharkan menggunakan awalan hash#. Ini menjadikan bidang ini hanya dapat diakses dalam kaedah dalaman kelas, bukan dari luar kelas.
Penggunaan # untuk mewakili kepelbagaian dalam bidang kelas telah dikritik, terutamanya kerana ia tidak begitu intuitif sebagai kata kunci swasta. Walau bagaimanapun, simbol # tidak sah di luar definisi kelas, memastikan bidang persendirian tetap peribadi.
Manfaat segera bidang kelas ES2019 adalah kod reaksi bersih. Mereka boleh ditugaskan sebagai fungsi menggunakan ES6 = & GT;

asas -asas kategori ES6

. Mereka kebanyakannya gula sintaks, tetapi menawarkan konsep pengaturcaraan berorientasikan objek yang lebih biasa. Kelas adalah template objek yang mentakrifkan bagaimana objek jenis itu berkelakuan. Kelas haiwan berikut mentakrifkan haiwan umum (kelas biasanya diwakili dalam huruf modal awal untuk membezakannya dari objek dan jenis lain):

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}

Kaedah pembina berjalan apabila membuat objek jenis haiwan. Ia biasanya menetapkan sifat awal dan mengendalikan permulaan yang lain. bercakap () dan berjalan () adalah kaedah contoh yang menambah lebih banyak fungsi. Anda kini boleh menggunakan kata kunci baru untuk membuat objek dari kelas ini:

let rex = new Animal('Rex', 4, 'woof');
rex.speak();          // Rex says "woof"
rex.noise = 'growl';
rex.speak();          // Rex says "growl"

adalah kaedah khas yang digunakan hanya untuk menentukan nilai. Begitu juga, getter adalah kaedah khas untuk nilai pulangan sahaja. Contohnya:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

  // setter
  set eats(food) {
    this.food = food;
  }

  // getter
  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner );  // Rex eats anything for dinner.

biasanya mungkin menggunakan satu kelas sebagai kelas asas untuk yang lain. Kelas manusia boleh mewarisi semua sifat dan kaedah dalam kelas haiwan menggunakan kata kunci Extends. Sifat dan kaedah boleh ditambah, dikeluarkan, atau diubah seperti yang diperlukan untuk membuat objek manusia lebih mudah dan lebih jelas:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}

Super merujuk kepada kelas induk, jadi biasanya panggilan pertama yang dipanggil dalam pembina. Dalam contoh ini, kaedah speak manusia () mengatasi kaedah yang ditakrifkan dalam haiwan. Sekarang anda boleh membuat contoh objek manusia:

let rex = new Animal('Rex', 4, 'woof');
rex.speak();          // Rex says "woof"
rex.noise = 'growl';
rex.speak();          // Rex says "growl"

Kaedah dan sifat statik

kaedah menentukan menggunakan kata kunci statik membolehkan ia dipanggil pada kelas tanpa membuat contoh objek. Pertimbangkan pemalar math.pi: Tidak perlu membuat objek matematik sebelum mengakses sifat PI. ES6 tidak menyokong sifat statik yang sama seperti bahasa lain, tetapi sifat boleh ditambah kepada definisi kelas itu sendiri. Sebagai contoh, kelas manusia boleh disesuaikan untuk menyimpan tuduhan berapa banyak objek manusia yang telah dibuat:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

  // setter
  set eats(food) {
    this.food = food;
  }

  // getter
  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner );  // Rex eats anything for dinner.

akan mengembalikan bilangan manusia dengan sewajarnya:

class Human extends Animal {

  constructor(name) {

    // 調(diào)用Animal構(gòu)造函數(shù)
    super(name, 2, 'nothing of interest');
    this.type = 'human';

  }

  // 重寫Animal.speak
  speak(to) {

    super.speak();
    if (to) console.log(`to ${to}`);

  }

}

medan kelas es2019 ( baru )

Pelaksanaan medan kelas baru membolehkan permulaan sifat awam di luar mana -mana pembina di bahagian atas kelas:

let don = new Human('Don');
don.speak('anyone');        // Don says "nothing of interest" to anyone

don.eats = 'burgers';
console.log( don.dinner );  // Don eats burgers for dinner.

ini bersamaan dengan:

class Human extends Animal {

  constructor(name) {

    // 調(diào)用Animal構(gòu)造函數(shù)
    super(name, 2, 'nothing of interest');
    this.type = 'human';

    // 更新Human對象的計(jì)數(shù)
    Human.count++;

  }

  // 重寫Animal.speak
  speak(to) {

    super.speak();
    if (to) console.log(`to ${to}`);

  }

  // 返回人類對象的個數(shù)
  static get COUNT() {
    return Human.count;
  }

}

// 類的靜態(tài)屬性本身 - 不是其對象
Human.count = 0;

Jika anda masih memerlukan pembina, permulaan akan dilaksanakan sebelum ia berjalan.

medan kelas statik

Dalam contoh di atas, sifat statik ditambah kepada objek definisi kelas dengan cara yang tidak jelas selepas menentukan objek kelas. Anda tidak perlu menggunakan medan kelas:

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 0

let don = new Human('Don');

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 1

let kim = new Human('Kim');

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 2

ini bersamaan dengan:

class MyClass {

  a = 1;
  b = 2;
  c = 3;

}

medan kelas peribadi

ES6 adalah awam secara lalai dan boleh diperiksa atau diubahsuai di luar kelas . Dalam contoh haiwan di atas, tiada apa yang dapat menghalang menukar harta makanan tanpa memanggil setter makan:

class MyClass {

  constructor() {
    this.a = 1;
    this.b = 2;
    this.c = 3;
  }

}

class MyClass {

  x = 1;
  y = 2;
  static z = 3;

}

console.log( MyClass.z ); // 3

class MyClass {

  constructor() {
    this.x = 1;
    this.y = 2;
  }

}

MyClass.z = 3;

console.log( MyClass.z ); // 3

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  set eats(food) {
    this.food = food;
  }

  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';      // 標(biāo)準(zhǔn)setter
rex.food = 'tofu';          // 完全繞過eats setter
console.log( rex.dinner );  // Rex eats tofu for dinner.

class MyClass {

  a = 1;          // .a是公共的
  #b = 2;         // .#b是私有的
  static #c = 3;  // .#c是私有的和靜態(tài)的

  incB() {
    this.#b++;
  }

}

let m = new MyClass();

m.incB(); // 運(yùn)行正常
m.#b = 0; // 錯誤 - 私有屬性不能在類外部修改

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}