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

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

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

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

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

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

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

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

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

那么[].sliceArray.prototype.slice有什么区别呢?其实通常情况下两者并无区别,这个可以通过打印[].slice === Array.prototype.slice来佐证。

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

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的指向来实现继承。

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

转载于:https://juejin.im/post/5c8327265188257ac9209b89

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值