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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
如何利用ES6进行Promise封装总结
Feb 11 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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/07/05 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
Django 中 cookie的使用
2017/08/17 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python中dir函数用法分析
2015/04/17 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python jieba库分词模式实例用法
2021/01/13 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
忠诚教育心得体会
2014/09/03 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
会计做账心得体会
2016/01/22 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js