[].slice.call(arguments)将arguments类数组转换为数组的的实现原理

Posted 2023-04-19

参考技术A [].slice.call(arguments)作用：把arguments转换为数组。
等同于[...arguments]。
那么内部实现原理呢？
这里就需要先清楚数组的slice()和函数的call(obj,arg1,arg2,...)的实现原理。

首先了解下call()方法：
Function.call(obj,arg1,arg2,...)的作用:把Function内部的this指向obj这个对象。

再来看下：数组的slice()。

slice()内部会去遍历数组内的每一个元素(前提是没有传入start参数、end参数)，把遍历到的元素存放到一个空数组，遍历结束，再把这个空数组返回。作用有点像拷贝。

当把slice()与call()结合后，由于call()的作用，slice()内部的this指向了新的对象。
看下面的例子。

arguments:是个类数组，但是也有length属性，所以在slice()内部可以对arguments进行遍历，把arguments内部的元素遍历后，组成数组返回。所以最后呈现给我们的结果就是把arguments转变为了数组。

最后我想说明一点：在上面的例子中slice()内部的this在call()的作用指向了arguments，看似是这样，但是我给slice()内部额外加个属性试试：

最近又看到Array.prototype.slice.call( arguments, 0 )，arguments后面又加了个数字。但是，理解不了这个数字是怎么起作用的。

Array.prototype.slice.call(arguments) 通俗法理解

Array.prototype.slice.call(arguments,num) 能将具有length属性的对象转成数组。

 

slice 从字面上的意思可以理解为截取数组的一部分。

call 从字面上的意思可以理解为截取出来

arguments 仅与数组类似，不是真正的数组对象，所以它并没有slice这个方法，让arguments转换成一个数组对象，让arguments具有slice()方法。

注：要是直接写arguments.slice(num)会报错。

那么 Array.prototype.slice.call(arguments,num); 即把调用方法的参数截取出来。 

如：

var a={length:2,0:‘first‘,1:‘second‘};//类数组,有length属性，长度为2，第0个是first，第1个是second
console.log(Array.prototype.slice.call(a,0));// ["first", "second"],调用数组的slice(0);

var a={length:2,0:‘first‘,1:‘second‘};
console.log(Array.prototype.slice.call(a,1));//["second"]，调用数组的slice(1);

var a={0:‘first‘,1:‘second‘};//去掉length属性，返回一个空数组
console.log(Array.prototype.slice.call(a,0));//[]

function test(){
  console.log(Array.prototype.slice.call(arguments,0));//["a", "b", "c"]，slice(0)
  console.log(Array.prototype.slice.call(arguments,1));//["b", "c"],slice(1)
}
test("a","b","c");