美文网首页
[].slice.call(arguments)原理解析

[].slice.call(arguments)原理解析

作者: 炒鸡大馒头 | 来源:发表于2018-12-12 00:17 被阅读0次

    javascirpt的类数组对象可以像数组一样使用for循环遍历,但是却不能调用数组原型链的方法,为了让类数组对象可以像数组对象一样调用pushpop等方法,可以将类数组对象转成数组对象:

    • 将类数组对象转换成数组
    var args = []; 
    var obj = {0:"www",1:"jianshu",2:"com",length:3};
    for (var i = 0; i < obj.length; i++) { 
        args.push(obj[i]);
    }
    console.log(args);  //["www","jianshu","com"]
    //等价于以下的写法
    console.log([].slice.call(obj));  //["www","jianshu","com"]
    

    理解[].slice.call(arguments)的原理,需要明白:

    • slice()方法的作用
    • call()方法的作用
    • slice()方法的内部实现
    • Array.prototype.slice()
    console.log([1,2,3,4,5].slice(0,1)); //[1]
    console.log([1,2,3,4,5].slice(1,3)); //[2,3]
    console.log([1,2,3,4,5].slice(3)); //[4,5]
    console.log([1,2,3,4,5].slice()); //[1,2,3,4,5]
    

    数组的slice(start,end)方法,返回从start开始到end的子数组,如果startend都没有设置,则返回整个数组,这个过程不影响原数组。

    • Function.prototype.call()
    function func(name, price) {
      this.name = name;
      this.price = price;
    }
    var food = {name:"apple",price:10};
    func.call(food,"orange",15);
    console.log(food); // {name: "orange", price: 15}
    

    调用call方法传入的参数比原方法多一个参数,简单来说,call方法的作用就是:用call方法的第一个参数代替func方法内部的this,其他参数为原func方法的参数。

    • slice方法内部实现
      slice方法内部实现,V8源码第587行,其基本原理就类似我们上面开头写的for循环遍历原数组,根据start和end的值再复制一份到新数组并返回。所以当我们使用[].slice.call(arguments),slice方法内部的this就会被替换成arguments,并循环遍历arguments,复制到新数组返回,这样就得到了一个复制arguments类数组的数组对象。

    • 为了提高性能,减少一层对原型链的追溯,一般我们会采用以下的写法

    Array.prototype.slice.call(arguments)
    

    相关文章

      网友评论

          本文标题:[].slice.call(arguments)原理解析

          本文链接:https://www.haomeiwen.com/subject/fulyhqtx.html