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创建命名空间(namespace)的最简实现
Dec 11 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
javascript中 try catch用法
Aug 16 Javascript
javascript倒计时效果实现
Nov 12 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 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
星际玩家的三大定律
2020/03/04 星际争霸
深入PHP autoload机制的详解
2013/06/09 PHP
PHP中文乱码解决方案
2015/03/05 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JS实现切换标签页效果实例代码
2013/11/01 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python中标准库OS的常用方法总结大全
2017/07/19 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
校园十佳歌手策划书
2014/01/22 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript