三者作用基本一樣:都可以動(dòng)態(tài)改變this指向鸽心;
這也是好多人平時(shí)容易混淆和迷惑的地方墓猎;
三者的用法和例子:
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();
上邊這種寫法是錯(cuò)誤的卷胯,fun2中的this是找不到的,因?yàn)閒un2是在fun1中調(diào)用的辜贵;
解決:
const plugin = {
fun1: function() {
setInterval(this.fun2.bind(this), 500);
// setTimeout(this.fun2, 500);
},
fun2: function() {
this.fun3();
},
fun3:function(){
console.log(1)
}
}
問題解決了悯蝉,理解一下,我們都聽說過一句話托慨,this指向是調(diào)用時(shí)決定的鼻由,剛開始fun1中調(diào)用fun2,fun2作為回調(diào)函數(shù)this指向全局window厚棵,window沒有方法fun3蕉世,所以爆出未定義的錯(cuò)誤,使用bind后指定fun2的this是fun1的this婆硬,也就是當(dāng)前作用域中的this(plugin)狠轻,所以不會(huì)報(bào)錯(cuò);
之后說下: 原生js中封裝插件彬犯,或者分裝大方法對(duì)象向楼,經(jīng)常這么使用bind,總有一天你會(huì)碰到谐区;
所以bind用在回調(diào)方法上湖蜕,并且回調(diào)中使用了this;因?yàn)閎ind會(huì)返回一個(gè)新的方法卢佣;而apply重荠,call并不會(huì)箭阶,所以這也是bind與其他兩個(gè)的區(qū)別虚茶,另外上邊 this.fun2.bind(this)和this.fun2.bind()效果一樣,bind參數(shù)為空時(shí)會(huì)把當(dāng)前作用域的this作為第一個(gè)參數(shù)仇参;
再看看call和apply的區(qū)別:
作用一樣嘹叫,只是傳參數(shù)的形式不一樣,call參數(shù)逐個(gè)傳入诈乒,apply參數(shù)放在一個(gè)數(shù)組中傳入罩扇;第一個(gè)參數(shù)都是需要指向的this;