JavaScript，這門賦能萬維網(wǎng)的編程語言，自1995年5月由Brendan Eich創(chuàng)建以來，已成為一種廣泛應(yīng)用且用途廣泛的技術(shù)。儘管它取得了成功，但它也受到了相當(dāng)多的批評，尤其是一些特性。例如，對像在用作索引時(shí)被強(qiáng)制轉(zhuǎn)換為字符串形式，1 == "1" 返回true，或者臭名昭著的令人困惑的this關(guān)鍵字。然而，一個特別有趣的特性是存在各種實(shí)現(xiàn)變量私有性的技術(shù)。

目前，JavaScript 中並沒有直接創(chuàng)建私有變量的方法。在其他語言中，您可以使用private關(guān)鍵字或雙下劃線，一切都能正常工作，但在JavaScript 中，變量私有性具有使其更類似於語言的湧現(xiàn)特性而非預(yù)期功能的特性。讓我們先介紹一下我們問題的背景。

var關(guān)鍵字

在2015 年之前，基本上只有一種創(chuàng)建變量的方法，那就是var關(guān)鍵字。 var是函數(shù)作用域的，這意味著用該關(guān)鍵字實(shí)例化的變量只能被函數(shù)內(nèi)的代碼訪問。在函數(shù)外部或本質(zhì)上是“全局”的情況下，該變量將可被定義變量後執(zhí)行的任何內(nèi)容訪問。如果您嘗試在同一作用域中訪問變量在其定義之前，您將得到undefined而不是錯誤。這是由於var關(guān)鍵字的“提升”方式。

 // 在全局作用域中定義"a"
var a = 123;

// 在函數(shù)作用域中定義"b"
(function() {
  console.log(b); //=> 由於提升，返回"undefined" 而不是錯誤。
  var b = 456;
})();

console.log(a); // => 123
console.log(b); // 拋出"ReferenceError" 異常，因?yàn)?quot;b" 無法從函數(shù)作用域外部訪問。

ES6 變量的誕生

2015 年，ES6/ES2015 正式發(fā)布，隨之而來的是兩個新的變量關(guān)鍵字： let和const 。兩者都是塊作用域的，這意味著用這些關(guān)鍵字創(chuàng)建的變量可以被同一對括號內(nèi)的任何內(nèi)容訪問。與var相同，但let和const變量無法在循環(huán)、函數(shù)、if 語句、括號等塊作用域之外訪問。

 const a = 123;

// 塊作用域示例#1
if (true) {
  const b = 345;
}

// 塊作用域示例#2
{
  const c = 678;
}

console.log(a); // 123
console.log(b); // 拋出"ReferenceError"，因?yàn)?quot;b" 無法從塊作用域外部訪問。
console.log(c); // 拋出"ReferenceError"，因?yàn)?quot;b" 無法從塊作用域外部訪問。

由於作用域外部的代碼無法訪問變量，因此我們獲得了私有性的湧現(xiàn)特性。我們將介紹一些以不同方式實(shí)現(xiàn)它的技術(shù)。

使用函數(shù)

由於JavaScript 中的函數(shù)也是塊，因此所有變量關(guān)鍵字都與它們一起工作。此外，我們可以實(shí)現(xiàn)一個非常有用的設(shè)計(jì)模式，稱為“模塊”。

模塊設(shè)計(jì)模式

谷歌依靠牛津詞典來定義“模塊”：

程序可以從中構(gòu)建或可以分析複雜活動的多個不同但相互關(guān)聯(lián)的單元中的任何一個。

—“模塊”定義1.2

模塊設(shè)計(jì)模式在JavaScript 中非常有用，因?yàn)樗Y(jié)合了公共和私有組件，並且允許我們將程序分解成更小的組件，只通過稱為“封裝”的過程公開另一個程序部分應(yīng)該能夠訪問的內(nèi)容。通過這種方法，我們隻公開需要使用的內(nèi)容，並隱藏不需要看到的內(nèi)容。我們可以利用函數(shù)作用域來實(shí)現(xiàn)這一點(diǎn)。

 const CarModule = () => {
  let milesDriven = 0;
  let speed = 0;

  const accelerate = (amount) => {
    speed = amount;
    milesDriven = speed;
  }

  const getMilesDriven = () => milesDriven;

  // 使用"return" 關(guān)鍵字，您可以控制哪些內(nèi)容被公開，哪些內(nèi)容被隱藏。在本例中，我們隻公開accelerate() 和getMilesDriven() 函數(shù)。
  return {
    accelerate,
    getMilesDriven
  }
};

const testCarModule = CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());

這樣，我們可以獲得行駛里程數(shù)以及加速度，但是由於用戶在這種情況下不需要訪問速度，我們可以通過隻公開accelerate()和getMilesDriven()方法來隱藏它。本質(zhì)上， speed是一個私有變量，因?yàn)樗荒鼙煌粔K作用域內(nèi)的代碼訪問。私有變量的好處在這種情況下開始變得清晰。當(dāng)您刪除訪問變量、函數(shù)或任何其他內(nèi)部組件的能力時(shí)，您會減少因其他人錯誤地使用本不應(yīng)使用的內(nèi)容而導(dǎo)致錯誤的表面積。

另一種方法

在這個第二個例子中，你會注意到增加了this關(guān)鍵字。 ES6 箭頭函數(shù)（=>）和傳統(tǒng)函數(shù)(){}之間存在差異。使用function關(guān)鍵字，您可以使用this ，它將綁定到函數(shù)本身，而箭頭函數(shù)不允許任何類型的this關(guān)鍵字的使用。兩者都是創(chuàng)建模塊的同樣有效的方法。核心思想是公開應(yīng)該訪問的部分，並保留不應(yīng)該交互的其他部分，因此既有公共數(shù)據(jù)也有私有數(shù)據(jù)。

 function CarModule() {
  let milesDriven = 0;
  let speed = 0;

  // 在這種情況下，我們改為使用"this" 關(guān)鍵字，
  // 它指的是CarModule
  this.accelerate = (amount) => {
    speed = amount;
    milesDriven = speed;
  }

  this.getMilesDriven = () => milesDriven;
}

const testCarModule = new CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());

ES6 類

類是ES6 中的另一個新增功能。類本質(zhì)上是語法糖——換句話說，仍然是一個函數(shù)，但可能會將其“美化”成更容易表達(dá)的形式。對於類，變量私有性（截至目前）幾乎是不可能的，除非對代碼進(jìn)行一些重大更改。

讓我們來看一個類示例。

 class CarModule {
  /*
    milesDriven = 0;
    speed = 0;
  */
  constructor() {
    this.milesDriven = 0;
    this.speed = 0;
  }
  accelerate(amount) {
    this.speed = amount;
    this.milesDriven = this.speed;
  }
  getMilesDriven() {
    return this.milesDriven;
  }
}

const testCarModule = new CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());

首先要注意的是， milesDriven和speed變量位於constructor()函數(shù)內(nèi)。請注意，您也可以在構(gòu)造函數(shù)之外定義變量（如代碼註釋所示），但無論如何它們在功能上都是相同的。問題是這些變量將是公共的，並且可以被類外部的元素訪問。

讓我們看看解決這個問題的一些方法。

使用下劃線

在私有性是為了防止協(xié)作者犯一些災(zāi)難性錯誤的情況下，用下劃線（_）作為變量前綴，儘管仍然對外部“可見”，但足以向開發(fā)人員發(fā)出信號，“不要碰這個變量”。因此，例如，我們現(xiàn)在有以下內(nèi)容：

 // 這是類的新的構(gòu)造函數(shù)。請注意，它也可以表示為構(gòu)造函數(shù)()之外的以下內(nèi)容。
/*
  _milesDriven = 0;
  _speed = 0;
*/
constructor() {
  this._milesDriven = 0;
  this._speed = 0;
}

雖然這對於它的特定用例有效，但仍然可以肯定地說，它在許多方面都不理想。您仍然可以訪問變量，但您還必須修改變量名稱。

將所有內(nèi)容放在構(gòu)造函數(shù)內(nèi)

從技術(shù)上講，確實(shí)有一種方法可以在類中使用私有變量，那就是將所有變量和方法放在constructor()函數(shù)內(nèi)。讓我們來看一下。

 class CarModule {
  constructor() {
    let milesDriven = 0;
    let speed = 0;

    this.accelerate = (amount) => {
      speed = amount;
      milesDriven = speed;
    }

    this.getMilesDriven = () => milesDriven;
  }
}

const testCarModule = new CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());
console.log(testCarModule.speed); // undefined -- 我們現(xiàn)在有了真正的變量私有性。

這種方法實(shí)現(xiàn)了真正的變量私有性，因?yàn)闊o法直接訪問未故意公開的任何變量。問題是我們現(xiàn)在有了，嗯，與我們之前相比，看起來不太好的代碼，此外它還破壞了我們使用類時(shí)語法糖的好處。此時(shí)，我們不妨使用function()方法。

使用WeakMap

還有一種更具創(chuàng)造性的方法來創(chuàng)建私有變量，那就是使用WeakMap() 。雖然它可能聽起來類似於Map ，但兩者非常不同。雖然映射可以將任何類型的值作為鍵，但WeakMap只接受對象並在垃圾收集對象鍵時(shí)刪除WeakMap中的值。此外， WeakMap無法迭代，這意味著您必須訪問對對象鍵的引用才能訪問值。這使得它對於創(chuàng)建私有變量非常有用，因?yàn)樽兞繉?shí)際上是不可見的。

 class CarModule {
  constructor() {
    this.data = new WeakMap();
    this.data.set(this, {
      milesDriven: 0,
      speed: 0
    });
    this.getMilesDriven = () => this.data.get(this).milesDriven;
  }

  accelerate(amount) {
    // 在這個版本中，我們改為創(chuàng)建一個WeakMap 並// 使用"this" 關(guān)鍵字作為鍵，這不太可能// 被意外地用作WeakMap 的鍵。
    const data = this.data.get(this);
    const speed = data.speed amount;
    const milesDriven = data.milesDriven data.speed;
    this.data.set({ speed, milesDriven });
  }

}

const testCarModule = new CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());
console.log(testCarModule.data); //=> WeakMap { [items unknown] } -- 此數(shù)據(jù)無法從外部輕鬆訪問！

此解決方案擅長防止意外使用數(shù)據(jù)，但它並非真正私有，因?yàn)樗匀豢梢酝ㄟ^用CarModule替換this從外部訪問。此外，它增加了相當(dāng)多的複雜性，因此並不是最優(yōu)雅的解決方案。

使用符號防止衝突

如果目的是防止名稱衝突，則可以使用Symbol提供一個有用的解決方案。這些本質(zhì)上是可以作為唯一值行為的實(shí)例，它們永遠(yuǎn)不會等於任何其他值，除了它自己的唯一實(shí)例。以下是它在實(shí)際應(yīng)用中的示例：

 class CarModule {
  constructor() {
    this.speedKey = Symbol("speedKey");
    this.milesDrivenKey = Symbol("milesDrivenKey");
    this[this.speedKey] = 0;
    this[this.milesDrivenKey] = 0;
  }

  accelerate(amount) {
    // 此數(shù)據(jù)幾乎不可能被意外訪問。它決不是私有的，
    // 但它遠(yuǎn)離任何將要實(shí)現(xiàn)此模塊的人。
    this[this.speedKey] = amount;
    this[this.milesDrivenKey] = this[this.speedKey];
  }

  getMilesDriven() {
    return this[this.milesDrivenKey];
  }
}

const testCarModule = new CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());
console.log(testCarModule.speed); // => undefined -- 我們需要訪問內(nèi)部鍵才能訪問變量。

與下劃線解決方案一樣，此方法或多或少依賴於命名約定來防止混淆。

TC39 私有類字段提案

最近，提出了一項(xiàng)新的提案，該提案將向類引入私有變量。它很簡單：在變量名稱前加上#，它就變成私有的。無需額外的結(jié)構(gòu)更改。

 class CarModule {
  #speed = 0
  #milesDriven = 0

  accelerate(amount) {
    // 此數(shù)據(jù)幾乎不可能被意外訪問。
    this.#speed = amount;
    this.#milesDriven = speed;
  }

  getMilesDriven() {
    return this.#milesDriven;
  }
}

const testCarModule = new CarModule();
testCarModule.accelerate(5);
testCarModule.accelerate(4);
console.log(testCarModule.getMilesDriven());
console.log(testCarModule.speed); //=> undefined -- 我們需要訪問內(nèi)部鍵才能訪問變量。

私有類特性已經(jīng)成為現(xiàn)實(shí)，並且已經(jīng)擁有相當(dāng)好的瀏覽器支持。

結(jié)論

這就是在JavaScript 中實(shí)現(xiàn)私有變量的各種方法的總結(jié)。沒有一種“正確”的方法。這些方法適用於不同的需求、現(xiàn)有代碼庫和其他約束。雖然每種方法都有其優(yōu)點(diǎn)和缺點(diǎn)，但最終，只要它們有效地解決了您的問題，所有方法都是同樣有效的。

感謝您的閱讀！我希望這能為您提供一些關(guān)於如何應(yīng)用作用域和變量私有性來改進(jìn)您的JavaScript 代碼的見解。這是一種強(qiáng)大的技術(shù)，可以支持許多不同的方法，並使您的代碼更易於使用且無錯誤。自己嘗試一些新示例，獲得更好的感覺。

以上是在JavaScript中實(shí)現(xiàn)私人變量的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！