Array.prototype.slice.call（）如何工作？

本文翻譯自：how does Array.prototype.slice.call() work?

我知道它用于使參數成為一個真正的數組，但我不明白使用

Array.prototype.slice.call(arguments)

時會發生什麼

#1樓

參考：https://stackoom.com/question/TbpN/Array-prototype-slice-call-如何工作

#2樓

I'm just writing this to remind myself...

我隻是寫這個來提醒自己......

Array.prototype.slice.call(arguments);
==  Array.prototype.slice(arguments[1], arguments[2], arguments[3], ...)
==  [ arguments[1], arguments[2], arguments[3], ... ]
           

Or just use this handy function $A to turn most things into an array.

或者隻是使用這個友善的函數$ A将大多數東西變成一個數組。

function hasArrayNature(a) {
    return !!a && (typeof a == "object" || typeof a == "function") && "length" in a && !("setInterval" in a) && (Object.prototype.toString.call(a) === "[object Array]" || "callee" in a || "item" in a);
}

function $A(b) {
    if (!hasArrayNature(b)) return [ b ];
    if (b.item) {
        var a = b.length, c = new Array(a);
        while (a--) c[a] = b[a];
        return c;
    }
    return Array.prototype.slice.call(b);
}
           

example usage...

示例用法...

function test() {
    $A( arguments ).forEach( function(arg) {
        console.log("Argument: " + arg);
    });
}
           

#3樓

// We can apply `slice` from  `Array.prototype`:
Array.prototype.slice.call([]); //-> []

// Since `slice` is available on an array's prototype chain,
'slice' in []; //-> true
[].slice === Array.prototype.slice; //-> true

// … we can just invoke it directly:
[].slice(); //-> []

// `arguments` has no `slice` method
'slice' in arguments; //-> false

// … but we can apply it the same way:
Array.prototype.slice.call(arguments); //-> […]

// In fact, though `slice` belongs to `Array.prototype`,
// it can operate on any array-like object:
Array.prototype.slice.call({0: 1, length: 1}); //-> [1]
           

#4樓

when .slice() is called normally, this is an Array, and then it just iterates over that Array, and does its work.

當.slice（）被正常調用時，這是一個數組，然後它隻是疊代該數組，并完成它的工作。

//ARGUMENTS
function func(){
  console.log(arguments);//[1, 2, 3, 4]

  //var arrArguments = arguments.slice();//Uncaught TypeError: undefined is not a function
  var arrArguments = [].slice.call(arguments);//cp array with explicity THIS  
  arrArguments.push('new');
  console.log(arrArguments)
}
func(1,2,3,4)//[1, 2, 3, 4, "new"]
           

#5樓

First, you should read how function invocation works in JavaScript .

首先，您應該閱讀函數調用在JavaScript中的工作原理 。

I suspect that alone is enough to answer your question.

我懷疑隻有這一點足以回答你的問題。

But here's a summary of what is happening:

但這裡是對正在發生的事情的總結：

Array.prototype.slice

extracts the

slice

method from

Array

's prototype .

Array.prototype.slice

從

Array

的原型中提取

slice

方法 。

But calling it directly won't work, as it's a method (not a function) and therefore requires a context (a calling object,

this

), otherwise it would throw

Uncaught TypeError: Array.prototype.slice called on null or undefined

.

但是直接調用它是行不通的， 因為它是一個方法（不是一個函數） ，是以需要一個上下文（一個調用對象，

this

），否則它會抛出

Uncaught TypeError: Array.prototype.slice called on null or undefined

。

The

call()

method allows you to specify a method's context, basically making these two calls equivalent:

call()

方法允許您指定方法的上下文，基本上使這兩個調用等效：

someObject.slice(1, 2);
slice.call(someObject, 1, 2);
           

Except the former requires the

slice

method to exist in

someObject

's prototype chain (as it does for

Array

), whereas the latter allows the context (

someObject

) to be manually passed to the method.

除了前者要求

slice

方法存在于

someObject

的原型鍊中（就像它對

Array

），而後者允許将上下文（

someObject

）手動傳遞給方法。

Also, the latter is short for:

此外，後者簡稱：

var slice = Array.prototype.slice;
slice.call(someObject, 1, 2);
           

Which is the same as:

這與以下相同：

Array.prototype.slice.call(someObject, 1, 2);
           

#6樓

Maybe a bit late, but the answer to all of this mess is that call() is used in JS for inheritance.

也許有點晚了，但所有這些混亂的答案是在JS中使用call（）進行繼承。

If we compare this to Python or PHP, for example, call is used respectively as super().

例如，如果我們将它與Python或PHP進行比較，則call分别用作super（）。

init () or parent::_construct().

init （）或parent :: _ construct（）。

This is an example of its usage that clarifies all:

這是其用法的一個示例，闡明了所有：

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}
           

Reference: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance

參考： https ： //developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance