this.key 与可变性能答案

【问题标题】：this.key vs variable performancethis.key 与可变性能
【发布时间】：2017-07-08 16:02:16
【问题描述】：

在变量中保存this.key 的值是否值得？

假设我必须每帧都执行此操作，它会对速度产生影响吗？

简单示例：

class Vector3 {
    constructor(X = 0, Y = 0, Z = 0) {
        this.X = X
        this.Y = Y
        this.Z = Z
    }
    toVector2() {
        return new Vector2(
            (this.Y - this.X) * COS27,
            -((this.Y + this.X) * SIN27 + this.Z)
        )
    }
}

对

class Vector3 {
    constructor(X = 0, Y = 0, Z = 0) {
        this.X = X
        this.Y = Y
        this.Z = Z
    }
    toVector2() {
        const {X, Y, Z} = this
        return new Vector2(
            (Y - X) * COS27,
            -((Y + X) * SIN27 + Z)
        )
    }
}

哪一个更高效？垃圾回收会影响这里的性能吗？

【问题讨论】：

用jsperf写个测试用例，自己看看吧。
性能差异如此之小，可以忽略不计。它可以归结为代码的可读性和维护。在大型项目中，只要它们不会极大地影响代码的可读性，我就会追求最小的优化。但是是的，从理论上讲，它确实会以一种不明显的方式影响性能。
ES6 解构赋值在大多数浏览器/转译器中仍然比直接属性访问慢（高达 100 倍），请参阅 six-speed。
谢谢，我不知道。
@wOxOm 一般来说，不是 100 倍，而是更接近 1 倍。如果不止于此，它将很快得到优化。我也不相信那些 FF 的数字——它们只是不可信。

标签： javascript performance optimization ecmascript-6

【解决方案1】：

这是非常微优化的，除非您在属性访问方面遇到性能瓶颈。然而，只要看看正在发生的事情：

1.) 直接属性访问：

当您重复访问任何对象上的属性时，您将在类似哈希表的结构中查找这些属性（速度很快），但如果在整个原型链中（可能没有找到）（可能没有那么快） )。

2.) 分配给当地人：

当分配给局部变量时，您会进行一次查找，然后在局部范围内使用变量，这（应该）更快。

结论：

第二个选项会更“有效”，如果它对你很重要，我认为它更具可读性。此外，如果您重复访问相同的属性，将它们保存在本地是有意义的 - 摆脱了一堆重复，并且使用解构语法，看起来真的很愉快。

【讨论】：

感谢您的解释 :)，它对我来说也更可红色。我什至忘记了整个原型链，现在我绝对确定我应该将这些值存储在变量中
@MaciejKozieja 在我看来，解构是 js 发生的最好的事情之一。如果您有兴趣，请查看它的所有用法！它也使传递配置对象更加干净！
很高兴听到这个消息:)
这个答案是错误的，因为它忽略了引擎优化。
@torazaburo 如果您发现有问题，请随时纠正！

【解决方案2】：

其他答案根本上是错误的，因为它们忽略了引擎所做的优化。如有必要，现代引擎通常会缓存this.X，以便进一步的访问不涉及查找。引擎甚至有可能在缓存方面做得比您自己更好，因为它不需要额外的局部变量被放入堆栈和从堆栈中弹出。

其他答案也是错误的，因为它们没有指出性能上的任何差异，就其存在的程度而言，将在亚微秒范围内。

其他答案也是错误的，因为它们没有指出当通过基准测试发现有必要时应该进行优化。

像第二种情况那样声明局部变量的唯一原因是为了可读性和清晰性。

【讨论】：