public 和私有类字段[双语]
栏目: JavaScript · 发布时间: 5年前
- 本文来源: developers.google.com/web/updates…
- 本文作者:mathias V8 JavaScriptwhisperer
- 文章 LISENCE: creativecommons.org/licenses/by…
- 文章中的代码 LISENCE: www.apache.org/licenses/LI…
- 译者: 蒋璇 , 就职于丁香园, 任职Insight 医药数据库 前端开发. 开源社区热爱者
Several proposals expand the existing JavaScript class syntax with new functionality. This article explains the new public class fields syntax in V8 v7.2 and Chrome 72, as well as the upcoming private class fields syntax.
IncreasingCounter
的类的实例: Here’s a code example that creates an instance of a class named IncreasingCounter:
const counter = new IncreasingCounter(); counter.value; // logs 'Getting the current value!' // → 0 counter.increment(); counter.value; // logs 'Getting the current value!' // → 1 复制代码
value
在返回结果之前执行了一些代码(i.e., 其打印了一条消息). 现在问一下自己, 在 JavaScript 中, 你将如何实施该类? Note that accessing the value executes some code (i.e., it logs a message) before returning the result. Now ask yourself, how would you implement this class in JavaScript?
ES2015 类语法
ES2015 class syntax
IncreasingCounter
的方法: Here’s how IncreasingCounter could be implemented using ES2015 class syntax:
class IncreasingCounter {
constructor() {
this._count = 0;
}
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
复制代码
value
取值方法, 和 increment
方法. 更有趣的是, 该类有一个构造器, 其给实例创建一个 _count
属性, 并且设置其默认值为 0. 我们现在使用下划线前缀来标明 _count
不应该被类的实例直接使用, 但这只是一个约定; 并没有语言强制指定的特殊语义, 所以其不是一个真正的 "私有" 属性. The class installs the value getter and an increment method on the prototype. More interestingly, the class has a constructor that creates an instance property _count and sets its default value to 0. We currently tend to use the underscore prefix to denote that _count should not be used directly by consumers of the class, but that’s just a convention; it’s not really a "private" property with special semantics enforced by the language.
const counter = new IncreasingCounter(); counter.value; // logs 'Getting the current value!' // → 0 // Nothing stops people from reading or messing with the // `_count` instance property. :cry: counter._count; // → 0 counter._count = 42; counter.value; // logs 'Getting the current value!' // → 42 复制代码
public 类字段
The new public class fields syntax allows us to simplify the class definition:
class IncreasingCounter {
_count = 0;
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
复制代码
_count
属性现在很好的声明在类的顶部. 只是声明一些字段的时候我们不再需要构造函数. 整齐! The _count property is now nicely declared at the top of the class. We no longer need a constructor just to define some fields. Neat!
_count
字段依旧还是一个 public 属性. 在这个特殊的例子下, 我们希望阻止人直接的访问该属性. However, the _count field is still a public property. In this particular example, we want to prevent people from accessing the property directly.
私有类字段
Private class fields
That’s where private class fields come in. The new private fields syntax is similar to public fields, except you mark the field as being private by using #. You can think of the # as being part of the field name:
class IncreasingCounter {
#count = 0;
get value() {
console.log('Getting the current value!');
return this.#count;
}
increment() {
this.#count++;
}
}
复制代码
Private fields are not accessible outside of the class body:
const counter = new IncreasingCounter(); counter.#count; // → SyntaxError counter.#count = 42; // → SyntaxError 复制代码
public 并且静态的属性
Public and static properties
Class fields syntax can be used to create public and private static properties and methods as well:
class FakeMath {
// `PI` is a static public property.
static PI = 22 / 7; // Close enough.
// `#totallyRandomNumber` is a static private property.
static #totallyRandomNumber = 4;
// `#computeRandomNumber` is a static private method.
static #computeRandomNumber() {
return FakeMath.#totallyRandomNumber;
}
// `random` is a static public method (ES2015 syntax)
// that consumes `#computeRandomNumber`.
static random() {
console.log('I heard you like random numbers…')
return FakeMath.#computeRandomNumber();
}
}
FakeMath.PI;
// → 3.142857142857143
FakeMath.random();
// logs 'I heard you like random numbers…'
// → 4
FakeMath.#totallyRandomNumber;
// → SyntaxError
FakeMath.#computeRandomNumber();
// → SyntaxError
复制代码
更简单的子类
Simpler subclassing
Animal
: The benefits of the class fields syntax become even clearer when dealing with subclasses that introduce additional fields. Imagine the following base class Animal:
class Animal {
constructor(name) {
this.name = name;
}
}
复制代码
Cat
子类, 以前, 在创建这个属性之前你必须先调用 super()
来调用 Animal
的构造函数: To create a Cat subclass that introduces an additional instance property, you’d previously have to call super() to run the constructor of the Animal base class before creating the property:
class Cat extends Animal {
constructor(name) {
super(name);
this.likesBaths = false;
}
meow() {
console.log('Meow!');
}
}
复制代码
super()
调用: That’s a lot of boilerplate just to indicate that cats don’t enjoy taking baths. Luckily, the class fields syntax removes the need for the whole constructor, including the awkward super() call:
class Cat extends Animal {
likesBaths = false;
meow() {
console.log('Meow!');
}
}
复制代码
结尾
Conclusion
Public class fields are shipping in V8 v7.2 and Chrome 72. We plan on shipping private class fields soon.
Questions about this new feature? Comments about this article? Feel free to ping me on Twitter via @mathias!
译者注:
- Q: 为什么没有翻译 public 这个单词?
-
A: 用了很多翻译 工具 尝试翻译
public class fields, 结果都是公共类字段, 包括 bing 翻译, google translate. 但是我总感觉这个翻译不够严谨, public 这里应该是指实例可以访问的字段, 应该是公开字段. 并不是一些实例公共的字段. 所以译者保留了这个单词, 不希望有些人在阅读的时候会有误解. 如果有什么意见, 欢迎评论. - Q: 为什么 Luckily 这个单词也没有翻译
- A: 为了熟悉这个单词, 悬浮在该英文单词之上即可看到中文, 该单词的中文意思为: 幸运的是
译者在翻译的时候保留了英语原文, 希望给你一个原滋原味的阅读体验并且能熟悉一些常见的英文.
希望有读者可以指出我的翻译错误, 感激不尽.
译文转载请注明出处, 文中所有资源 LISENCE 均跟随源资源.
其他双语译文:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- springboot~DTO字符字段与日期字段的转换问题
- Protocol Buffers 学习（2）：字段类型和其他语言字段类型之间的映射
- Protocol Buffers 学习（2）：字段类型和其他语言字段类型之间的映射
- Erlang私有函数的私有程度如何？
- PHPRAP 2.0.2 发布，接口和字段数据分离，字段使用单独数据表
- JavaScript 新语法详解：Class 的私有属性与私有方法
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
