【问题标题】:Can JavaScript optimize this object?JavaScript 可以优化这个对象吗?
【发布时间】:2018-06-22 14:54:39
【问题描述】:

想象我们这样定义一个新对象:

const foo = {number1: 1, number2: 2}

这应该用这两个属性定义一个新的“隐藏类”。

现在假设我使用 ES6 类语法定义了一个新类。

class Numbers {
  constructor() {
    this.number1 = 1
    this.number2 = 2
  }
}

然后我从中创建一个新对象。

const bar = new Numbers()

现在的问题是:bar 的“隐藏类”会与foo 的隐藏类相同吗?

因为我想象的是第一个定义将创建一个具有两个属性的新“隐藏类”,但第二个定义将创建一个新的“隐藏类”,然后它将创建一个具有一个属性的新“隐藏类”然后使用另一个属性创建另一个“隐藏类”,从而将三个“隐藏类”链接在一起。

有人可以澄清一下吗? 如果我的假设是正确的,那么新的“ES6 类语法”确实更慢。

根据文章:JavaScript engine fundamentals: Shapes and Inline Caches · Mathias Bynens

【问题讨论】:

  • 不,他说的是 JS 引擎优化。
  • 我对 es2015 的类的理解是原型链上本质上存在语法糖,我的印象是它们可以编译成可比较的对象。不过,我很想听到在这件事上受过更多教育的人的回答。
  • 一些随机猜测:fooNumbers 将具有不同的隐藏类,因为它们的原型不同。另外我猜构造函数会被大量优化,导致它最终只使用一个隐藏类,因此类与构造函数相比一点也不慢,并且与对象字面量的差异非常小。

标签: javascript performance es6-class javascript-engine


【解决方案1】:

现在的问题是:bar 的“隐藏类”是否与 foo 的隐藏类相同?

没有。 foo 会创建一个这样的隐藏类(伪代码):

{ number1: Number, number2: Number }

bar 的构造然而会创建三个隐藏类,一开始是一个空的:

{}

然后将分配第一个属性并扩展现有的隐藏类:

 { number1: Number } -> {}

在第二次分配后,它将再次被扩展:

{ number2: Number } -> { number1: Number } -> {}

所以实际上隐藏类不等于foo 的隐藏类,因为它被拆分为多个相互扩展的隐藏类。

如果我的假设是正确的,那么新的“ES6 类语法”确实会更慢。

大概吧。对象字面量真的很快,类构造函数有点慢。它们实际上比常规函数还要慢,但是 V8 团队 is working on it。但即使存在很小的性能差异,在很多情况下您也可能不会注意到。

Read on

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-02-24
    • 1970-01-01
    • 1970-01-01
    • 2012-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多