JavaScript私有属性的多种实现方式总汇-技术圈

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

来源 | http://www.fly63.com

JavaScript被很多人认为并不是一种面向对象语言，原因有很多种，比如JavaScript没有类，不能提供传统的类式继承；再比如JavaScript不能实现信息的隐藏，不能实现私有成员。

本文并不是为了打破以上误解（实际上笔者自己也有困惑），只是简单介绍几种JavaScript实现私有属性的方式，以及各自的优劣。

1、基于编码规范约定实现方式

很多编码规范把以下划线_开头的变量约定为私有成员，便于同团队开发人员的协同工作。实现方式如下：


function Person(name){  this._name = name;}
var person = new Person('Joe');

这种方式只是一种规范约定，很容易被打破。而且也并没有实现私有属性，上述代码中的实例person可以直接访问到_name属性：


alert(person._name); //'Joe'

2、基于闭包的实现方式

另外一种比较普遍的方式是利用JavaScript的闭包特性。构造函数内定义局部变量和特权函数，其实例只能通过特权函数访问此变量，如下：


function Person(name){  var _name = name;  this.getName = function(){    return _name;  }}
var person = new Person('Joe');

这种方式的优点是实现了私有属性的隐藏，Person 的实例并不能直接访问_name属性，只能通过特权函数getName获取：


alert(person._name); // undefinedalert(person.getName()); //'Joe'

使用闭包和特权函数实现私有属性的定义和访问是很多开发者采用的方式。但是这种方式存在一些缺陷：

私有变量和特权函数只能在构造函数中创建。通常来讲，构造函数的功能只负责创建新对象，方法应该共享于prototype上。特权函数本质上是存在于每个实例中的，而不是prototype上，增加了资源占用。

3、基于强引用散列表的实现方式

JavaScript不支持Map数据结构，所谓强引用散列表方式其实是Map模式的一种变体。简单来讲，就是给每个实例新增一个唯一的标识符，以此标识符为key，对应的value便是这个实例的私有属性，这对key-value保存在一个Object内。实现方式如下：


var Person = (function() {
    var privateData = {},        privateId = 0;
    function Person(name) {        Object.defineProperty(this, "_id", { value: privateId++ });
        privateData[this._id] = {            name: name        };    }
    Person.prototype.getName = function() {        return privateData[this._id].name;    };
    return Person;}());

上述代码的有以下几个特征：

使用自执行函数创建Person类，变量privateData和privateId被所有实例共享；
privateData用来储存每个实例的私有属性name的key-value，privateId用来分配每个实例的唯一标识符_id；
方法getName存在于prototype上，被所有实例共享。

这种方式在目前ES5环境下，基本是最佳方案了。但是仍然有一个致命的缺陷：散列表privateData对每个实例都是强引用，导致实例不能被垃圾回收处理。如果存在大量实例必然会导致memory leak。

造成以上问题的本质是JavaScript的闭包引用，以及只能使用字符串类型最为散列表的key值。针对这两个问题，ES6新增的WeakMap可以良好的解决。

4、基于WeakMap的实现方式

WeakMap有以下特点：

1）、支持使用对象类型作为key值；

2）、弱引用。

根据WeakMap的特点，便不必为每个实例都创建一个唯一标识符，因为实例本身便可以作为WeakMap的key。改进后的代码如下：


var Person = (function() {
    var privateData = new WeakMap();
    function Person(name) {        privateData.set(this, { name: name });    }
    Person.prototype.getName = function() {        return privateData.get(this).name;    };
    return Person;}());

改进的代码不仅仅干净了很多，而且WeakMap是一种弱引用散列表，这意味着,如果没有其他引用和该键引用同一个对象,这个对象将会被当作垃圾回收掉。解决了内存泄露的问题。

不幸的是，目前浏览器对WeakMap的支持率并不理想，投入生产环境仍然需要等待。

5、基于Proxy约束

Proxy 可以定义目标对象的 get、set、Object.keys 的逻辑，可以在这一层做一下判断，如果是下划线 _ 开头就不让访问，否则就可以访问。

比如还是这个 class:


class Dong {    constructor() {        this._name = 'dong';        this._age = 20;        this.friend = 'guang';    }    hello() {        return 'I\'m ' + this._name + ', '  + this._age + ' years old';    }}const dong = new Dong();

我们不直接调用它的对象的属性方法了，而是先用一层 Proxy 来约束下 get、set、getKeys 的行为：


const dong = new Dong();const handler = {    get(target, prop) {        if (prop.startsWith('_')) {            return;        }        return target[prop];   },   set(target, prop, value) {    if (prop.startsWith('_')) {        return;     }     target[prop] = value;   },   ownKeys(target, prop) {      return Object.keys(target).filter(key => !key.startsWith('_'))   }, }const proxy = new Proxy(dong, handler)

我们通过 new Proxy 来给 dong 定义了 get、set、ownKeys 的 handler：

get: 如果以下划线 _ 开头就返回空，否则返回目标对象的属性值 target[prop]。
set: 如果以下划线 _ 开头就直接返回，否则设置目标对象的属性值。
ownKeys: 访问 keys 时，过滤掉目标对象中下划线开头的属性再返回。

这样就实现了下划线开头的属性的私有化：

我们测试下：


const proxy = new Proxy(dong, handler)
for (const key of Object.keys(proxy)) {    console.log(key, proxy[key])}

确实，这里只打印了共有属性的方法，而下划线开头的那两个属性没有打印。我们基于 _prop 这种命名规范实现了真正的私有属性！

6、Symbol用于创建唯一的值

Symbol 是 es2015 添加的一个 api，用于创建唯一的值。基于这个唯一的特性，我们就可以实现私有属性。

比如这样：


const nameSymbol = Symbol('name');const ageSymbol = Symbol('age');class Dong {    constructor() {        this[nameSymbol] = 'dong';        this[ageSymbol] = 20;    }    hello() {        return 'I\'m ' + this[nameSymbol] + ', '  + this[ageSymbol] + ' years old';    }}const dong = new Dong();

我们不再用 name 和 age 作为私有属性名了，而是用 Symbol 生成唯一的值来作为名字。

7、es新草案 #prop

现在有一个私有属性的 es 草案，可以通过 # 的方式来标识私有属性和方法。

比如这样：


class Dong {    constructor() {        this.#name = 'dong';        this.#age = 20;        this.friend = 'guang';    }    hello() {        return 'I\'m ' + this.#name + this.#age + 'years old';    }}