在JavaScript中实现私人变量-css教程-PHP中文网

首页

web前端

css教程

在JavaScript中实现私人变量

Joseph Gordon-Levitt

Apr 20, 2025 am 10:21 AM

Implementing Private Variables In JavaScript

JavaScript，这门赋能万维网的编程语言，自1995年5月由Brendan Eich创建以来，已成为一种广泛应用且用途广泛的技术。尽管它取得了成功，但它也受到了相当多的批评，尤其是一些特性。例如，对象在用作索引时被强制转换为字符串形式，1 == "1" 返回 true，或者臭名昭著的令人困惑的 this 关键字。然而，一个特别有趣的特性是存在各种实现变量私有性的技术。

目前，JavaScript 中并没有直接创建私有变量的方法。在其他语言中，您可以使用 private 关键字或双下划线，一切都能正常工作，但在 JavaScript 中，变量私有性具有使其更类似于语言的涌现特性而非预期功能的特性。让我们先介绍一下我们问题的背景。

`var` 关键字

在 2015 年之前，基本上只有一种创建变量的方法，那就是 var 关键字。var 是函数作用域的，这意味着用该关键字实例化的变量只能被函数内的代码访问。在函数外部或本质上是“全局”的情况下，该变量将可被定义变量后执行的任何内容访问。如果您尝试在同一作用域中访问变量在其定义之前，您将得到 undefined 而不是错误。这是由于 var 关键字的“提升”方式。

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

// 在函数作用域中定义 "b"
(function() {
  console.log(b); //=> 由于提升，返回 "undefined" 而不是错误。
  var b = 456;
})();

console.log(a); // => 123
console.log(b); // 抛出 "ReferenceError" 异常，因为 "b" 无法从函数作用域外部访问。

ES6 变量的诞生

2015 年，ES6/ES2015 正式发布，随之而来的是两个新的变量关键字：let 和 const。两者都是块作用域的，这意味着用这些关键字创建的变量可以被同一对括号内的任何内容访问。与 var 相同，但 let 和 const 变量无法在循环、函数、if 语句、括号等块作用域之外访问。

const a = 123;

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

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

console.log(a); // 123
console.log(b); // 抛出 "ReferenceError"，因为 "b" 无法从块作用域外部访问。
console.log(c); // 抛出 "ReferenceError"，因为 "b" 无法从块作用域外部访问。

由于作用域外部的代码无法访问变量，因此我们获得了私有性的涌现特性。我们将介绍一些以不同方式实现它的技术。

使用函数

由于 JavaScript 中的函数也是块，因此所有变量关键字都与它们一起工作。此外，我们可以实现一个非常有用的设计模式，称为“模块”。

模块设计模式

谷歌依靠牛津词典来定义“模块”：

程序可以从中构建或可以分析复杂活动的多个不同但相互关联的单元中的任何一个。

—“模块”定义 1.2

模块设计模式在 JavaScript 中非常有用，因为它结合了公共和私有组件，并且允许我们将程序分解成更小的组件，只通过称为“封装”的过程公开另一个程序部分应该能够访问的内容。通过这种方法，我们只公开需要使用的内容，并隐藏不需要看到的内容。我们可以利用函数作用域来实现这一点。

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

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

  const getMilesDriven = () => milesDriven;

  // 使用 "return" 关键字，您可以控制哪些内容被公开，哪些内容被隐藏。在本例中，我们只公开 accelerate() 和 getMilesDriven() 函数。
  return {
    accelerate,
    getMilesDriven
  }
};

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

这样，我们可以获得行驶里程数以及加速度，但是由于用户在这种情况下不需要访问速度，我们可以通过只公开 accelerate() 和 getMilesDriven() 方法来隐藏它。本质上，speed 是一个私有变量，因为它只能被同一块作用域内的代码访问。私有变量的好处在这种情况下开始变得清晰。当您删除访问变量、函数或任何其他内部组件的能力时，您会减少因其他人错误地使用本不应使用的内容而导致错误的表面积。

另一种方法

在这个第二个例子中，你会注意到增加了 this 关键字。ES6 箭头函数（=>）和传统函数(){}之间存在差异。使用 function 关键字，您可以使用 this，它将绑定到函数本身，而箭头函数不允许任何类型的 this 关键字的使用。两者都是创建模块的同样有效的方法。核心思想是公开应该访问的部分，并保留不应该交互的其他部分，因此既有公共数据也有私有数据。

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

  // 在这种情况下，我们改为使用 "this" 关键字，
  // 它指的是 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 中的另一个新增功能。类本质上是语法糖——换句话说，仍然是一个函数，但可能会将其“美化”成更容易表达的形式。对于类，变量私有性（截至目前）几乎是不可能的，除非对代码进行一些重大更改。

让我们来看一个类示例。

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() 函数内。请注意，您也可以在构造函数之外定义变量（如代码注释所示），但无论如何它们在功能上都是相同的。问题是这些变量将是公共的，并且可以被类外部的元素访问。

让我们看看解决这个问题的一些方法。

使用下划线

在私有性是为了防止协作者犯一些灾难性错误的情况下，用下划线（_）作为变量前缀，尽管仍然对外部“可见”，但足以向开发人员发出信号，“不要碰这个变量”。因此，例如，我们现在有以下内容：

// 这是类的新的构造函数。请注意，它也可以表示为构造函数()之外的以下内容。
/*
  _milesDriven = 0;
  _speed = 0;
*/
constructor() {
  this._milesDriven = 0;
  this._speed = 0;
}

虽然这对于它的特定用例有效，但仍然可以肯定地说，它在许多方面都不理想。您仍然可以访问变量，但您还必须修改变量名称。

将所有内容放在构造函数内

从技术上讲，确实有一种方法可以在类中使用私有变量，那就是将所有变量和方法放在 constructor() 函数内。让我们来看一下。

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 -- 我们现在有了真正的变量私有性。

这种方法实现了真正的变量私有性，因为无法直接访问未故意公开的任何变量。问题是我们现在有了，嗯，与我们之前相比，看起来不太好的代码，此外它还破坏了我们使用类时语法糖的好处。此时，我们不妨使用 function() 方法。

使用 WeakMap

还有一种更具创造性的方法来创建私有变量，那就是使用 WeakMap()。虽然它可能听起来类似于 Map，但两者非常不同。虽然映射可以将任何类型的值作为键，但 WeakMap 只接受对象并在垃圾收集对象键时删除 WeakMap 中的值。此外，WeakMap 无法迭代，这意味着您必须访问对对象键的引用才能访问值。这使得它对于创建私有变量非常有用，因为变量实际上是不可见的。

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

  accelerate(amount) {
    // 在这个版本中，我们改为创建一个 WeakMap 并
    // 使用 "this" 关键字作为键，这不太可能
    // 被意外地用作 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] } -- 此数据无法从外部轻松访问！

此解决方案擅长防止意外使用数据，但它并非真正私有，因为它仍然可以通过用 CarModule 替换 this 从外部访问。此外，它增加了相当多的复杂性，因此并不是最优雅的解决方案。

使用符号防止冲突

如果目的是防止名称冲突，则可以使用 Symbol 提供一个有用的解决方案。这些本质上是可以作为唯一值行为的实例，它们永远不会等于任何其他值，除了它自己的唯一实例。以下是它在实际应用中的示例：

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

  accelerate(amount) {
    // 此数据几乎不可能被意外访问。它决不是私有的，
    // 但它远离任何将要实现此模块的人。
    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 -- 我们需要访问内部键才能访问变量。

与下划线解决方案一样，此方法或多或少依赖于命名约定来防止混淆。

TC39 私有类字段提案

最近，提出了一项新的提案，该提案将向类引入私有变量。它很简单：在变量名称前加上 #，它就变成私有的。无需额外的结构更改。

class CarModule {
  #speed = 0
  #milesDriven = 0

  accelerate(amount) {
    // 此数据几乎不可能被意外访问。
    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 -- 我们需要访问内部键才能访问变量。

私有类特性已经成为现实，并且已经拥有相当好的浏览器支持。