JavaScript最近有很多改进，新的语法和特性一直在添加。但有些事情不会改变，所有的东西仍然是一个对象，几乎所有的东西都可以在运行时改变，也没有公有/私有属性的概念。但是我们可以用一些技巧来改变这些，在这篇文章中，我将研究实现私有属性的各种方法

JavaScriopt 在 2015 年引入了“”这种大家都熟悉的面向对象方法，基于 C 语言的经典语言 Java 和 C# 就提供这种方法。不过很快大家就发现这些类并不是习惯的那样 —— 他们没有控制访问的属性修饰符，而且所有属性都必须定义在函数中。

那么，我们该如何保护那些不应该在运行期间被修改的数据呢？先来看一些办法。

这篇文章中我会使用一个创建图形的类作为示例。它的宽度和高度只能高度只能在初始化时设置，同时提供一个用于获取面积的属性。这些示例中用到了 get 关键字，你可以在我的文章  中了解到这一知识点

第一个方法是使用特定的命名来表示属性应该被视为私有，这是最成熟的方法。其常见作法是给属性名前缀一个下划线（比如 _count）。但这种方法不能阻止值被访问或被修改，它依赖于不同开发者之间的共识，公认这个值应该被禁止访问。

class Shape {  constructor(width, height) {    this._width = width;    this._height = height;  }  get area() {    return this._width * this._height;  }}const square = new Shape(10, 10);console.log(square.area);    // 100console.log(square._width);  // 10

WeakMap

使用 WeakMap 保存私有值的方法限制性会稍微强一些。虽然这个方法仍然不能阻止访问数据，但它把私有值与用户交互对象隔离开了。在这种技巧中，我们把拥有私有属性的对象实例作为 WeakMap 的键，并使用一个函数（我们称为 internal）来创建或返回一个存储所有私有属性值的对象。这种技术的优点是在枚举对象属性或者使用 JSON.stringify 时不会把私有属性显示出来，但它依赖 WeakMap，而 WeakMap 对象类的作用域外仍然可以被访问到，也可以进行操作。

const map = new WeakMap();// Create an object to store private values in per instanceconst internal = obj => {  if (!map.has(obj)) {    map.set(obj, {});  }  return map.get(obj);}class Shape {  constructor(width, height) {    internal(this).width = width;    internal(this).height = height;  }  get area() {    return internal(this).width * internal(this).height;  }}const square = new Shape(10, 10);console.log(square.area);      // 100console.log(map.get(square));  // { height: 100, width: 100 }

Symbols

Symbol 的用法跟 WeakMap 类似。我们把  当作实例属性的键来使用。这种方式也不会在枚举属性和 JSON.stringify 时呈现出来。这个技巧需要为每个私有属性创建 Symbol。不过，只要能访问到这些 Symbol 值，那么在类之外同样也能访问以它们为键的属性。

const widthSymbol = Symbol('width');const heightSymbol = Symbol('height');class Shape {  constructor(width, height) {    this[widthSymbol] = width;    this[heightSymbol] = height;  }  get area() {    return this[widthSymbol] * this[heightSymbol];  }}const square = new Shape(10, 10);console.log(square.area);         // 100console.log(square.widthSymbol);  // undefinedconsole.log(square[widthSymbol]); // 10

闭包

前面提到的种种技巧都不能避免从类外部访问私有属性，这一问题可以使用闭包来解决。可以把闭包和 WeakMap 或者 Symbol 一起使用，当然也可以把闭包用于标准的 JavaScript 对象。闭包的原理是将数据封装在函数作用域内，这个作用域在函数调用时创建，从内部返回函数的结果，在外部访问不到。

function Shape() {  // private vars  const this$ = {};  class Shape {    constructor(width, height) {      this$.width = width;      this$.height = height;    }    get area() {      return this$.width * this$.height;    }  }  return new Shape(...arguments);}const square = new Shape(10, 10);console.log(square.area);  // 100console.log(square.width); // undefined

不过这个技巧有一点小问题。假设我们有两个不同的 Shape 对象，代码调了外面那层 Shape（函数），但返回的实例却是内部 Shape（类）的实例。多数情况下可能没什么问题，但是它会导致 square instanceof Shape 返回 false，这就是代码中潜藏的问题。

为了解决这个问题，有一种办法是将外部的 Shape 设置为其返回实例的原型：

return Object.setPrototypeOf(new Shape(...arguments), this);

然而仅更改这一句话还不行，square.area 会变成未定义。get 关键字背后的工作原理是这一问题的根源。我们可以在构造器中手工指定 getter 来解决这个问题。

function Shape() {  // private vars  const this$ = {};  class Shape {    constructor(width, height) {      this$.width = width;      this$.height = height;      Object.defineProperty(this, 'area', {        get: function() {          return this$.width * this$.height;        }      });    }  }  return Object.setPrototypeOf(new Shape(...arguments), this);}const square = new Shape(10, 10);console.log(square.area);             // 100console.log(square.width);            // undefinedconsole.log(square instanceof Shape); // true

另外，我们也可以把 this 设置为实例原型的原型，这样一来，instanceof 和 get 就都没问题了。下面的示例中，我们生成了这样的原型链：Object -> Outer Shape -> Inner Shape Prototype -> Inner Shape。

function Shape() {  // private vars  const this$ = {};  class Shape {    constructor(width, height) {      this$.width = width;      this$.height = height;    }    get area() {      return this$.width * this$.height;    }  }  const instance = new Shape(...arguments);  Object.setPrototypeOf(Object.getPrototypeOf(instance), this);  return instance;}const square = new Shape(10, 10);console.log(square.area);             // 100console.log(square.width);            // undefinedconsole.log(square instanceof Shape); // true

代理

是 JavaScript 中非常迷人的新特性，它能有效地把对象封装在称为代理的对象中，由代理拦截所有与该对象的交互。上面我们提到了使用“命名规范”的方法来创建私有属性，现在可以用代理来限制从类外部对私有属性的访问。

代理可以拦截很多不同类型的交互操作，但我们这里重点关注  和 ，因为它可以拦截读取或写入属性的动作。创建代理时需要提供两个参数，第一个是要封装的实例，第二个是“处理器”对象，这个对象中定义了你想拦截的各种方法。

我们的处理器对象有点儿像这样：

const handler = {  get: function(target, key) {    if (key[0] === '_') {      throw new Error('Attempt to access private property');    }    return target[key];  },  set: function(target, key, value) {    if (key[0] === '_') {      throw new Error('Attempt to access private property');    }    target[key] = value;  }};

这里我们检查每个属性是否以下划线开始，如果是就抛出一个错误来阻止对它的访问。

class Shape {  constructor(width, height) {    this._width = width;    this._height = height;  }  get area() {    return this._width * this._height;  }}const handler = {  get: function(target, key) {    if (key[0] === '_') {      throw new Error('Attempt to access private property');    }    return target[key];  },  set: function(target, key, value) {    if (key[0] === '_') {      throw new Error('Attempt to access private property');    }    target[key] = value;  }}const square = new Proxy(new Shape(10, 10), handler);console.log(square.area);             // 100console.log(square instanceof Shape); // truesquare._width = 200; // Error: Attempt to access private property

在这个示例中可以看到，instanceof 有效，所以不会出现什么意想不到的结果。

可惜用 JSON.stringify 时还是会有问题，因为它会尝试将私有属性序列化成字符串。为了避免这个问题，我们需要重载 toJSON 函数来返回“公有”属性。我们通过更新处理器对象来专门处理 toJSON：

注意：这会覆盖掉自定义的toJSON 函数。

get: function(target, key) {  if (key[0] === '_') {    throw new Error('Attempt to access private property');  } else if (key === 'toJSON') {    const obj = {};    for (const key in target) {      if (key[0] !== '_') { // Only copy over the public properties        obj[key] = target[key];      }    }    return () => obj;  }  return target[key];}

现在我们在保留原有功能 同时封装了私有属性，唯一的问题在于私有属性仍然可以枚举出来。for (const key in square) 会把 _width 和_height 列出来。幸好这个问题也可以用处理器来解决！我们可以拦截对 getOwnPropertyDescriptor 的调用，控制对私有属性的输出：

getOwnPropertyDescriptor(target, key) {  const desc = Object.getOwnPropertyDescriptor(target, key);  if (key[0] === '_') {    desc.enumerable = false;  }  return desc;}

现在把所有代码放在一起：

class Shape {  constructor(width, height) {    this._width = width;    this._height = height;  }  get area() {    return this._width * this._height;  }}const handler = {  get: function(target, key) {    if (key[0] === '_') {      throw new Error('Attempt to access private property');    } else if (key === 'toJSON') {      const obj = {};      for (const key in target) {        if (key[0] !== '_') {          obj[key] = target[key];        }      }      return () => obj;    }    return target[key];  },  set: function(target, key, value) {    if (key[0] === '_') {      throw new Error('Attempt to access private property');    }    target[key] = value;  },  getOwnPropertyDescriptor(target, key) {    const desc = Object.getOwnPropertyDescriptor(target, key);    if (key[0] === '_') {      desc.enumerable = false;    }    return desc;  }}const square = new Proxy(new Shape(10, 10), handler);console.log(square.area);             // 100console.log(square instanceof Shape); // trueconsole.log(JSON.stringify(square));  // "{}"for (const key in square) {           // No output  console.log(key);}square._width = 200;                  // Error: Attempt to access private property

在 JavaScript 中创建私有属性的方法中，代理是我目前最喜欢的一种方法。这个方法使用了老派 JS 开发者熟悉的技术，因此它可以应用于现有的旧代码，只需要用同样的代理处理器封装起来就好。

如果你还不知道 TypeScript，我告诉你， 是基于类型的 JavaScript 超集，它会编译成普通的 JavaScript。TypeScript 语言允许你指定私有、仅有和受保护的属性。

class Shape {  private width;  private height;  constructor(width, height) {    this.width = width;    this.height = height;  }  get area() {    return this.width * this.height;  }}const square = new Shape(10, 10)console.log(square.area); // 100

使用 TypeScript 要特别注意，它只是在编译期识别类型和私有/公有修饰。如果你尝试访问 square.width 会发现毫无压力。TypeScript 会在编译时报告一个错误，但并不会中止编译。

// Compile time error: Property 'width' is private and only accessible within class 'Shape'.console.log(square.width); // 10

TypeScript 不会尝试在运行时智能地阻止访问私有属性。我只是把它列在这里，让人们意识到它并不能解决我们所看到的任何问题。你可以上面的 TypeScript 会生成什么样的 JavaScript。