javascript - forEach() 与 Array.prototype.forEach.call()

Question

我刚刚浏览 Electron API Demo 代码示例，突然出现了一个狂野的表达——这对我来说完全陌生——出现了:

const links = document.querySelectorAll('a[href]');

Array.prototype.forEach.call(links, function (link) {
    // WWIII here
})

我绝对理解这段代码在做什么，但我习惯了这样的语法:

links.forEach(function (links) {});

那么这两者之间究竟有什么区别呢？我已经阅读了有关此主题的各种 StackOverflow 线程，但它们要么模棱两可，要么根本不回答这个问题。有人说这与类数组集合有关，与 Array.prototype.forEach.call() 不同，.forEach() 不能迭代。这是过于乏味和冗长的版本的唯一优势吗？

提前致谢!

Answer 1

JavaScript 中的“类方法”are actually functions defined on a prototype .这意味着即使一个对象不继承自 the Array prototype ，您可以调用Array方法，只要它遵循数组结构(即:它是一个具有 length 属性和由整数索引的属性的对象)。但是，该对象没有对 Array.prototype 的引用。 ，因此您需要明确选择 Array.prototype作为方法所在的对象。
document.querySelectorAll 函数返回 NodeList , 这既不是 Array也不继承 Array原型(prototype)。但是，作为 NodeList具有与 Array 相似的内部结构，您仍然可以使用 forEach功能。但是自从NodeList不从 Array 继承原型(prototype)，尝试使用 .forEach在 NodeList会引发错误(这并不完全正确 - 请参阅我答案末尾的注释)。因此，您需要明确声明您正在调用 Array.prototype 中的方法。在 NodeList , 这是通过使用 the .call method from Function.prototype .
总之:

Array.prototype.forEach.call(links, function(link) { /* something */ })

方法:
采取 forEach函数来自 Array.prototype并调用 links ，这是一个非 Array对象，以某个函数作为其参数。
请注意，在最新版本的浏览器中， NodeList原型(prototype)确实提供了 a forEach method与 Array 的作用相同一，因此来自 Electron API 的示例可能使用了 Array version 以与旧版本兼容。如果您有一个网络应用程序并且只关心支持现代版本的 Chrome 和 Firefox，您可以调用 forEach在您的 NodeList 上.事实上，自从 Electron updates about 2 weeks after whenever Chrome updates ，使用 NodeList.prototype.forEach 应该是安全的在电子。 :)