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

最新推荐文章于 2022-11-23 10:12:28 发布

weixin_34247299

最新推荐文章于 2022-11-23 10:12:28 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： java

原文链接：https://juejin.im/post/5c8327265188257ac9209b89

在ES6之前，使用[].slice.call()将伪数组转换为真实数组是一种常见方法。本文解释了slice()和call()的工作原理，以及如何通过改变this指向实现继承，从而完成转换。

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

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

slice(start,end)接受两个参数，start和end是将一个数组从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()

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

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

function test() {
    return  [].slice.call(arguments)
}
var list = test(4, 5, 6) // [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