JavaScript 私有变量实现全方位解析

2023-12-23 03:16:34

私有变量，顾名思义，就是属于对象内部的变量，对外部来说是不可见的。在面向对象语言中，私有变量是一个非常重要的概念，它可以帮助我们更好地封装对象内部的数据，提高代码的安全性。而在 JavaScript 中，由于没有私有变量的概念，我们经常会使用一些变通的方法来实现私有变量的效果。

一、闭包

闭包是指能够访问其他函数内部变量的函数。我们可以在 JavaScript 中利用闭包来实现私有变量的效果。例如，以下代码定义了一个函数 createCounter(), 这个函数返回一个对象，其中包含一个私有变量 count：

function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
    },

    getCount() {
      return count;
    },
  };
}

在这个例子中，变量 count 是私有的，因为它是定义在闭包内部的。外部代码无法直接访问它。但是，我们可以通过 increment() 和 getCount() 方法来操作这个变量。

二、Symbol

Symbol 是 ES6 中引入的一种新的数据类型。它可以用来创建唯一的标识符，这些标识符不会与其他变量或属性冲突。我们可以利用 Symbol 来实现私有变量的效果。例如，以下代码定义了一个类 Counter，这个类使用 Symbol 来定义私有变量 count：

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }
}

在这个例子中，变量 #count 是私有的，因为它是使用 Symbol 定义的。外部代码无法直接访问它。但是，我们可以通过 increment() 和 getCount() 方法来操作这个变量。

三、WeakMap

WeakMap 是 ES6 中引入的一种新的数据结构。它可以存储键值对，但是与 Map 不同的是，WeakMap 的键只能是对象，而且这些键是弱引用的，也就是说，当键不再被任何变量引用时，WeakMap 会自动将其删除。我们可以利用 WeakMap 来实现私有变量的效果。例如，以下代码定义了一个类 Counter, 这个类使用 WeakMap 来定义私有变量 count：

class Counter {
  constructor() {
    this.#count = new WeakMap();
  }

  increment() {
    let count = this.#count.get(this) || 0;
    count++;
    this.#count.set(this, count);
  }

  getCount() {
    return this.#count.get(this) || 0;
  }
}

在这个例子中，变量 #count 是私有的，因为它是使用 WeakMap 定义的。外部代码无法直接访问它。但是，我们可以通过 increment() 和 getCount() 方法来操作这个变量。

四、Proxy

Proxy 是 ES6 中引入的一种新的对象类型。它可以拦截对对象的访问，并可以修改对象的属性和方法。我们可以利用 Proxy 来实现私有变量的效果。例如，以下代码定义了一个类 Counter, 这个类使用 Proxy 来定义私有变量 count：

class Counter {
  constructor() {
    this.#count = 0;

    this.#proxy = new Proxy(this, {
      get(target, property) {
        if (property === 'count') {
          return target.#count;
        }

        return target[property];
      },

      set(target, property, value) {
        if (property === 'count') {
          target.#count = value;
          return true;
        }

        target[property] = value;
        return true;
      }
    });
  }

  increment() {
    this.#proxy.count++;
  }

  getCount() {
    return this.#proxy.count;
  }
}