JavaScript call() 和原型(prototype) - 切片函数

Question

我正在阅读 MDN Article在 JavaScript 中的 slice 上。除了标题为 Array-Like Objects 的部分中的第二个示例，我了解所有内容。

它说我们可以通过使 slice 成为我们自己的函数来简化第一个示例:

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

我不明白的是 call 怎么可以紧跟在第二行的 prototype 之后。

我通常以 Array.prototype.slice.call(arguments) 或类似的形式看到它。

我不明白前两行的流程以及它们如何生成这个有效的 slice 函数。

Answer 1

长话短说:

var slice = Function.prototype.call.bind(unboundSlice);

是一种简写方式:

var slice = function(value, start, end) {
  return unboundSlice.call(value, start, end);
};

---

让我们再想想这一行:

Array.prototype.slice.call(arguments)

.slice 是一个数组方法，用于提取数组的子集。它对 this 的值进行操作。 .call 是每个函数都有的方法，它允许您为函数执行设置 this 值。因此，上面这行代码让我们将 slice 作为 arguments 的方法来执行，而不必改变 arguments 本身。我们可以完成

arguments.slice = Array.prototype.slice;
arguments.slice();

但这不是那么干净。

正在看

Function.prototype.call.bind(unboundSlice);

如前所述，.call 是每个 函数都有的方法。它还对 this 进行操作，这应该是一个函数。它调用 this 并将该函数的 this 值设置为第一个参数。您可以将 call 视为类似于

function call(thisValue, arg1, arg2, ...) {
   return this.apply(thisValue, [arg1, arg2, ...]);
}

注意它如何将 this 作为函数调用。

.bind 也是每个函数都有的方法。它返回一个新函数，该函数的 this 值固定为您传入的第一个参数。

让我们考虑一下 call.bind(unboundSlice) 的结果函数会是什么样子:

function boundCall(thisValue, arg1, arg2, ...) {
   return unboundSlice.apply(thisValue, [arg1, arg2, ...]);
}

我们只是用 unboundSlice 替换了 this。 boundCall 现在将始终调用 unboundSlice。