javascript - 理解纯 JS 中的事件附件代码

Question

大家好，我是 JS 的新手，基本上对 Jquery 略知一二，所以我正在浏览 this (纯 Javascript 中的 Jquery)文章，他们有以下示例:

 $('a').on('click', fn);

在此示例中，我们将点击事件监听器附加到页面上的所有 anchor 标记。

上面的Jquery代码重写如下:

[].forEach.call( document.querySelectorAll('a'), function(el) {
   el.addEventListener('click', function() {
     // anchor was clicked
  }, false);
});

现在我明白了 call() 在 JS 中的工作原理以及 forEach 在 JS 中的工作原理，但我不明白 [] 在 forEach< 前面做了什么 ，很难理解上面代码中的执行顺序，还有谁在 function(el) 中传递了 el ？

谁能解释一下？

谢谢。

亚历克斯。

Answer 1

[] 是Array.prototype 的快捷方式，所以它真的是

Array.prototype.forEach.call( document.querySelectorAll('a'), callback );

它采用原生 Array.prototype.forEach 并使用来自 querySelectorAll 的结果 nodeList 调用它作为第一个参数，即 this 值, 回调作为第二个参数。

这样调用它可以让我们传入非数组，例如“类数组”的对象，因为它们具有长度属性，例如 arguments 或 nodeList，否则对象无法通过直接在对象上使用 Array.forEach 进行迭代。