关于javascript:slicecallarguments原理解析

5次阅读

共计 1205 个字符,预计需要花费 4 分钟才能阅读完成。

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)
正文完
 0