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组件的一些写法
Sep 10 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
vue+django实现下载文件的示例
Mar 24 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
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
php对象工厂类完整示例
2018/08/09 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
jQuery实现长文字部分显示代码
2013/05/13 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python 连接sqlite及简单操作
2017/06/30 Python
python装饰器深入学习
2018/04/06 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
解决Mac下使用python的坑
2019/08/13 Python
关于Keras Dense层整理
2020/05/21 Python
Python matplotlib可视化实例解析
2020/06/01 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
应届生污水处理求职信
2013/11/06 职场文书
小学二年级评语
2014/04/21 职场文书
关于青春的演讲稿
2014/05/05 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
公司给客户的感谢信
2015/01/23 职场文书
导游欢送词
2015/01/31 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
旅游投诉信范文
2015/07/02 职场文书
教师节简报
2015/07/20 职场文书
职工宿舍管理制度
2015/08/05 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python