​web 前端培训 | JavaScript 私有属性的实现方式

​

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); // undefined

alert(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;

}());

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

1. 使用自执行函数创建 Person 类，变量 privateData 和 privateId 被所有实例共享；

2. privateData 用来储存每个实例的私有属性 name 的 key-value，privateId 用来分配每个实例的唯一标识符_id；

3. 方法 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';

}

}

这里的 name 和 age 都是私有的，而 friend 是共有的。

这种新语法 JS 引擎没那么快支持，但是可以通过 babel 或者 ts 编译器来编译成低版本语法的方式来提前用。

比如 babel 有 @babel/proposal-private-property-in-object 的插件，它可以实现这种语法的编译。

文章来源于 web 前端开发

​