js深入call、apply、bind的实例教程和区别分析总结

前言

call、apply、bind是js常用的使用指定对象强行调用其他对象方法的关键字；call表示强行调用一次；apply表示强行调用一次并打散数组参数；bind表示将原函数绑定某变量并返回新的函数(永久绑定)，然后每次调用新的函数this都执行绑定的对象。
通俗点总结，就是强行使某个方法里面的this等于调用该方法时传入的第一个参数！

call

function User(name){
  this.name=name;
  this.printName=function(){
    console.log(this.name);
  }
}
let user1=new User('ls');
let user2={
  name:'zl'
}

user1.printName()
//'ls' 默认this是调用方法的对象
user1.printName.call(user2)
//'zl' call强行传入user2作为方法里面的this

apply

function Score(math,english){
  this.math=math;
  this.english=english;
  this.sum=function(...args){
    return this.math+this.english+args.reduce((prev,item)=>prev+item)
  }
}

let xiaoMing=new Score(1,2);
let xiaoHong={
  math:5,
  english:7
}
xiaoMing.sum(1, 2) 
//6=1+2+1+2
xiaoMing.sum.apply(xiaoHong,[1, 2])
//10=3+4+1+2  
//apply不仅可以像call一样强行绑定传入的第一个参数为方法内this,还可以打散数组成单个的参数
xiaoMing.sum.call(xiaoHong,...[1, 2])
//10=3+4+1+2
//es6的展开运算符"..."也具有打散数组的功能，所以apply可以用call+"..."替换 

bind

function Score(math,english){
  this.math=math;
  this.english=english;
  this.sum=function(...args){
    return this.math+this.english+args.reduce((prev,item)=>prev+item)
  }
}

let xiaoMing=new Score(1,2);
let xiaoHong={
  math:3,
  english:4
}
xiaoMing.sum(1, 2) //6=1+2+1+2
let xiaoHongSum=xiaoMing.sum.bind(xiaoHong); 
//绑定一个对象做为该方法的this并返回一个新的函数
console.log(xiaoHongSum(1,2));
//10=3+4+1+2 
//每次使用不再需要重复绑定
//被bind绑定的函数，无法再用call、apply修改this 

总结

• 1.只需要强行调用一次用call
• 2.只需要强行调用一次并需要打散数组参数用apply
• 3.需要强行调用多次用bind 生成新函数永久调用
• 4.被bind绑定的函数，无法再用call、apply修改this

(ps:如有错误,欢迎留言指正!如有问题,欢迎交流!)