JavaScript: 将内置对象的方法作为回调函数传递

Question

我一直在研究 Eloquent JavaScript 的练习，发现了一些我认为很奇怪的东西。我写了一段简单的数组展平代码：

var arrays = [[1, 2, 3], [4, 5], [6]];
var out = arrays.reduce(function(acc, next){ return acc.concat(next); });
console.log(out);
// → [1, 2, 3, 4, 5, 6]

到目前为止一切顺利。但这对我来说似乎不太好，所以我将其重写为：

var arrays = [[1, 2, 3], [4, 5], [6]];
var my_concat = function(acc, next){ return acc.concat(next); }
var out = arrays.reduce(my_concat);
console.log(out);
// → [1, 2, 3, 4, 5, 6]

这样更好，但是我们真的需要引入一个函数，无论是匿名的还是命名的，来做这么基本的事情？ Array.prototype.concat.call的呼号正是我们所需要的！感觉很聪明，又重写了一遍代码：

var arrays = [[1, 2, 3], [4, 5], [6]];
var out = arrays.reduce([].concat.call);
// → TypeError: arrays.reduce is not a function (line 2)

嗯，这并没有像我预期的那样。错误消息对我来说似乎很神秘。

我决定调查一下。这有效：

var arrays = [[1, 2, 3], [4, 5], [6]];
var my_concat = function(acc, next){ return [].concat.call(acc,next); }
var out = arrays.reduce(my_concat);
console.log(out);
// → [1, 2, 3, 4, 5, 6]

这也有效：

var arrays = [[1, 2, 3], [4, 5], [6]];
arrays.my_concat = function(acc, next) { return [].concat.call(acc, next); }
var out = arrays.reduce(arrays.my_concat);
console.log(out);
// → [1, 2, 3, 4, 5, 6]

在控制台中进行更多修改：

[].concat.call
// → call() { [native code] }
typeof [].concat.call
// → "function"
[].concat.call([1, 2, 3], [4, 5])
// → [1, 2, 3, 4, 5]
var cc = [].concat.call
cc
// → call() { [native code] }
typeof cc
// → "function"
cc([1, 2, 3], [4, 5])
// → Uncaught TypeError: cc is not a function(…)

即使这样也行得通：

Array.prototype.my_concat = function(acc, next) { return [].concat.call(acc, next); }
// → function (acc, next) { return [].concat.call(acc, next); }
[[1, 2, 3], [4, 5], [6]].reduce([].my_concat)
// → [1, 2, 3, 4, 5, 6]
[[1, 2, 3], [4, 5], [6]].reduce([].concat.call)
// → Uncaught TypeError: [[1,2,3],[4,5],[6]].reduce is not a function(…)

像.call这样的内置函数有什么特别之处吗？

Answer 1

call只是大多数函数继承自Function.prototype的方法。也就是说，

arrays.reduce.call === Function.prototype.call

call 方法知道您要调用哪个函数，因为该函数作为 this 值传递。

当你传递call作为回调时，它将被称为传递undefined作为this值。由于 undefined 不是函数，因此它会抛出。在 Firefox 上我得到这个错误：

TypeError: Function.prototype.call called on incompatible undefined

相反，您可以尝试其中一种回调

Function.call.bind([].concat);
[].concat.bind([]);

然而，问题是这将无法正常工作，因为回调是用 4 个参数调用的，而不是 2 个：

上一个值
当前值
当前索引
数组

你想去掉最后两个，所以无论如何你都需要一个自定义函数。

但是，这些都不是好的方法。每次调用 concat 时，它都会创建一个新数组。因此，如果你想展平一个数组，你应该只调用一次 concat 而不是对数组中的每个项目调用一次：

[].concat.apply([], arrays); // this works

JavaScript: 将内置对象的方法作为回调函数传递

JavaScript: passing built-in objects' methods as callback functions

javascript

function

built-in