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 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
基于复选框demo(分享)
Sep 27 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
JavaScript引用类型Array实例分析
Jul 24 Javascript
使用zrender.js绘制体温单效果
Oct 31 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
php技巧小结【推荐】
2017/01/19 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
vue常用指令代码实例总结
2020/03/16 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python数据可视化图实现过程详解
2020/06/12 Python
解决python对齐错误的方法
2020/07/16 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
授权委托书格式范文
2014/08/02 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
天堂的孩子观后感
2015/06/11 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
周末问候语大全
2015/11/10 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
DE1107机评
2022/04/05 无线电