《 call、apply、bind 》

call、apply、bind 的用法和区别

一 直接上代码吧

举个栗子1😀

var name='小啊giao',age=18;
   let obj={
   name:'奥里给',
   objAge:this.age,
   myFun:function(){
       console.log(this.name+" 年龄 "+this.age);

   }
}
obj.objAge; // 18
obj.myFun(); // 奥里给 年龄 undefined
(// 不知道为什么同时用let声明 name 和 obj 在调用obj.objAge的时候是个underfund//)

举个栗子2😊

var fav= "泰罗";
  function shows(){
   console.log( this.fav+"飞踢")
}
shows(); //泰罗飞踢

从上面两个例子中能看到两者 this 之间的区别，第一个例子中 this 指向的 obj ，第二个例子中 this 指向的是一个全局声明，this 是 window.

二 call()、apply()、bind() 都是用来重新定义 this 这个对象的！

 let name='小啊giao',age=18;
   let obj={
   name:'奥里给',
   objAge:this.age,
   myFun:function(){
       console.log(this.name+" Q "+this.ult );

   }
}
let db = {
   name:'亚索',
   ult:'哈噻~'
}
obj.myFun.call(db); // 亚索 Q 哈噻
obj.myFun.apply(db); //  亚索 Q 哈噻
obj.myFun.bind(db)();// 亚索 Q 哈噻

上面这个例子中除了 bind 多了一个 () 之外，返回结果都一样，这里 bind 返回的是一个新的函数，需要调用后才会执行. 当然 .call .apply .bind 的操作中都把 this 定义到了 db 中.

三 对比 call bind apply 的传参情况

举个栗子3 😊

let name='小啊giao',age=18;
   let obj={
   name:'奥里给',
   objAge:this.age,
   myFun:function(fm,t){
       console.log(this.name+" Q "+this.ult," 来自 "+ fm + " 去往 " + t );

   }
}
let db = {
   name:'亚索',
   ult:'哈噻~'
}

obj.myFun.call(db,'召唤师峡谷','送人头'); // 亚索 Q 哈噻~  来自 召唤师峡谷 去往 送人头
obj.myFun.apply(db,['召唤师峡谷','送人头']); //亚索 Q 哈噻~  来自 召唤师峡谷 去往 送人头
obj.myFun.bind(db,'召唤师峡谷','送人头')(); // 亚索 Q 哈噻~  来自 召唤师峡谷 去往 送人头

从上面的三个结果中可以看出

• call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，而第二个参数就有了些许变化，
• call 参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'召唤师峡谷', ... ,'string' );
• apply 所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['召唤师峡谷', ..., 'string' ]);
• bind 是函数以外，它 的参数和call 一样。 当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

本文参考了这里这里这里,感觉理解比较简单容易，作为自己学习的记录，有问题请指正..