写点什么

web 前端培训 js 私有属性的 6 种实现方式

作者:@零度
  • 2022 年 5 月 24 日
  • 本文字数:3739 字

    阅读完需:约 12 分钟

class 是创建对象的模版,由一系列属性和方法构成,用于表示对同一概念的数据和操作。

有的属性和方法是对外的,但也有的是只想内部用的,也就是私有的,那怎么实现私有属性和方法呢?

不知道大家会怎么实现,我梳理了下,我大概用过 6 种方式,我们分别来看一下:

_prop

区分私有和共有最简单的方式就是加个下划线 _,从命名上来区分。

比如:

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

console.log(dong.hello());

这里的 Dong 就有私有属性 _name、_age,共有属性 friend。

但是这种方式只是一种命名规范,告诉开发者这个属性、方法是私有的,不要调用,但终究不是强制的,如果别人要用也阻止不了。



不过这种方式用的还是挺多的,历史比较悠久。

那怎么能基于这种规范实现真正的私有呢?这就要用到 Proxy 了:

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 这种命名规范实现了真正的私有属性!

再调用下方法试试:



咋是 undefined 了?

因为 proxy.hello 方法的 this 也是指向 proxy 的,也会受限制,所以要再做下处理:



如果用的是方法,那就给它绑定 this 为目标对象。

这样 hello 方法就可以访问到那些 _ 开头的私有属性了:



我们通过 Proxy 给下划线的命名规范实现了真正的私有属性,但是要定义一层 Proxy 比较麻烦,有没有不定义 Prxoy 的方式呢?

确实有,比如 Symbol:

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 生成唯一的值来作为名字。

这样外面因为拿不到属性名,就没法取到对应的属性值:



这种方式比 Proxy 的方式更简单一些,也是用的很多的一种实现私有属性的方式。

如果想暴露出去,可以定义个 get 方法:



但是这种私有属性是真的没法访问么?

不是的,有一个 api 叫做 Object.getOwnPropertySymbols,可以取到对象的所有 Symbols 属性,然后就可以拿到属性值了:



所以说这种方式只是 Object.keys 取不到对应的属性而已,不如 Proxy 那种方式完善。

那不用 Proxy 的方式,还比有没有 Symbol 更完善的呢?

那可以试试这种:

WeakMap

外面可以访问到属性和方法是因为我们把它挂到了 this 上,那不挂到 this 上外面不就访问不到了么?

比如用一个 Map 保存私有属性:

const privateFields = new Map();

class Dong {

constructor() {

privateFields.set('name', 'dong');

privateFields.set('age', 20);

}

hello() {

return 'I\'m ' + privateFields.get('name') + ', ' + privateFields.get('name') + ' years old';

}

}

我们测试下:



这样貌似可以,但不知道大家有没有发现其中的问题:

  • 所有对象都用同一个 Map,之间相互影响

  • 对象销毁了这个 Map 依然存在

怎么解决这个问题呢?

不知道大家用没用过 WeakMap,它的特性是只能用对象作为 key,对象销毁,这个键值对就销毁。

完美解决了上面两个问题:

  • 因为是用对象作为 key 的,那不同的对象是放在不同的键值对上的,相互没影响

  • 对象销毁的时候,对应的键值对就销毁,不需要手动管理

貌似是很完美,我们实现下:

const dongName = new WeakMap();

const dongAge = new WeakMap();

const classPrivateFieldSet = function(receiver, state, value) {

state.set(receiver, value);

}

const classPrivateFieldGet = function(receiver, state) {

return state.get(receiver);

}

class Dong {

constructor() {

dongName.set(this, void 0);

dongAge.set(this, void 0);

classPrivateFieldSet(this, dongName, 'dong');

classPrivateFieldSet(this, dongAge, 20);

}

hello() {

return 'I\'m ' + classPrivateFieldGet(this, dongName) + ', ' + classPrivateFieldGet(this, dongAge) + ' years old';

}

}

每个属性定义了一个 WeakMap 来维护,key 为当前对象,值为属性值,get 和 set 使用 classPrivateFieldSet 和 classPrivateFieldGet 这两个方法,最终是通过从 WeakMap 中存取的。

在构造器里初始化下当前对象对应的属性值,也就是 dongName.set(this, void 0),这里的 void 0 的返回值是 undefined,一个意思。

测试下:



哇,通过 WeakMap 也能实现私有属性!

不过这里的 classPrivateFieldGet 没必要定义吧,直接 xxMap.get 不就行么?

确实,包一层的目的是为了可以加一些额外的逻辑,这里也可以直接从 weakMap 取。

但这样写起来也很麻烦呀,有没有更简单的方式呢?

能不能设计一种语法糖,它自动编译成这种方式呢?

想的没错,确实有这种语法糖:

#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 的插件,它可以实现这种语法的编译:



babel 就是把 #prop 编译成上面那种 WeakMap 的方式来实现的。

这个插件在 @babel/preset-env 的预设里,会自动引入:


除了 babel,ts 里也可以直接用这种语法:



也是会编译成 WeakMap 的方式来实现。

其实 ts 实现的新语法还是不少的,比如 ? 和 ?? 分别是可选链和默认值的语法,下面这两种写法等价:

const res = data?.name ?? 'dong';

const res2 = data && data.name || 'dong';

这种新语法都是直接可用的,babel 的话需要引入下 proposal 插件。

对了,我记得 ts 里 class 也是有 private 的修饰符的,那个不也是私有属性么?

其实它是私有属性但也不完全是,我们来看一下:

ts private

ts 可以通过 private 来修饰属性、方法的可见性:

  • private 表示属性私有,只有 class 内部可访问

  • protected 表示保护,只有 class 和子 class 可访问

  • public 表示共有,外部也可访问

类型检查和提示的时候是有区别的,比如 private 属性在 class 外部不可访问:



而 class 内部是可以访问的:



​编但是这种约束只是用于类型检查的,只存在编译期间,运行时并没有这种约束。

我们可以看下编译后的代码:



点击并拖拽以移动

​编辑

 

可以看到没有做任何处理。

而如果用 #prop 的方式,除了编译时是 private 的,运行时也是:



点击并拖拽以移动

​编辑

 

所以,要实现真正的 private 的话,还是用 #prop 的方式,如果只是编译时约束那声明下 private 就行。

总结

class 用于定义围绕某个概念的一系列属性和方法,这些属性和方法有的是内部用的,有的是对外的。只有内部用的属性、方法需要实现私有化。

实现私有属性方法,我梳理了 6 种方式:

  • 通过下划线 _prop 从命名上区分

  • 通过 Proxy 来定义 get、set、ownKeys 的逻辑

  • 通过 Symbol 来定义唯一的属性名,不能通过 keys 拿到

  • 通过 WeakMap 来保存所有对象的私有属性和方法

  • 通过 #prop 的 es 新语法实现私有,babel 和 tsc 会把它们编译成 WeakMap 的方式

  • 通过 ts 的 private 在编译时约束

这六种方式,有三种只是伪私有,比如 _prop(依然可以访问)、ts 的 private(运行时可访问)、Symbol(可以通过 Object.getOwnSymbols 拿到 symbol 来访问)。

另外三种是真正的私有,包括 Proxy、WeakMap、#prop(目前是编译为 WeakMap 的方式)。

文章转载来源于前端开发爱好者

用户头像

@零度

关注

关注尚硅谷,轻松学IT 2021.11.23 加入

IT培训 www.atguigu.com

评论

发布
暂无评论
web前端培训js 私有属性的 6 种实现方式_web前端开发_@零度_InfoQ写作社区