call() 、apply()、bind()这三个方法的作用都是:改变函数执行的上下文,换句话说就是改变函数体内部的this的指向,以此来扩充函数赖以运行作用域。
举个栗子
没有call()函数时 函数foo中的this指向的是window对象,foo.call(obj)之后 this指向的是obj这个对象.
区别:
1、bind与call、apply的区别
bind()是返回的是执行上下文被改变的函数且不会立即执行,call()、apply()直接执行该函数;
2、apply与call的区别:两者的参数
两者的第一个参数都相同—指定的对象,这个对象就是该函数的执行上下文。
apply :最多只能有两个参数,第二个参数为数组或者arguments对象。如果传递多个参数,则把参数都写进数组里面,当然,即使只有一个参数,也要写进数组里。
语法:apply(thisObj,[argArray])
function sum(num1,num2){
return num1+num2;
}
function applySum1(num1,num2){
return sum.apply(this,arguments);
}
function applySum2(num1,num2){
return sum.apply(this,[num1,num2]);
}
console.log(applySum1(8,9));//17
console.log(applySum2(7,8));//15
call: 其他的参数必须直接传给函数,要一个一个的列出来
语法:call(thisObj,param1,param2…)
function sum(num1,num2){
return num1+num2;
}
function callSum(num1,num2){
return sum.call(this,[num1,num2]);
}
console.log(callSum(8,9));//17
下面写个栗子对比一下三者的用法
var test = {
a : 5,
b : 6,
sum : function (a,b) {
var self = this;
function getA() {
console.log(self.a);//2
return self.a;
}
function getB(){
console.log(self.b);//3
return self.b;
}
alert(a);
alert(b);
return getA() + getB();
}
}
var obj = {a:2,b:3};
alert(test.sum.call(obj,4,5)); // 调用时self = this = obj,alert顺序4,5,5
alert(test.sum.apply(obj,[6,7])); // 调用时self = this = obj,alert顺序6,7,5
var sum = test.sum.bind(obj,8); // 此处返回一个只有一个参数的函数sum(b)
console.log(sum);
alert(sum(9)); //alert 5
console.log(sum);的结果如下:
从这个实例中可以看出:
bind()方法所返回的函数的length(形参数量)等于原函数的形参数量减去传入bind()方法中的实参数量(第一个参数以后的所有参数),因为传入bind中的实参都会绑定到原函数的形参。