9

我在其他地方看到了这个脚本，它会检查每一个复选框：

[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){
       el.checked=true;
    }
);​

我知道如何使用forEach：

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

//0
//1
//2

但现在，它是[].forEach，里面什么都没有。那么为什么它仍然有效？为什么我不能这样做呢？

document.querySelectorAll('input[type="checkbox"]').forEach(function(el){
       el.checked=true;
    }
);​
4

3 回答 3

10

JavaScript 具有一流的功能；也就是说，它们被视为对象，并且可以拥有自己的属性和方法。内置Function.call方法将this函数的参数作为其第一个参数，其余参数传递给函数本身。[]除了作为访问（不太简洁，因此较少使用）Array.prototype.forEach方法的一种手段外，不使用该数组。

它基本上是Array.forEach对非数组对象的重新绑定，在本例中为NodeList. 如果NodeLists 提供了一个forEach方法，那么它将等价于，您可以将其读为：

document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
   el.checked = true;
});​

所以，稍微深入一点。call将执行具有不同上下文的函数。forEach遍历上下文并调用作为参数传递的函数。所以 asomeFunc.call(thisArg, otherArg)将被执行，就好像它在 , like 的上下文中thisArg一样thisArg.someFunc(otherArg)。这是最简单的例子：

function callMe(something) {
    return something + this;
}

callMe('Hello'); // Hellonull or Hello[object Window] or something
callMe.call({}, 'World'); // World[object Object]

apply()以相同的方式工作，但您将参数数组作为第二个参数传递。

于 2012-06-07T01:00:58.063 回答
4

这只是[]用来获取forEach功能。一旦它有了这个函数，它.call就会像调用它的方法一样调用它document.querySelectorAll('input[type="checkbox"]')。

这很有用，因为它的结果document.querySelectorAll不是一个Array但行为就像一个，所以我们可以重用标准Array方法。

使用 时.call，第一个参数用作this值。也就是说，在这个特定的片段中，每次this在 的源代码中遇到forEach，它都设置为document.querySelectorAll('input[type="checkbox"]')。

您不能直接调用document.querySelectorAll('input[type="checkbox"]').forEach(...，因为querySelectorAll不返回对象，因此没有方法。整个事情只是一种通过调用来解决这个问题的方法，就好像它是一个方法一样，这是实际返回的。ArrayforEach.callforEach NodeList

于 2012-06-07T01:01:24.600 回答
3

注意.call. 它应用（设置为） tothis的结果，以便迭代这些结果而不是点左侧的（空）数组。document.querySelectorAllforEach

于 2012-06-07T00:59:45.230 回答