你知道[ ].slice.call()的原理吗?

在ES6之前,咱们将一个伪数组转换为真正数组一般状况下都是使用[ ].slice.call()方法,那么你知道这里面的实现原理吗?
补充:ES6的方法为 Array.from() javascript

首先,咱们先来复习一下slice()方法: java

slice(start,end)接受两个参数,startend是将一个数组从start项开始截取到end项但不包含end数组

其次,咱们再来看一下call(): app

call(thisArg,arg1, arg2, ...)thisArg表明当前函数执行时this的指向,args为函数的参数(this的指向问题不在这里过多补充,还不清楚的同窗能够自行搜索) 函数

最后,咱们再回忆一下什么是伪数组:
伪数组有一个明确的标识,length属性,而且是以索引的方式进行存储:ui

let array = { '0': 'a', '1': 'b', '2': 'c', length: 3 }
如上,一个很是典型的伪数组。 this

补充:咱们都知道slice是js数组的原生方法,因此在使用时还有一种写法就是Array.prototype.slice.call() spa

那么[].sliceArray.prototype.slice有什么区别呢?其实一般状况下二者并没有区别,这个能够经过打印[].slice === Array.prototype.slice来佐证。 prototype

复习完了基础理论,咱们如今就来捋一捋这二者之间是如何实现将一个伪数组转化成真正数组的。
举个例子:code

function test({
    return  [].slice.call(arguments)
}
var list = test(456// [4,5,6]
复制代码

在上面的例子中咱们经过call()将[].slice中的this指向了arguments,使其拥有了slice方法。slice()若是不传参则是从第0项开始截取到length-1项并返回截取后的数组[4,5,6]上面其实就是省略了call()的第二个参数,你能够把它看做为[].slice.call(arguments,0)

综上,其实现的主要原理就是利用改变this的指向来实现继承。

以上就是我所理解的实现原理,若有误欢迎指正,一定虚心接受。

相关文章
相关标签/搜索