三者作用基本一样:都可以动态改变this指向;
这也是好多人平时容易混淆和迷惑的地方;
三者的用法和例子:
bind:
//bind
const plugin = {
fun1: function() {
setInterval(this.fun2, 500);
// setTimeout(this.fun2, 500);
},
fun2: function() {
this.fun3();
},
fun3:function(){
console.log(1)
}
}
plugin.fun1();
上边这种写法是错误的,fun2中的this是找不到的,因为fun2是在fun1中调用的;
解决:
const plugin = {
fun1: function() {
setInterval(this.fun2.bind(this), 500);
// setTimeout(this.fun2, 500);
},
fun2: function() {
this.fun3();
},
fun3:function(){
console.log(1)
}
}
问题解决了,理解一下,我们都听说过一句话,this指向是调用时决定的,刚开始fun1中调用fun2,fun2作为回调函数this指向全局window,window没有方法fun3,所以爆出未定义的错误,使用bind后指定fun2的this是fun1的this,也就是当前作用域中的this(plugin),所以不会报错;
之后说下: 原生js中封装插件,或者分装大方法对象,经常这么使用bind,总有一天你会碰到;
所以bind用在回调方法上,并且回调中使用了this;因为bind会返回一个新的方法;而apply,call并不会,所以这也是bind与其他两个的区别,另外上边 this.fun2.bind(this)和this.fun2.bind()效果一样,bind参数为空时会把当前作用域的this作为第一个参数;
再看看call和apply的区别:
作用一样,只是传参数的形式不一样,call参数逐个传入,apply参数放在一个数组中传入;第一个参数都是需要指向的this;