详解JavaScript 新语法之Class 的私有属性与私有方法


Posted in Javascript onApril 23, 2019

译者按: 为什么偏要用 # 符号?

原文:JavaScript's new #private class fields
•译者:Fundebug

本文采用意译,版权归原作者所有

proposal-class-fieldsproposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中。事实上,最新的 Chrome 已经支持了 Class 私有属性。

那么,对于 Class 的私有属性与私有方法,它们究竟是什么呢?它们是怎样工作的?为什么要使用#符号来定义呢?

Class 的私有属性语法如下:

class Point {
 #x;
 #y;
 constructor(x, y) {
  this.#x = x;
  this.#y = y;
 }
 equals(point) {
  return this.#x === point.#x && this.#y === point.#y;
 }
}

我们可以将其语法理解为 2 个部分:

•定义 Class 私有属性
•引用 Class 私有属性

定义 Class 私有属性

私有属性与公共属性的定义方式几乎是一样的,只是需要在属性名称前面添加#符号:

class Foo {
 publicFieldName = 1;
 #privateFieldName = 2;
}

定义私有属性的时候也可以不用赋值:

class Foo {
 #privateFieldName;
}

引用 Class 私有属性

引用私有属性也只需要使用#就好了。

class Foo {
 publicFieldName = 1;
 #privateFieldName = 2;
 add() {
  return this.publicFieldName + this.#privateFieldName;
 }
}

其中,this.#可以简化,去掉 this 也没问题,下面两种写法是等价的:

method() {
 #privateFieldName;
}
method() {
 this.#privateFieldName;
}

在 Class 定义中引用 Class 实例的私有属性

对于私有属性,我们是不可以直接通过 Class 实例来引用的,这也是私有属性的本来含义。但是有一种情况除外,在 Class 定义中,我们可以引用 Class 实例的私有属性:

class Foo {
 #privateValue = 42;
 static getPrivateValue(foo) {
  return foo.#privateValue;
 }
}

Foo.getPrivateValue(new Foo()); // >> 42

其中,foo是Foo的实例,在 Class 定义中,我们可以通过 foo 来引用私有属性#privateValue。

Class 的私有方法

Class 的私有属性是提案proposal-class-fields的一部分,这个提案只关注 Class 的属性,它并没有对 Class 的方法进行任何修改。而 Class 的私有方法是提案proposal-class-fields的一部分。

Class 的私有方法语法如下:

class Foo {
 constructor() {
  this.#method();
 }
 #method() {
  // ...
 }
}

我们也可以将函数赋值给私有属性:

class Foo {
 constructor() {
  this.#method();
 }

 #method = () => {
  // ...
 };
}

封装(隐藏)私有属性

我们不能直接通过 Class 实例引用私有属性,我们只能在 Class 定义中引用它们:

class Foo {
 #bar;
 method() {
 this.#bar; // Works
 }
}
let foo = new Foo();
foo.#bar; // Invalid!

另外,要做到真正的私有的话,我们应该无法检测这个私有属性是否存在,因此,我们需要允许定义同名的公共属性:

class Foo {
 bar = 1; // public bar
 #bar = 2; // private bar
}

如果我们不允许公共属性与私有属性同名,我们则可以通过给同名的公共属性复制监测该私有属性是否存在:

foo.bar = 1; // Error: `bar` is private! (报错,说明私有属性存在)

不报错也行:

foo.bar = 1;
foo.bar; // `undefined` (赋值失败,说明私有属性存在)

对于 subclass 应该同样如此,它也允许公共属性与私有属性同名:

class Foo {
 #fieldName = 1;
}
class Bar extends Foo {
 fieldName = 2; // Works!
}

关于 Class 私有属性的封装,可以参考Why is encapsulation a goal of this proposal?。

为什么使用#符号?

很多人都有一个疑问,为什么 JS 不能学习其他语言,使用private来定义私有属性和私有方法?为什么要使用奇怪的#符号?

使用 private 的话,代码要舒服很多:

class Foo {
 private value;

 equals(foo) {
  return this.value === foo.value;
 }
}

为什么不使用 private 来定义私有属性?

很多语言使用 private 来定义私用属性,如下:

class EnterpriseFoo {
 public bar;
 private baz;
 method() {
  this.bar;
  this.baz;
 }
}

对于这些语言属性,私用属性和公共属性的引用方式是相同的,因此他们可以使用 private 来定义私有属性。

但是,对于 JavaScript 来说,我们不能使用 this.field 来引用私有属性(我接下来会解释原因),我们需要在语法层面上区分私有属性和公共属性。在定义和引用私有属性的时候,使用#符号,私有属性与公共属性可以很好地区分开来。

为什么引用私有属性的时候需要#符号?

引用私有属性的时候,我们需要this.#field,而不是this.field,原因如下:

•因为我们需要封装私有属性,我们需要允许公共属性与私有属性同名,因此私有属性与公共属性的引用方式必须不一样。这一点我们在前文已经详述。
•公共属性可以通过this.field以及this['field']来引用,但是私有属性不能支持this['field']这种方式,否则会破坏私有属性的隐私性,示例如下:

class Dict extends null {
  #data = something_secret;
  add(key, value) {
    this[key] = value;
  }
  get(key) {
    return this[key];
  }
}
new Dict().get("#data"); // 返回私有属性

因此,私有属性与公共属性的引用方式必须不一样,否则会破坏this['field']语法。

•私有属性与公共属性的引用方式一样的话,会导致我们每次都需要去检查属性是公共的还是私有的,这会造成严重的性能问题。

这篇文章遵循Creative Commons Attribution 4.0 International License。

参考

•Why is encapsulation a goal of this proposal?

总结

以上所述是小编给大家介绍的JavaScript 新语法之Class 的私有属性与私有方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 #Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 #Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 #Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php检测文本的编码
2015/07/26 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Knockout visible绑定使用方法
2013/11/15 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
JS实现购物车特效
2017/02/02 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
从0开始的Python学习016异常
2019/04/08 Python
实例详解Python模块decimal
2019/06/26 Python
Python中断多重循环的思路总结
2019/10/04 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
自我鉴定范文300字
2013/10/01 职场文书
中学生获奖感言
2014/02/04 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
驾驶员安全责任书
2014/07/22 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
element tree树形组件回显数据问题解决
2022/08/14 Javascript