阅读 706

[译] Chrome 72 新特性

原文New in Chrome 72
作者Pete LePage 发表时间:January 29, 2019
译者:西楼听雨 发表时间: 2019/02/05 (转载请注明出处)


My first language was Java, and learning JavaScript threw me for a bit of a loop. How did I create a class? Or inheritance? What about public and private properties and methods? Many of the recent updates to JavaScript that make object oriented programming much easier.

我使用的第一门语言是 Java,学习 JavaScript 的过程使我大吃一惊。我该怎么创建一个类?又要怎么实现继承?public 和 private 属性和方法呢?JavaScript 最近发布的许多更新使得这些面向对象编程变得更加容易。

I can now create classes, that work like I expect them to, complete with constructors, getters and setters, static methods and public properties.


Thanks to V8 7.2, which ships with Chrome 72, you can now declare public class fields directly in the class definition, eliminating the need to do it in the constructor.

感谢 V8 7.2——它是随着 Chrome 72 发布的,现在我们可以直接在 class 定义中声明开放性实例字段了,再不用在构造器中来做这件事了。

class Counter {
  _value = 0;
  get value() {
    return this._value;
  increment() {

const counter = new Counter();
// → 0
// → 1

Support for private class fields is in the works!


More details are in Mathias’s article on class fields for more details.

关于实例字段的更多信息可以通过 Mathias 的文章进行了解。

User Activation API 用户激活 API

Remember when sites could automatically play sound as soon as the page loaded? You scramble to hit the mute key, or figure out which tab it was, and close it. That’s why some APIs require activation via a user gesture before they’ll work. Unfortunately, browsers handle activation in different ways.

还记得网站在页面加载完就可以自动播放声音的那些时光吗?你慌张地去点击静音键;或者慌张地找寻那个标签并关闭它。这也是为什么有些 API 需要用户手势 (user gesture) 的参与才能开始工作的原因。不过,各家浏览器对于处理激活 (activation) 的方式却又各异。


Chrome 72 introduces User Activation v2, which simplifies user activation for all gated APIs. It’s based on a new specification that aims to standardize how activation works across all browsers.

Chrome 72 引入了 User Activation v2,简化了。

There’s a new userActivation property on both navigator and MessageEvent, that has two properties: hasBeenActive and isActive:

navigatorMessageEvent 上都新增了一个 userActivation 属性,这个属性上又有两个属性:

  • hasBeenActive indicates if the associated window has ever seen a user activation in its lifecycle.

    hasBeenActive 表示在其所关联的 window 的生命周期中是否已经有过“用户激活”。

  • isActive indicates if the associated window currently has a user activation in its lifecycle.

    isActive 表示在其所关联的 window 的生命周期中当前是否有“用户激活”

More details are in Making user activation consistent across APIs

了解更多,查看"Making user activation consistent across APIs"

Intl.format 来本地化列举的表达

I love the Intl APIs, they’re super helpful for localizing content into other languages! In Chrome 72, there’s a new .format() method that makes rendering lists easier. Like other Intl APIs, it shifts the burden to the JavaScript engine, without sacrificing performance.

我喜欢 Intl API,他们对于将内容本地化为其他语种非常有用!在 Chrome 72 中,新增了一个用于简化表达列举的 .format() 方法。和 Intl 的其他 API 一样,这个 API 也是将负担转移到了 JavaScript 引擎上,不再需要牺牲性能。

Initialize it with the locale you want, then call format, and it’ll use the correct words and syntax. It can do conjunctions - which adds the localized equivalent of and (and look at those beautiful oxford commas). It can do disjunctions - adding the local equivalent of or. And by providing some additional options, you can do even more.

用一个 locale 对他进行初始化,然后调用 format 方法,它就会采用正确的词汇和语法。它可以用来表达并联关系词“和”的本地化版本。也可以用来表达选择关系词“或的本地化版本。如果再指定一些额外的选项的话,你还可以做更多的事。

const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'

Check out the Intl.ListFormat API post for more details!

查看 Intl.ListFormat API 这篇贴文了解更多!


These are just a few of the changes in Chrome 72 for developers, of course, there’s plenty more.


  • Chrome 72 changes the behavior of Cache.addAll() to better match the spec. Previously, if there were duplicate entries in the same call, later requests would simply overwrite the first. To match the spec, if there are duplicate entries, it will reject with an InvalidStateError.

    为了更好地贴合规范,Chrome 72 调整了 Cache.addAll() 的行为。在这之前,在单次调用中,如果在存在重复的条目,后面的会覆盖掉前面的。为了贴合规范,如果存在重复的条目,它将用一个 InvalidStateError 错误拒绝 (reject)

  • Requests for favicons are now handled by the service worker, as long as the request URL is on the same origin as the service worker.

    对于网站小图标 (favicon) 的请求,现在也会被 service worker 进行处理了——只要请求的 URL 的源 (origin) 与 service worker 一致。