搜索
 找回密码
 立即注册

QQ鐧诲綍

鍙渶涓姝ワ紝蹇熷紑濮

扫一扫,访问微社区

js中模拟实现私有属性

查看: 1089| 评论: 0| 发布者: 孙雯雯

??? ??С
简介:今天在看《你不知道的js》这本书时,无意看到Object还有个方法叫做 getOwnPropertySymbols() ,用来获取对象的Symbol属性。记得之前看过一些文章说,可以使用Symbol来实现私有属性,如果能直接使用 getOwnPropertySy ...
今天在看《你不知道的js》这本书时,无意看到Object还有个方法叫做 getOwnPropertySymbols() ,用来获取对象的Symbol属性。记得之前看过一些文章说,可以使用Symbol来实现私有属性,如果能直接使用 getOwnPropertySymbols() 方法获取Symbol属性,那还是私有属性么?

今天复习整理一下关于js中创建私有属性的一些问题。

由于js并不是Java那种类式面向对象,因此即使es6添加了class支持,js根上还是基于原型的面向对象,不支持什么私有,公有属性的。

要想实现私有属性,基于现有的js,途径只有一个: 闭包。

至于什么是闭包,网上一大把,有兴趣也可以看看我之前整理的文章。

使用原始的闭包
const User = (function () { return class User{ constructor(name) { this.getName = function () { return name; } this.setName = function (name) { this.getName = function () { return name; } } } };})();

这种方式的确可以实现私有的属性,而且如果有子类继承,也可以如下写法:
const Boy = (function () { return class Boy extends User{ constructor(name){ super(name); this.getGender = function () { return 'boy'; } } }})();

但问题也有:
  • 代码组织混乱。由于对构造器函数形成一个闭包,因此所有的setter,getter函数都写在了构造器内。可以从上面的User的写法中看出,setter函数中,还要再定义一遍getter,这中混乱,不是一般能忍受的。如果业务逻辑中还有其他的更多操作,那么混乱程度一下子就上来了。
  • 闭包的内存开销不容小觑。

针对上面的问题,我们可不可以将name单独拿出来放到单独一个地方存储,优化一下代码的组织呢?比如下面这个:
const User = (function () { let privateName = null; return class User{ constructor(name) { privateName = name; } getName(){ return privateName; } setName(name) { privateName = name; } };})();

上面这个例子,貌似是可以的,这样代码也清晰了,也能实现私有属性。

但是,仔细分析一下,真的可以么?

如此的话,是不是所有的实例对象都共享一个 privateName 属性?后面的实例会覆盖前面实例的值。看下面:
const u1 = new User('coolcao');const u2 = new User('lili');console.log(u2.getName());console.log(u1.getName());// lili// lili

针对上面的问题,我们使用一个 privateName 保存私有属性,会被覆盖,那么我们如果使用一个数组,保存多个,然后针对每个实例,生成一个唯一的存取标识呢?

基于散列实现
const User = (function () { const privateData = {}; let i = 0; return class User { constructor(name){ this['_id'] = i ++; privateData[this['_id']] = {name: name}; } getName() { return privateData[this['_id']].name; } setName(name) { privateData[this['_id']].name = name; } };})();

我们使用 privateData 这个对象来保存所有实例的私有属性,针对每个实例,使用一个id进行标识,每实例化一个实例,该id会自动加1。然后将该id作为键值,将私有属性存入 privateData 对象。

嗯,这样看上去比直接在构造器中使用闭包要清晰多了,而且实例与实例之间也不冲突。

在es6之前,这可能是最合适的方案。虽然也会存在问题:

每个实例对象都会引用 privateData ,因此,还是由于闭包的问题,如果实例太多的话,内存是个问题。

WeakMap实现

幸好 es6 来了,带来了一个叫做 WeakMap 的东西,具体这东西是啥呢?可以看看阮老师的教程

简单说来,WeakMap键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。

好了,那么上面的这个强引用关系,我们可以使用 WeakMap 弱引用来代替:
const User = (function () { const privateData = new WeakMap(); class User { constructor(name) { privateData.set(this,{name:name}); } getName() { return privateData.get(this).name; } setName(name) { privateData.get(this).name = name; } }})();

如此的代码,干净清爽了许多,而且由于WeakMap是弱引用,如果没有其他引用和该键引用同一个对象,这个对象将会被当作垃圾回收掉。解决了内存泄露的问题。

好了,js模拟闭包,就这几个方式了,从这几个例子来看,都使用了自执行函数(IIFE),因此都会形成闭包。这也是我最开始说的,要想在js实现私有属性,只能使用闭包。

Symbol的问题

话说回来我当初的疑问,ES6的Symbol实现的私有属性有啥问题呢?

看下面例子:
const User = (function () { const NAME = Symbol('User#Name'); return class User{ constructor(name){ this[NAME] = name; } getName(){ return this[NAME]; } setName(name) { this[NAME] = name; } }})();

NAME是个Symbol,从外部并不能拿到NAME确切的值,好像是有点私有属性的意思。但是 有一个 Object.getOwnPropertySymbols() 方法可以拿到对象所有的Symbol属性,虽然我不知道具体存了个啥,但是能拿到这个标识,就可以修改属性值了:
const smbs = Object.getOwnPropertySymbols(user);for(let s of smbs) { user[s] = 'good';}console.log(user.getName());// good

因此,严格意义上说,Symbol其实并不能实现私有属性。
不过倒是可以将上面第二种基于散列的方式改为Symbol的方式:const User = (function () { const privateData = {}; return class User { constructor(name){ this._name = Symbol('name'); privateData[this._name] = {name: name}; } getName() { return privateData[this._name].name; } setName(name) { privateData[this._name].name = name; } };})();

这样对外暴露的只是 _name 的这个符号,外部还是无法直接访问每个实例的 privateData 中的值。但这个其实和第二种是一样的,闭包引起的问题还是无法解决。

展望未来

js的私有属性,目前处于 stage2 阶段,目前还未最终确定,不过我们可以先看一下模样:
class Point { #x; #y; constructor(x, y) { this.#x = x; this.#y = y; } equals(point) { return this.#x === point.#x && this.#y === point.#y; }}

语法如上,使用 # 定义私有属性,在类的内部可以直接 使用 this.#x 的形式引用。

目前使用#进行定义和访问私有属性,未来会不会使用 public,private等关键字不得而知。

目前使用#,可能的原因是,js没有静态类型系统。

参考
  • Private instance members with weakmaps in JavaScript
  • Private Properties(MDN)
  • JavaScript实现私有属性
  • JavaScript’s new #private class fields

原文链接:http://coolcao.com/2017/08/14/private-property-in-js/ 如有侵权请告知删除

本文仅代表作者个人观点,不代表SEO研究协会网官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员。更多相关资讯,请到SEO研究协会网www.seoxiehui.cn学习互联网营销技术请到巨推学院www.jutuiedu.com。

晕倒

感动

大哭

惊呆

口水
已有 0 人参与

会员评论

推荐阅读

    2019-08-20 17:19
  • 作者:dongxiaofeng

    快手商家号如何添加电话

    快手商家号的电话号码功能正式上线了,若你开通了商家号,可以在自己的主页上添加电话号码,方便粉丝直接联系商家,提高转化效率

  • 2019-08-20 17:18
  • 作者:苏彦

    快手商家号怎么没有二维码?

    近年来,快手商家号变现能力越来越强,更多的企业将快手作为新的变现途径,而快手商家号正是快手官方推出的助力企业变现的新产品。巨推传媒作为首批快手商家号认证全国一级代理服务商。全国一级代理客服微信:jutui2

  • 2019-08-20 17:10
  • 作者:dongxiaofeng

    快手商家号认证有什么好处?

    现在做短视频营销推广是企业是越来越多,而且就当下最火的两个短视频软件抖音和快手而言,用户可以说是遍及男女老少,这么大的用户群就代表了巨大的商机

  • 2019-08-20 17:08
  • 作者:苏彦

    如何才能进入快手商家号

    现在的生活中都已经是离不开了快手,快手也是在我们的生活里起到了重要的作用,吃喝玩乐等各方面都是可以与快手发生休戚相关的紧密联系。现如今快手升级了,许多企业都开始了快手商家号,那么快手商家号怎么进,不会

  • 2019-08-20 16:58
  • 作者:苏彦

    快手商家号有哪些权益

    现在基本上咱们只需要拥有一部手机就能走骗天下,在这个手机不离手的网络时代,互联网的开展也越来越先进。而快手开发作为其中的佼佼者,更是咱们所不能疏忽的,但现在快手的衍生物快手商家号已经来到了我们的生活中

  • 2019-08-20 16:55
  • 作者:dongxiaofeng

    快手商家号怎么开通?

    “商家号在哪里开通”“开通具体有哪些条件”“开通之后需要进行哪操作”“各项权益在什么时候、在哪里可以看到”

  • 2019-08-20 16:48
  • 作者:苏彦

    快手商家号有哪些好处

    近几年来,快手飞速发展,带给大家许多快乐,许多企业已经步入快手商家号的渠道,而巨推传媒便是帮助你解决快手商家号的一家公司,全国一级代理客服微信:jutui21,那么快手商家号到底有哪些不一样的好处,

  • 2019-08-20 16:46
  • 作者:dongxiaofeng

    快手商家号开通全流程

    随着短视频的快速传播,直播平台飞速创新,快手在行业中已是佼佼者,所以逐渐加大审核力度,导致很多用户在平台中不会开通商家号

  • 2019-08-20 16:42
  • 作者:苏彦

    快手商家号应该如何进行运营

    互联网媒体所衍生产品的快手、抖音等昌盛短视频平台,早已变成每一知名品牌和大型企业务必创立的网络传达的阵营。假如你还抱着不做或随意来做的心态,极有或许被同行的产品竞争对手击败!当你在互联网媒体上真正投入

  • 2019-08-20 16:42
  • 作者:yxp心平气和

    步入新媒体0到1年的新媒体人 每天会面临的工作

    这里给大家介绍一下新媒体内容团队的一天,如果你是一个刚入门的零到一年的新媒体人,你的一天应该是选题、写稿、修改稿件、抓热点、选好内容、联系转载授权、编辑排版、内容推送等环节中度过的。?我们来看看百万大

文章排行

TOP ARTICLES

返回顶部