初学JS的时候觉得this简直是难懂,看了书和无数篇别人的文章,也没能彻底弄清,现在觉得想要弄懂一个知识得靠不断地积累和反复的学习,而不是看了几篇“彻底弄清XX”之类的文章,这里我把困惑我一段时间的有关apply、call和bind的知识做一个总结,不敢打着“看完这个,就能彻底弄懂XX”的名头,但求做一个完整的理解记录,也希望能够帮助到看到这篇文章的朋友。
首先,这三种方法都是为了改变一个函数运行时的this指向存在的。可以用劫持
来形容这种关系,指定一个对象来劫持另一个对象上的方法,并且改变方法运行时内部的this指向。
var o={
funName:"o name",
fun:function(args){
console.log(this.funName+args)
}
}
//首先在对象o上调用fun方法
o.fun(" args");//o name args
var o_apply={
funName:"apply name",
}
//调用对象o的fun方法,但是将this指向改为o_apply,funName自然指向o_apply内部的funName
o.fun.apply(o_apply,[" args"])//apply name args
var o_call={
funName:"call name",
}
//原理同上,只是使用call方法的传参形式不同于apply
o.fun.call(o_call," args");//call name args
var o_bind={
funName:"bind name",
}
//原理同上,只是使用bind方法的传参形式不同,并且需要手动再调用
o.fun.bind(o_bind)(" args");//bind name args
apply和call
fun.apply(thisArg[, argsArray])
apply()
方法调用一个函数, 其具有一个指定的this
值,以及作为一个数组(或类似数组的对象)提供的参数。
call()
方法与apply用法基本相同,不同点在于传入参数,call接收若干个参数的列表。
使用call需要明确知道传入参数数量和名称,apply则不需要,push到一个数组传入即可。
apply的妙用:
求最大值:var array = [1,2,3];Math.max.apply(null,array); // 3
求最小值:var array = [1,2,3];Math.min.apply(null,array); // 1
这里的原理是Math求最值方法不接收数组,利用apply特性将数组转化为参数列表传入。
合并数组:var array1 = [1,2,3],array2 = [4,5,6];Array.prototype.push.apply(array1,array2);
但其实合并数组可以用concat,性能更好。
call用来转将类数组转为数组
类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,类数组在读写操作上与数组像似,并且可以使用for循环进行遍历,但是没有数组的很多方法如pop()等。
JS中常见的类数组有:arguments,DOM操作中获取的nodelist等。
借助call方法可以巧妙的将类数组转换为数组。
function argsToArray(a,b){
console.log(arguments);
console.log(arguments instanceof Array);//false
let arr=Array.prototype.slice.call(arguments,0);
console.log(arr instanceof Array);//true
console.log(arr);
}
argsToArray(1,2);
原理在于数组的slice方法可以返回一个数组。然后通过call改变slice方法中的this指向,使其为arguments对象,内部的方法构建一个新数组,并且循环arguments对象将其元素push近新数组,然后返回这个数组,就得到了一个内部元素与之前的arguments完全一样的但是性质上是一个真正数组的对象。
Array.prototype.slice = function(start,end){
var result = new Array();
start = start || 0;
end = end || this.length;
for(var i = start; i < end; i++){
result.push(this[i]);
}
return result;
}
bind()
bind()创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。