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 arguments.callee的应用代码
May 07 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
JS实现网站吸顶条
Jan 08 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
django实现用户登陆功能详解
2017/12/11 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
医学生自我评价
2014/01/27 职场文书
嘉宾邀请函
2015/01/31 职场文书
垂直极限观后感
2015/06/08 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS