ES6為JavaScript引入了類，但對(duì)于復(fù)雜的應(yīng)用程序來(lái)說(shuō)，它們可能過(guò)于簡(jiǎn)單。類字段（也稱為類屬性）旨在通過(guò)私有和靜態(tài)成員來(lái)簡(jiǎn)化構(gòu)造函數(shù)。該提案目前處于TC39第3階段：候選階段，很可能會(huì)添加到ES2019（ES10）。Node.js 12、Chrome 74和Babel目前支持私有字段。在我們了解類字段的實(shí)現(xiàn)方式之前，回顧一下ES6類很有用。本文于2020年更新。有關(guān)更深入的JavaScript知識(shí)，請(qǐng)閱讀我們的書(shū)籍《JavaScript：從新手到忍者，第二版》。

關(guān)鍵要點(diǎn)

• ES6為JavaScript引入了類，但對(duì)于復(fù)雜的應(yīng)用程序來(lái)說(shuō)，它們可能過(guò)于簡(jiǎn)單。ES2019的類字段旨在通過(guò)私有和靜態(tài)成員來(lái)簡(jiǎn)化構(gòu)造函數(shù)，這些成員可能會(huì)添加到ES2019（ES10）。
• 新的類字段實(shí)現(xiàn)允許在類的頂部、任何構(gòu)造函數(shù)之外初始化公共屬性。如果仍然需要構(gòu)造函數(shù)，則會(huì)在其運(yùn)行之前執(zhí)行初始化程序。
• ES2019中的類字段允許使用哈希#前綴聲明私有類字段。這使得該字段只能在類的內(nèi)部方法中訪問(wèn)，而不能從類外部訪問(wèn)。
• 使用#表示類字段中的私有性受到了批評(píng)，主要是因?yàn)樗蝗缢接嘘P(guān)鍵字直觀。但是，#符號(hào)在類定義之外是無(wú)效的，確保私有字段保持私有。
• ES2019類字段立即帶來(lái)的好處是更簡(jiǎn)潔的React代碼。它們可以使用ES6 =>胖箭頭賦值為函數(shù)，該函數(shù)自動(dòng)綁定到定義對(duì)象，無(wú)需綁定聲明。

ES6類基礎(chǔ)

來(lái)自C 、C#、Java和PHP等語(yǔ)言的開(kāi)發(fā)人員可能會(huì)對(duì)JavaScript的面向?qū)ο罄^承模型感到困惑。因此，ES6引入了類。它們主要是語(yǔ)法糖，但提供了更熟悉的面向?qū)ο缶幊谈拍?。類是一個(gè)對(duì)象模板，它定義了該類型的對(duì)象的行為方式。以下Animal類定義了通用動(dòng)物（類通常用初始大寫(xiě)字母表示，以區(qū)別于對(duì)象和其他類型）：

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`);
  }

}

類聲明始終在嚴(yán)格模式下執(zhí)行。無(wú)需添加'use strict'。構(gòu)造函數(shù)方法在創(chuàng)建Animal類型的對(duì)象時(shí)運(yùn)行。它通常設(shè)置初始屬性并處理其他初始化。speak()和walk()是實(shí)例方法，它們添加了更多功能?，F(xiàn)在可以使用new關(guān)鍵字從此類創(chuàng)建對(duì)象：

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

Getter和Setter

Setter是僅用于定義值的特殊方法。類似地，Getter是僅用于返回值的特殊方法。例如：

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.

子類或子類

將一個(gè)類用作另一個(gè)類的基類通常是可行的。Human類可以使用extends關(guān)鍵字繼承Animal類中的所有屬性和方法?？梢愿鶕?jù)需要添加、刪除或更改屬性和方法，以便更容易和更清晰地創(chuàng)建人類對(duì)象：

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指的是父類，因此它通常是在構(gòu)造函數(shù)中調(diào)用的第一個(gè)調(diào)用。在此示例中，Human speak()方法重寫(xiě)了在Animal中定義的方法?，F(xiàn)在可以創(chuàng)建Human的對(duì)象實(shí)例：

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

靜態(tài)方法和屬性

使用static關(guān)鍵字定義方法允許在不創(chuàng)建對(duì)象實(shí)例的情況下在類上調(diào)用它?？紤]Math.PI常量：在訪問(wèn)PI屬性之前，無(wú)需創(chuàng)建Math對(duì)象。ES6不支持與其他語(yǔ)言相同的靜態(tài)屬性，但可以將屬性添加到類定義本身。例如，Human類可以適應(yīng)保留已創(chuàng)建多少個(gè)human對(duì)象的計(jì)數(shù)：

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.

類的靜態(tài)COUNT getter會(huì)相應(yīng)地返回人類的數(shù)量：

class Human extends Animal {

  constructor(name) {

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

  }

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

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

  }

}

ES2019類字段（新）

新的類字段實(shí)現(xiàn)允許在類的頂部、任何構(gòu)造函數(shù)之外初始化公共屬性：

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.

這等效于：

class Human extends Animal {

  constructor(name) {

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

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

  }

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

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

  }

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

}

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

如果您仍然需要構(gòu)造函數(shù)，則會(huì)在其運(yùn)行之前執(zhí)行初始化程序。

靜態(tài)類字段

在上面的示例中，靜態(tài)屬性在定義類對(duì)象后以不優(yōu)雅的方式添加到類定義對(duì)象中。使用類字段則無(wú)需這樣做：

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

這等效于：

class MyClass {

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

}

私有類字段

ES6類中的所有屬性默認(rèn)都是公共的，可以在類外部檢查或修改。在上面的Animal示例中，沒(méi)有任何東西可以阻止在不調(diào)用eats setter的情況下更改food屬性：

class MyClass {

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

}

其他語(yǔ)言通常允許聲明私有屬性。這在ES6中是不可能的，因此開(kāi)發(fā)人員經(jīng)常使用下劃線約定（_propertyName）、閉包、符號(hào)或WeakMap來(lái)解決這個(gè)問(wèn)題。下劃線為開(kāi)發(fā)人員提供了一個(gè)提示，但沒(méi)有任何東西可以阻止他們?cè)L問(wèn)該屬性。在ES2019中，私有類字段使用哈希#前綴定義：

class MyClass {

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

}

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

請(qǐng)注意，無(wú)法定義私有方法、getter或setter。TC39第3階段：草案提案建議對(duì)名稱使用哈希#前綴，它已在Babel中實(shí)現(xiàn)。例如：

class MyClass {

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

}

MyClass.z = 3;

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

立即受益：更簡(jiǎn)潔的React代碼！

React組件通常具有與DOM事件綁定的方法。為了確保這解析為組件，有必要相應(yīng)地綁定每個(gè)方法。例如：

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';          // 完全繞過(guò)eats setter
console.log( rex.dinner );  // Rex eats tofu for dinner.

當(dāng)incCount定義為ES2019類字段時(shí)，可以使用ES6 =>胖箭頭將其賦值為函數(shù)，該函數(shù)自動(dòng)綁定到定義對(duì)象。無(wú)需再添加綁定聲明：

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; // 錯(cuò)誤 - 私有屬性不能在類外部修改

類字段：改進(jìn)？

ES6類定義過(guò)于簡(jiǎn)單。ES2019類字段需要更少的代碼，提高了可讀性，并實(shí)現(xiàn)了一些有趣的面向?qū)ο缶幊痰目赡苄浴Ｊ褂?表示私有性受到了一些批評(píng)，主要是因?yàn)樗艹舐?，感覺(jué)像是一種技巧。大多數(shù)語(yǔ)言都實(shí)現(xiàn)了private關(guān)鍵字，因此嘗試在類外部使用該成員將被編譯器拒絕。JavaScript是解釋型的?？紤]以下代碼：

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`);
  }

}

這將在最后一行拋出運(yùn)行時(shí)錯(cuò)誤，但這僅僅是嘗試設(shè)置屬性的嚴(yán)重后果。JavaScript故意寬容，ES5允許修改任何對(duì)象上的屬性。雖然笨拙，但#符號(hào)在類定義之外是無(wú)效的。嘗試訪問(wèn)myObject.#secret可能會(huì)拋出語(yǔ)法錯(cuò)誤。這場(chǎng)辯論將繼續(xù)下去，但無(wú)論喜歡與否，類字段都已在多個(gè)JavaScript引擎中采用。它們將繼續(xù)存在。

關(guān)于JavaScript私有類字段的常見(jiàn)問(wèn)題解答（FAQ）

使用JavaScript私有類字段的好處是什么？

JavaScript中的私有類字段提供了一種封裝或隱藏類中數(shù)據(jù)的方法，這是面向?qū)ο缶幊痰幕驹瓌t。這種封裝確保對(duì)象的內(nèi)部狀態(tài)只能通過(guò)類明確定義的方式更改。這導(dǎo)致代碼更健壯、更可預(yù)測(cè)，因?yàn)樗梢苑乐雇獠看a意外地以意外的方式更改對(duì)象的狀態(tài)。此外，私有字段可以幫助簡(jiǎn)化類的接口，因?yàn)樗鼈儨p少了公開(kāi)給外部世界屬性和方法的數(shù)量。

如何在JavaScript中聲明私有類字段？

在JavaScript中，私有類字段通過(guò)在字段名前添加哈希（#）符號(hào)來(lái)聲明。例如，要在類中聲明名為“value”的私有字段，可以編寫(xiě)#value。然后，此字段只能在類的內(nèi)部方法中訪問(wèn)，而不能從類外部訪問(wèn)。

我可以從類外部訪問(wèn)私有類字段嗎？

不可以，JavaScript中的私有類字段無(wú)法從類外部訪問(wèn)。這是設(shè)計(jì)使然，因?yàn)樗接凶侄蔚闹饕猛局皇菑耐獠渴澜珉[藏內(nèi)部數(shù)據(jù)。如果嘗試從類外部訪問(wèn)私有字段，JavaScript將拋出語(yǔ)法錯(cuò)誤。

我可以將私有類字段與公共字段一起使用嗎？

可以，JavaScript類可以同時(shí)具有私有字段和公共字段。公共字段的聲明方式與私有字段相同，但沒(méi)有哈希（#）前綴。與只能從類內(nèi)部訪問(wèn)的私有字段不同，公共字段可以從類內(nèi)部和外部訪問(wèn)和修改。

JavaScript中的私有類字段與私有方法有何不同？

JavaScript中的私有類字段和私有方法具有相似的用途，它們都提供了一種從外部世界隱藏類內(nèi)部細(xì)節(jié)的方法。但是，它們的使用方式不同。私有字段用于存儲(chǔ)只能在類內(nèi)部訪問(wèn)的數(shù)據(jù)，而私有方法是只能在類內(nèi)部調(diào)用的函數(shù)。

我可以在所有JavaScript環(huán)境中使用私有類字段嗎？

私有類字段是JavaScript中相對(duì)較新的特性，因此并非所有環(huán)境都支持它。在撰寫(xiě)本文時(shí)，大多數(shù)主要瀏覽器（包括Chrome、Firefox和Safari）的最新版本都支持私有字段。但是，Internet Explorer不支持它們。如果您需要編寫(xiě)可在所有瀏覽器中運(yùn)行的代碼，則可能需要使用Babel之類的轉(zhuǎn)換器將代碼轉(zhuǎn)換為舊版瀏覽器可以理解的形式。

如何在類的內(nèi)部方法中使用私有類字段？

要在類的內(nèi)部方法中使用私有類字段，只需使用其名稱（前面帶有哈希（#）符號(hào)）引用該字段即可。例如，如果您有一個(gè)名為“value”的私有字段，則可以在方法中像這樣訪問(wèn)它：this.#value。

我可以在子類中使用私有類字段嗎？

可以，可以在JavaScript的子類中使用私有類字段。但是，每個(gè)子類都有自己獨(dú)立的一組私有字段，這些字段不與超類或其他子類共享。這意味著如果子類聲明的私有字段與超類中的私有字段同名，則這兩個(gè)字段完全獨(dú)立，不會(huì)相互干擾。

我可以在靜態(tài)方法中使用私有類字段嗎？

不可以，JavaScript中的私有類字段不能在靜態(tài)方法中使用。這是因?yàn)殪o態(tài)方法與類本身相關(guān)聯(lián)，而不是與類的實(shí)例相關(guān)聯(lián)，而私有字段只能在類的實(shí)例中訪問(wèn)。

我可以在JavaScript中迭代私有類字段嗎？

不可以，JavaScript中的私有類字段不包含在對(duì)象的屬性迭代中。這是設(shè)計(jì)使然，因?yàn)樗接凶侄蔚闹饕猛局皇菑耐獠渴澜珉[藏內(nèi)部數(shù)據(jù)。如果您需要迭代對(duì)象的屬性，則應(yīng)改為使用公共字段或方法。

This response maintains the original image format and placement, and paraphrases the text while preserving the original meaning. The code examples remain largely unchanged as significant alteration would change the meaning.

以上是JavaScript的新私人班級(jí)字段以及如何使用它們的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！