javascript - 数组索引成本高吗？

Question

在下面来自 backbone 的片段中, 这条线

(ev = events[i]).callback.call(ev.ctx);

不清楚。我想假设 ev = events[i] 在 ev.ctx 之前被解释，因为变量似乎除了减少数组索引之外没有其他目的。

假设这是正确的，这样做是因为数组索引的成本很高吗？我知道在嵌入式工程中，当您使用有限的资源时，数组索引的成本很高。但我认为这在 JavaScript 中不是一个问题。

主干片段

triggerEvents = function(events, args) {
    var ev, 
        i = -1, 
        l = events.length;
    switch (args.length) {
        case 0: 
            while (++i < l) {
                (ev = events[i]).callback.call(ev.ctx);
            }
            return;
        case 1: 
            while (++i < l) {
               (ev = events[i]).callback.call(ev.ctx, args[0]);
            }
            return;
        case 2: 
            while (++i < l) { 
                (ev = events[i]).callback.call(ev.ctx, args[0], args[1]);
            }
            return;
        case 3: 
            while (++i < l) { 
                (ev = events[i]).callback.call(ev.ctx, args[0], args[1], args[2]);
            }
            return;
        default: 
            while (++i < l) {
                (ev = events[i]).callback.apply(ev.ctx, args);
            }
    }
};

Answer 1

可以使用 treehugger.js demo生成 AST backbone.js 方法的简化代码:

var ev, i = -1, l = 3;
while (++i < l) { 
  (ev = events[i]).callback.call(ev.ctx, args[0], args[1], args[2]);
}

产生这个 AST:

[
  VarDecls(
      [
        VarDecl("ev"),
        VarDeclInit(
            "i",
            PrefixOp(
                "-",
                Num("1")
            )
        ),
        VarDeclInit(
            "l",
            Num("3")
        )
      ]
  ),
  While(
      Op(
          "<",
          PrefixOp(
              "++",
              Var("i")
          ),
          Var("l")
      ),
      Block(
          [
            Call(
                PropAccess(
                    PropAccess(
                        Assign(
                            Var("ev"),
                            Index(
                                Var("events"),
                                Var("i")
                            )
                        ),
                        "callback"
                    ),
                    "call"
                ),
                [
                  PropAccess(
                      Var("ev"),
                      "ctx"
                  ),
                  Index(
                      Var("args"),
                      Num("0")
                  ),
                  Index(
                      Var("args"),
                      Num("1")
                  ),
                  Index(
                      Var("args"),
                      Num("2")
                  )
                ]
            )
          ]
      )
  )
]

虽然隐含的“清洁”方法:

var ev, i = -1, l = 3;
while (++i < l) {
  ev = events[i];
  ev.callback.call(ev.ctx, args[0], args[1], args[2]);
}

产生这个 AST:

[
  VarDecls(
      [
        VarDecl("ev"),
        VarDeclInit(
            "i",
            PrefixOp(
                "-",
                Num("1")
            )
        ),
        VarDeclInit(
            "l",
            Num("3")
        )
      ]
  ),
  While(
      Op(
          "<",
          PrefixOp(
              "++",
              Var("i")
          ),
          Var("l")
      ),
      Block(
          [
            Assign(
                Var("ev"),
                Index(
                    Var("events"),
                    Var("i")
                )
            ),
            Call(
                PropAccess(
                    PropAccess(
                        Var("ev"),
                        "callback"
                    ),
                    "call"
                ),
                [
                  PropAccess(
                      Var("ev"),
                      "ctx"
                  ),
                  Index(
                      Var("args"),
                      Num("0")
                  ),
                  Index(
                      Var("args"),
                      Num("1")
                  ),
                  Index(
                      Var("args"),
                      Num("2")
                  )
                ]
            )
          ]
      )
  )
]

这两者之间的唯一区别是 Assign() 发生在 PropAccess() 内部，而在“更清洁”的方法中它发生在外部。它们的步数相同。您可以一起避免 Assign 并将其与第二个 Index 交换。恐怕我对 JS 内部结构了解不够，无法知道这是否更快。我猜这取决于平台。