快捷導(dǎo)航

JS中如何創(chuàng)建私有變量示例詳解

更新時(shí)間：2025年05月26日 09:48:54 作者：陳君何001

這篇文章主要介紹了JS中如何創(chuàng)建私有變量的相關(guān)資料,文中介紹了四種私有變量實(shí)現(xiàn)方式,每種方法都給出了詳細(xì)詳細(xì)的代碼示例,需要的朋友可以參考下

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

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

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 (無法直接訪問私有變量)

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

具體來說：

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

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

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

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

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

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

Symbol 是在 ES6引入的一種原始數(shù)據(jù)類型。它代表了一個(gè)獨(dú)一無二的、不可變的值。每個(gè)通過 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 (無法直接訪問私有變量)

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

具體而言：

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

3、使用 WeakMap 模擬私有變量

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

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

4、使用 ES2022 的 # 私有字段

在 ES2022 中，JavaScript 引入了類的私有字段（#）。使用 # 前綴定義的字段在類的外部無法直接訪問，這是一種新的原生私有變量實(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 是私有字段，外部無法訪問它，只有類的方法可以訪問。