[].slice.call(arguments)原理解析

轉載：https://www.jianshu.com/p/f76011a705f6

javascirpt的類數組對象可以像數組一樣使用for循環遍歷，但是卻不能調用數組原型鏈的方法，為了讓類數組對象可以像數組對象一樣調用push，pop等方法，可以將類數組對象轉成數組對象：

將類數組對象轉換成數組

var args = []; 
var obj = {0:"www",1:"jianshu",2:"com",length:3};
for (var i = 0; i < obj.length; i++) { 
    args.push(obj[i]);
}
console.log(args);  //["www","jianshu","com"]
//等價於以下的寫法
console.log([].slice.call(obj));  //["www","jianshu","com"]

理解[].slice.call(arguments)的原理，需要明白：

• slice()方法的作用
• call()方法的作用
• slice()方法的內部實現

• Array.prototype.slice()

console.log([1,2,3,4,5].slice(0,1)); //[1]
console.log([1,2,3,4,5].slice(1,3)); //[2,3]
console.log([1,2,3,4,5].slice(3)); //[4,5]
console.log([1,2,3,4,5].slice()); //[1,2,3,4,5]

數組的slice(start,end)方法，返回從start開始到end的子數組，如果start和end都沒有設置，則返回整個數組，這個過程不影響原數組。

• Function.prototype.call()

function func(name, price) {
  this.name = name;
  this.price = price;
}
var food = {name:"apple",price:10};
func.call(food,"orange",15);
console.log(food); // {name: "orange", price: 15}

調用call方法傳入的參數比原方法多一個參數，簡單來說，call方法的作用就是：用call方法的第一個參數代替func方法內部的this，其他參數為原func方法的參數。

• slice方法內部實現
  slice方法內部實現，V8源碼第587行，其基本原理就類似我們上面開頭寫的for循環遍歷原數組，根據start和end的值再復制一份到新數組並返回。所以當我們使用[].slice.call(arguments)，slice方法內部的this就會被替換成arguments，並循環遍歷arguments，復制到新數組返回，這樣就得到了一個復制arguments類數組的數組對象。

• 為了提高性能，減少一層對原型鏈的追溯，一般我們會采用以下的寫法：

Array.prototype.slice.call(arguments)