javascript - 创建快速引用变量以加速访问核心原型(prototype)

Question

我在分析一些第三方 javascript 库时发现了一种方法，人们可以在其中创建对核心原型(prototype)的快速引用。这样做有什么性能优势吗？谁能举个例子解释一下？

var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;

// Create quick reference variables for speed access to core prototypes.
var
    push             = ArrayProto.push,
    slice            = ArrayProto.slice,
    concat           = ArrayProto.concat,
    toString         = ObjProto.toString,
    hasOwnProperty   = ObjProto.hasOwnProperty;

Answer 1

Is there any performance benefit of doing this ?

一个非常小的，是的，有两个/三个原因:

1. 当您引用一个标识符(例如 Array 或 ArrayProto 或 push )时，JavaScript 引擎首先在当前的词法环境中查找，如果没有找到，则查找下一个, 和下一个出来，等等，直到它到达全局词法环境。我假设您所指的代码在作用域函数中。因此，因为它们是作用域函数中的局部变量，所以可以立即找到它们，而 JavaScript 引擎不必向上遍历全局环境来找到它们。

2. Array.prototype不仅需要查找Array , 还有 prototype属性(property) Array .它不需要任何可观的时间，但也不会花费零时间。

3. (重复 #2)查找 Array.prototype.push还需要查找 push在 Array.prototype .同样，不明显，但也不是零。

因此，使用本地 push，这些组合可以产生非常小的性能差异。而不是 Array.prototype.push (等等)。

但更有可能，作者这样做是因为它减少了输入，而不是为了提高性能。 :-)

---

举个例子:使用类似 Array.prototype.slice 的函数通常很有用在不是数组的对象上。事实上，直到 ES2015 的 Array.from ，这是将 类数组 对象(例如从 querySelectorAll 返回的集合)转换为真正数组的规范方法之一(更多内容在我的回答 here 中)。

鉴于您问题中的设置，如果我有一个类数组列表:

var list = document.querySelectorAll("some-selector-here");

而不是这样做来获取该列表作为数组:

var trueArray = Array.prototype.slice.call(list);

我可以这样做:

var trueArray = slice.call(list);

自 slice很可能在当前词法环境中或就在它之外的词法环境中，它会很快找到(上面的第 #1 点)，然后我们就完成了，而不必查找 prototype。在 Array (上面第 2 点)然后查找 slice在 Array.prototype (上面第 3 点)。

所以它非常稍微快一点；但同样重要的是，它更短，更不容易打字。