JavaScript call() 和 Prototype - Slice 函数 [英] JavaScript call() and Prototype - Slice Function

问题描述

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

I'm reading the MDN Article on slice in JavaScript. I understand everything except the 2nd example in the section titled Array-Like Objects.

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

It says we can simplify the first example by making slice our own function as so:

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 之后出现.

What I don't understand is how call can come right after prototype on the second line.

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

I usually see it in the form of Array.prototype.slice.call(arguments) or something of that sort.

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

I don't understand the flow of the first two lines and how they generate this working slice function.

推荐答案

tl;dr:

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

是一种简短的写法:

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

<小时>

让我们再想想这一行:

---

Let's think about this line for second:

Array.prototype.slice.call(arguments)

.slice 是一种提取数组子集的数组方法.它对 this 的值进行操作..call 是每个函数都有的方法，它可以让你为函数执行设置 this 值.所以，上面这行让我们将 slice 作为 arguments 的方法执行，而不必改变 arguments 本身.我们本可以做到

.slice is an array method to extract a subset of the array. It operates on the value of this. .call is a method every function has, it lets you set the this value for a function execution. So, the above line lets us execute slice as a method of arguments, without having to mutate arguments itself. We could have done

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

但这并不那么干净.

现在看

Function.prototype.call.bind(unboundSlice);

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

As said, .call is a method that every function has. It also operates on this, which is expected to be a function. It calls this and sets the this value of that function to the first argument. You could think of call as being similar to

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

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

Note how it calls this as a function.

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

.bind is also a method every function has. It returns a new function which has its this value fixed to the first argument you pass in.

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

Let's consider what the resulting function of call.bind(unboundSlice) would look like:

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

我们只是将 this 替换为 unboundSlice.boundCall 现在总是调用 unboundSlice.

We simply replaced this with unboundSlice. boundCall will now always call unboundSlice.

这篇关于JavaScript call() 和 Prototype - Slice 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！