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函数般调用正则
Apr 08 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
解决vue中provide inject的响应式监听
Apr 19 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
python类装饰器用法实例
2015/06/04 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python 系统调用的实例详解
2017/07/11 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python机器学习之神经网络实现
2018/10/13 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python实现超市商品销售管理系统
2019/11/22 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
《故乡》教学反思
2014/04/10 职场文书
优秀毕业生求职信
2014/06/05 职场文书
消防安全宣传口号
2014/06/10 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
计划生育责任书
2015/05/09 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
讲解Python实例练习逆序输出字符串
2022/05/06 Python