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：

PREVIOUSVALUE
CurrentValue的
CURRENTINDEX
阵列

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

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

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

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

1 个答案: