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.alert 弹出式复选框实现代码
Jun 15 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
浅谈React Event实现原理
Sep 20 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
Ajax实现页面无刷新留言效果
Mar 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中strtr字符串替换用法详解
2014/11/26 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python解释执行原理分析
2014/08/22 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python RSA加密的示例
2020/12/09 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
党员学习十八大感想
2014/01/17 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
观后感开头
2015/06/19 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers