首先,这三者有一定的相似之处:
1、接收两个参数
2、第一个,改变this指向,第一个参数即是改变后的this
3、第二个,需要传递的参数
然后这三者的主要区别 如下:
1、call,apply会直接运行,而bind只是改变指向,并不会运行函数
var personWang = {
name : "小王",
sex : "男",
age : 24,
say : function() {
console.log((this.name + " , " + this.sex + " ,今年" + this.age+"岁"));
}};
var personMing = {
name:"小明",
sex: "男",
age: 99
}
personWang.say.call(personMing);
personWang.say.apply(personMing);
personWang.say.bind(personMing)();//注意这里的括号
输出:
因此,bind 在js事件触发里 需要改变指向时经常用到 比如
react中,constructor里的this指向的实例本身,而在触发事件例如 <a onClick={this.sayHello}> </a>
中,this指向为对应的DOM元素,因此要用bind改变指向(使用其余两种会触发函数的执行) :
<a onClick={(this.sayHello).bind(this)}> </a>
2、三者传参有区别
call,bing,传参时要枚举
var test = {
say : function(a,b,c) {
console.log(a+b+c);
}};
test.say.call(null,1,2,3);
test.say.bind(null,1,2,3)();
输出:
apply传参时要用数组或类数组
test.say.apply(null,[1,2,3]); //输出 6
利用可以传数组这个属性,可以完成以下小tip
- Math.max 可以实现得到数组中最大的一项,但是Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,它只支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(Math,array),这样轻松的可以得到一个数组中最大的一项
Math.max.apply(Math, [1,2,3,4,5]) // 5
同理:
Math.min 可以实现得到数组中最小的一项
- 与arguments参数结合使用
arguments:所有参数集合的数组,是function的默认参数
//计算实参列表所有数字的和
function sum(){
for (var i = 0 , _sum = 0; i < arguments.length; i++) {
_sum += arguments[i];
}
return _sum;
}
console.log(sum(1,2,3,4,5,6)) //输出 21