js基础进阶--关于Array.prototype.slice.call(arguments) 的思考

版权声明:本文为博主原创文章,若要转载请申明出处与连接 https://blog.csdn.net/wxl1555/article/details/80329091

欢迎访问我的个人博客:http://www.xiaolongwu.cn

Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出现在框架活插件的源码中

如何理解

上面的代码等价于[ ].slice.call(arguments)

或者随便一个数组调用都行 [1,2,4].slice.call(arguments)

因为,前面的调用者的作用只是沿着原型链向上找,最终找到Array为止,slice为Array原型上的一个方法

slice内部的实现原理大概是这样的

Array.prototype.slice = function(start,end){
     var result = new Array();
     start = start || 0;        // 如果不传则取默认值
     end = end || this.length;  // 如果不传则取默认值

     //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键
     for(var i = start; i < end; i++){
          result.push(this[i]);
     }
     return result;
}

数组和字符串都有slice方法

如果对slice不是很了解,请看这篇文章:slice()与splice()的用法和区别你清楚吗?

call方法的作用为:改变调用者的this指向并且执行调用者,

    function fn(a){
        console.log(this.a);
        console.log(this);
    }

    var obj = {
        a : 2
    }

    fn.call(obj); //  2 
                  //  {a : 2} 
    // 解释一下 fn的this指针指向了obj ,并且执行了fn函数

如果对call方法还是没理解,请看这边文章 js基础–深入理解call、apply、bind

arguments 为函数实参的一个集合,数据类型为对象类型

写一个例子吧

    function ary(){
        console.log(arguments,typeof arguments,arguments instanceof Object)

        // 自己实操一下  看看上面这行代码能打印出什么

        return [11,12].slice.call(arguments);

        //这里的[11,12]可以被替换为任意的数组,不影响结果
    }

        var a11 = ary(1,2,3,4,5,6,888,9,222);

        console.log(a11);   [1, 2, 3, 4, 5, 6, 888, 9, 222]
        console.log(typeof a11);            //"object"
        console.log(a11 instanceof Array);  //ture

技术延伸

其实要实现将arguments强制转化为数组,还有几种方式

利用es6的Array.from()

    function fn(){
        var a = Array.from(arguments);
        var b = Array.from(arguments).slice(1);
        console.log(a);
        console.log(b);
    }

    fn(1,2,6,3,4,12);
    // 结果分别为 1,2,6,3,4,12  和 2,6,3,4,12

利用es6的展开表达式

    function fn(){
        var a = [...arguments];
        var b = [...arguments].slice(1);
        console.log(a);
        console.log(b);
    }

    fn(1,2,6,3,4,12);
    // 结果分别为 1,2,6,3,4,12  和 2,6,3,4,12

本文完


github资源地址:https://github.com/关于Array.prototype.slice.call(arguments) 的思考.md

我的个人博客:http://www.xiaolongwu.cn

csdn博客地址:https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

邮箱:wuxiaolong802@163.com

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页