1、使用閉包（Closure） 模擬私有變量

通過(guò)使用閉包，可以將私有變量封裝在一個(gè)函數(shù)的作用域內(nèi)，外部無(wú)法直接訪問(wèn)這些私有變量。閉包可以保證私有變量的封裝性和安全性。

function MyClass() {
  // 私有變量
  let privateVar = 'I am private';

  // 公共方法
  this.getPrivateVar = function() {
    return privateVar;
  }

  this.setPrivateVar = function(value) {
    privateVar = value;
  }
}

const myInstance = new MyClass();
console.log(myInstance.getPrivateVar());  // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar());  // "New Value"
console.log(myInstance.privateVar);  // undefined (無(wú)法直接訪問(wèn)私有變量)

privateVar 是通過(guò)閉包實(shí)現(xiàn)的私有變量，外部代碼無(wú)法直接訪問(wèn)它。
通過(guò) getPrivateVar 和 setPrivateVar 方法可以間接訪問(wèn)和修改私有變量。

具體來(lái)說(shuō)：

• privateVar 是一個(gè) 局部變量，它被封閉在 MyClass 構(gòu)造函數(shù)內(nèi)部。
• getPrivateVar 和 setPrivateVar 函數(shù)能夠訪問(wèn)并操作這個(gè)局部變量，即使它們被返回并在 MyClass 構(gòu)造函數(shù)外部執(zhí)行。這樣，privateVar 就保持了私有性，不會(huì)被外部直接訪問(wèn)。

閉包的特性在此體現(xiàn)：

• 詞法作用域：函數(shù)在定義時(shí)就會(huì)記錄它所能訪問(wèn)的變量范圍，而不僅僅是在執(zhí)行時(shí)。
• 訪問(wèn)私有數(shù)據(jù)：通過(guò)閉包，外部代碼不能直接訪問(wèn) privateVar，但可以通過(guò)公共方法（如 getPrivateVar 和 setPrivateVar）間接訪問(wèn)或修改它。

其中詞法作用域，又叫靜態(tài)作用域，變量被創(chuàng)建時(shí)就確定好了，而非執(zhí)行階段確定的。也就是說(shuō)我們寫好代碼時(shí)它的作用域就確定了，JavaScript 遵循的就是詞法作用域。

2、使用 ES6 Symbol（符號(hào)） 模擬私有變量

Symbol 是 ES6 引入的一個(gè)新的基本數(shù)據(jù)類型，它可以用作對(duì)象的唯一屬性鍵，避免外部直接訪問(wèn)。你可以用 Symbol 來(lái)創(chuàng)建私有變量。

Symbol 是 在 ES6引入的一種原始數(shù)據(jù)類型。它代表了一個(gè)獨(dú)一無(wú)二的、不可變的值。每個(gè)通過(guò) Symbol() 創(chuàng)建的 Symbol 值都是唯一的，即使它們有相同的描述，也會(huì)被視為不同的值。

const privateVar = Symbol('privateVar');

class MyClass {
  constructor() {
    this[privateVar] = 'I am private';
  }

  getPrivateVar() {
    return this[privateVar];
  }

  setPrivateVar(value) {
    this[privateVar] = value;
  }
}

const myInstance = new MyClass();
console.log(myInstance.getPrivateVar());  // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar());  // "New Value"
console.log(myInstance[privateVar]);  // undefined (無(wú)法直接訪問(wèn)私有變量)

使用 Symbol 可以避免變量名沖突，且 privateVar 作為一個(gè) Symbol 類型，外部無(wú)法直接訪問(wèn)它。

具體而言：

• privateVar 是一個(gè) Symbol，它作為對(duì)象 MyClass 的私有屬性鍵。
• this[privateVar] 存儲(chǔ)了私有變量的值，并且外部無(wú)法直接通過(guò) myInstance.privateVar 或 myInstance[‘privateVar’] 訪問(wèn)它，因?yàn)樗怯蒘ymbol 創(chuàng)建的，外部不知道該 Symbol 的值。
• 通過(guò) getPrivateVar 和 setPrivateVar 方法，外部可以間接訪問(wèn)或修改這個(gè)私有變量的值。

3、使用 WeakMap 模擬私有變量

WeakMap 是一個(gè)鍵值對(duì)集合，鍵是對(duì)象，值可以是任意類型。利用 WeakMap，可以將私有數(shù)據(jù)存儲(chǔ)在一個(gè)外部的 WeakMap 中，確保數(shù)據(jù)與對(duì)象的生命周期關(guān)聯(lián)，同時(shí)避免外部直接訪問(wèn)私有數(shù)據(jù)。

const privateVars = new WeakMap();

class MyClass {
  constructor() {
    privateVars.set(this, { privateVar: 'I am private' });
  }

  getPrivateVar() {
    return privateVars.get(this).privateVar;
  }

  setPrivateVar(value) {
    privateVars.get(this).privateVar = value;
  }
}

const myInstance = new MyClass();
console.log(myInstance.getPrivateVar());  // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar());  // "New Value"
console.log(privateVars.get(myInstance));  // { privateVar: 'New Value' } (直接訪問(wèn) WeakMap)

privateVars 存儲(chǔ)了對(duì)象實(shí)例的私有數(shù)據(jù)，WeakMap 會(huì)將數(shù)據(jù)與對(duì)象的生命周期關(guān)聯(lián)，不會(huì)阻止垃圾回收。

4、使用 ES2022 的 # 私有字段

在 ES2022 中，JavaScript 引入了類的私有字段（#）。使用 # 前綴定義的字段在類的外部無(wú)法直接訪問(wèn)，這是一種新的原生私有變量實(shí)現(xiàn)方式。

class MyClass {
  #privateVar;  // 私有字段

  constructor() {
    this.#privateVar = 'I am private';
  }

  getPrivateVar() {
    return this.#privateVar;
  }

  setPrivateVar(value) {
    this.#privateVar = value;
  }
}

const myInstance = new MyClass();
console.log(myInstance.getPrivateVar());  // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar());  // "New Value"
console.log(myInstance.#privateVar);  // SyntaxError: Private field '#privateVar' must be declared in an enclosing class

#privateVar 是私有字段，外部無(wú)法訪問(wèn)它，只有類的方法可以訪問(wèn)。

總結(jié)

到此這篇關(guān)于JS中如何創(chuàng)建私有變量的文章就介紹到這了,更多相關(guān)JS創(chuàng)建私有變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論