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修改css样式style浅谈
May 06 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
物业经理求职自我评价
2013/09/22 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
教育见习报告范文
2014/11/03 职场文书
培根随笔读书笔记
2015/07/01 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js