javascript 为什么 Array.prototype.map.call 而不是 Array.map.call

why Array.prototype.map.call instead of Array.map.call

提问by PerrierCitror

I fell upon some lines of code where the guy uses Array.prototype.map.callinstead of Array.map.call:

我发现了这家伙使用的一些代码行，Array.prototype.map.call而不是Array.map.call：

function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href');
    });
}

Why not simply calling Array.map.call? I checked on the Firefox console and both Arrayand Array.prototypehave the map function. Is there a difference ?

为什么不简单地打电话Array.map.call？我检查了Firefox的控制台上两者Array并Array.prototype有地图功能。有区别吗？

回答by Tomasz Gawel

This is because document.querySelectorAlldoes not return an Arrayinstance but an instance of NodeList(or at least is not guaranteed to return an Arrayon all browsers). NodeListhas indexed elements but does not include all methods from the Arrayprototype.

这是因为document.querySelectorAll不返回一个Array实例而是一个实例NodeList（或者至少不保证Array在所有浏览器上都返回一个）。 NodeList具有索引元素但不包括Array原型中的所有方法。

This is why we need a hack calling mapmethod from Array's prototype in the context of the returned object.

这就是为什么我们需要在返回对象的上下文中map从Array的原型中调用 hack方法的原因。

I assume that you understand that for:

我假设你明白：

var a = [], f = function() {};

the expression:

表达方式：

a.map(f);

is equivalent to:

相当于：

Array.prototype.map.call(a, f);

See also:

另见：

• Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
• https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/NodeList

• 为什么 document.querySelectorAll 返回一个 StaticNodeList 而不是一个真正的数组？
• https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/NodeList

回答by Robbie Wxyz

Because Array.map.calldoesn't work.Array.mapis built to accept two parameters: the array, and the callback. callruns a function setting its thisto the object you supply.

因为Array.map.call不起作用。Array.map被构建为接受两个参数：数组和回调。 call运行一个函数，将其设置this为您提供的对象。

So, when you run Array.prototype.map.call(somearray,function(){...});it is virtually the same as if you called somearray.map(function(){...});. Array.mapis just a utility method Javascript in Firefox only(another reason why not to use it) has to make life easier. The Array.mapfunction is not cross-browser.

因此，当您运行Array.prototype.map.call(somearray,function(){...});它时，它实际上与您调用somearray.map(function(){...});. Array.map只是Firefox 中的一个实用方法 Javascript （不使用它的另一个原因）必须让生活更轻松。该Array.map功能不是跨浏览器的。

Edit:The reason that they had to use Array.prototype.map.call(links,...);instead of just links.map(...);, is that querySelectorAlldoes not return a normal array, it returns a NodeListthat does not have a mapmethod.

编辑：他们不得不使用Array.prototype.map.call(links,...);而不是仅仅使用的原因links.map(...);是它querySelectorAll不返回普通数组，它返回一个NodeList没有map方法的数组。

回答by Akshay Vijay Jain

Good Question:

Array is a constructor function to create arrays.

好问题：

Array 是一个用于创建数组的构造函数。

If you type Array in browser console you will get a function definition, something like

function Array() { [native code] }

While if you type Array.prototype in browser console you will get an empty array i.e [ ]i.e. an Array object.

Consider this excerpt

如果您在浏览器控制台中键入 Array，您将获得一个函数定义，类似于function Array() { [native code] }而如果您在浏览器控制台中键入 Array.prototype，您将获得一个空数组，即[ ]即一个 Array 对象。 考虑这个摘录

function a(){
console.log('hi');
function b(){console.log('b');}
function c(){console.log('c');}
return {b:b,c:c,d:this}
}

When you type d = new a();
Then d is an object having two properties which are functions i.e. b and c and you can call

>> d.b() //logs b
>> d.c() //logs c

But you cannot call

a.b() or a.c()// since function b and c is not property of a.

So just as function b and c are defined in function a. Similarly function map is defined in function Array.

So you cannot call Array.map()but you have to get an object of Array and call map function on it.
Array.prototypegives us an Array object
Therefore they are using Array.prototype.map.call(a,func)

当你输入d = new a();
然后 d 是一个具有两个属性的对象，它们是函数，即 b 和 c，你可以调用

>> d.b() //logs b
>> d.c() //logs c

但你不能调用

a.b() or a.c()// 因为函数 b 和 c 不是 a 的属性。

所以就像函数 b 和 c 在函数 a 中定义一样。类似地，函数映射是在函数数组中定义的。

所以你不能调用，Array.map()但你必须得到一个 Array 的对象并在它上面调用 map 函数。
Array.prototype给了我们一个 Array 对象
因此他们使用Array.prototype.map.call(a,func)

Sorry for long explanation. Hope it benefits.:)

抱歉解释太长了。希望它有好处。:)

回答by Chris W.

They've probably avoided Array.mapbecause it doesn't exist in Chrome or IE.

他们可能已经避免了，Array.map因为它在 Chrome 或 IE 中不存在。

回答by Dagg Nabbit

mapis meant to be called on array instances. Thus, Array.prototype.map. Array.mapdoesn't exist in most browsers.

map旨在在数组实例上调用。因此，Array.prototype.map。Array.map大多数浏览器中不存在。