在说 call、apply、bind方法的时候,有必要知道什么是 this。
this是什么?
this就是函数运行时所在的环境 ,一般有以下这几种情况
- 当函数在浏览器被全局调用时,this就指向 window
- 在函数中 this永远指向 最后调用它的那个对象
- 在构造函数中 this指向 new关键字创建的对象
- call,apply,bind强行改变this的指向,并把this指向 绑定在了他们指定的参数对象上
- 箭头函数中的this比较特殊,指的是函数所在的宿主环境(上下文环境)。箭头函数中的this并不能被动态改变,因为一开始this就已经确定了。
三者相同点:
1、都是用来改变函数的 this的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function() {
alert(this.name + " , " + this.gender + " ,今年" + this.age);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
xw.say();
此时say方法没有参数:
1、 call方法传参:xw.say.call(xh);
2、 apply方法传参:xw.say.apply(xh);
3、 bind方法传参:xw.say.bind.(xh)();
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
此时say方法有参数
1、 call方法传参:call后面的参数与say方法中的参数是一一对应的(参数列表形式
)
// xw.say.call(xh,"实验小学","六年级");
2、apply方法传参:apply的第二个参数必须是数组
,数组中的元素是和say方法中的参数一一对应的。
xw.say.apply(xh,["实验小学","六年级"]);
3、bind方法传参:bind方法返回的是一个函数
,可以在调用的时候再进行传参。
xw.say.bind(xh,"实验小学","六年级")();
等价于
xw.say.bind(xh)("实验小学","六年级");
总的来说 call、apply、bind 的区别是:
- call/apply改变了函数的this上下文后马上执行该函数
- bind则是返回改变了上下文后的函数,不执行该函数
- call/apply 返回fun的执行结果
- call/apply传递参数的不同
- bind返回fun的拷贝,并指定了fun的this指向,保存了fun的参数。