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 相关文章推荐
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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学习笔记之二
2011/01/17 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
php微信开发之谷歌测距
2018/06/14 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Django发送html邮件的方法
2015/05/26 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
求职毕业生自荐书
2014/02/08 职场文书
眼镜促销方案
2014/03/15 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
工程技术员岗位职责
2015/04/11 职场文书
初二物理教学反思
2016/02/19 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
代码解析React中setState同步和异步问题
2021/06/03 Javascript
python全面解析接口返回数据
2022/02/12 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js