ES6 Class中实现私有属性的一些方法总结


Posted in Javascript onJuly 08, 2019

私有属性

私有属性是面向对象编程(OOP)中非常常见的一个特性,一般满足以下的特点:

  • 能被class内部的不同方法访问,但不能在类外部被访问;
  • 子类不能继承父类的私有属性。

备胎Class

时间回到四年前,2015年6月,ES6发布成为标准,为了纪念这个历史性时刻,这个标准又被称为ES2015,至此,JavaScript中的class从备胎中转正。在这之前,class一直作为JS的关键字,雪藏不见天日。
class被认为是JS的一种语法糖,它为JavaScript带来了用面向对象的思想描述一个实体的能力。但似乎还远远不够,class的能力远没满足JS开发者们的期待。于是,TC39的大佬们也努力地去做到更好,并推出了一项新的提案:

class Foo {
 #a; // 私有属性
 constructor(a, b) {
 this.#a = a;
 this.b = b
 }
}

上面私有属性的声明,需要先经过Babel等编译器编译后才能正常使用。

提案已经到Stage 3了,未来可期!

可是,一众JSer们已经等不及了......

JSer的挣扎

通过对数据的一定封装,JS开发者们走上了曲线实现“私有属性”之路。

1. 约定俗成

JS界以一种不成文的规定,在变量前加上下划线"_"前缀,约定这是一个私有属性;但实际上,它仍然是一个穿上皇帝新衣般的公共属性。

ES6 Class中实现私有属性的一些方法总结

2. 闭包

在constructor作用域内定义局部变量,内部载通过闭包的方式对外暴露该变量。

这种方式,虽然实现了私有属性外部不可访问,但在类内部,该属性同样没法在不同的方法内共享,仍然不是严格意义上的“私有属性”。

ES6 Class中实现私有属性的一些方法总结

3. Symbols & Getters

利用Symbol变量可以作为对象key的特点,我们可以模拟实现更真实的私有属性。

ES6 Class中实现私有属性的一些方法总结

可是,也不是毫无破绽:

ES6 Class中实现私有属性的一些方法总结

借助getOwnPropertySymbols方法可以取出对象的Symbol键值。

4. WeakMap & Getters

WeakMap的实现与Symbol如出一辙。

ES6 Class中实现私有属性的一些方法总结

巨人的肩膀

以上,是目前阶段JS实现属性私有比较可行的方案,可能实际中很少应用,但如果你在面试中遇到这个问题,或许这些方案可以参考下。

然后,所有这些方案里面,建议选TypeScript的private。

最后,关于JS中实现私有属性,欢迎读者们评论交流你的看法~

参照:

ECMAScript Classes - Keeping Things Private

原文:Github

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
通过jQuery源码学习javascript(一)
Dec 27 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
taro开发微信小程序的实践
May 21 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 #Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 #Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 #Javascript
You might like
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Django  ORM 练习题及答案
2019/07/19 Python
django 实现简单的插入视频
2020/04/07 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
幼儿园教师备课制度
2014/01/12 职场文书
新学期家长寄语
2014/01/19 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
企业文化标语口号
2014/06/09 职场文书
中秋晚会致辞
2015/07/31 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android