理解 JS 中的 [].forEach.call() 写法

因为 documtent.querySelectorAll() 返回的并不是我们想当然的数组,而是 NodeList,对 NodeList,它里面没有 forEach 方法,我们使用了这样的方法进行循环遍历,代码如下:

var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

初次看到 [].forEach.call() 这样的代码,我觉得这种写法很有趣?为什么要这样写?为什么要用空数组引申的方法?于是研究了一下。[] 就是数组,而且是用不到的空数组,用来就是为了访问它的数组相关方法,比如 forEach。这是一种简写,完整的写法应该是这样的:

Array.prototype.forEach.call(...);

很显然,简单更方便。至于 forEach 方法,它可以技术一个函数参数:

[1, 2, 3].forEach(function (num) { console.log(num) })

上述的这句代码中,我们可以访问 this 对象,也就是数组 [1, 2, 3],可以看出这个 this 是个数组。最后 .call 是一个 prototype,JavaScript 函数内置的。.call 使用它的第一个参数替换掉上面说的这个 this,也就是你要传入的数组,其他的参数就跟 forEach 方法的参数一样了。

Array.prototype.forEach.call([1, 2, 3], item => {
    console.log(item) // 1, 2, 3
})

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页