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

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

本文关键字：回调 函数 方法 内置 对象 JavaScript      更新时间：2023-09-26

我一直在研究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这样的内置函数有什么特别之处吗？

call只是大多数函数从Function.prototype继承的方法。那是

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

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

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

TypeError: Function.prototype.call called on incompatible undefined

相反，您可以尝试以下回调之一

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

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

  • 上一页价值
  • 当前值
  • 当前指数
  • 数组

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

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

[].concat.apply([], arrays); // this works
相关文章：