JS绑定this的指向bind,apply,call

基础用法

bind

 const man = {
      name: '张三',
      sayName: function () {
        console.log('MyName:', this.name);
      },
      showMe:function(age,hoppy){
        console.log(`我是${this.name},今年${age}岁,喜欢${hoppy}。`);
      }
    }
    const name = '李四'
    const newSayName = man.sayName.bind(window)
    //第一个参数为this
    const newShowMe = man.showMe.bind(man,15)
    // 之后可以继续写参数作为函数的形参并且顺序优先与后续函数调用时传的参数
    newSayName()
    newShowMe('唱跳Rap')

结果

call

 const man = {
      name: '张三',
      sayName: function () {
        console.log('MyName:', this.name);
      },
      showMe:function(age,hoppy){
        console.log(`我是${this.name},今年${age}岁,喜欢${hoppy}。`);
      }
    }
    const name = '李四'
    man.sayName.call(window) // 第一个参数为this
    man.showMe.call(man,41,'唱跳Rap') // 之后的参数一次传递给函数的形参

结果

apply

 const man = {
      name: '张三',
      sayName: function () {
        console.log('MyName:', this.name);
      },
      showMe:function(age,hoppy){
        console.log(`我是${this.name},今年${age}岁,喜欢${hoppy}。`);
      }
    }
    const name = '李四'
    man.sayName.apply(window) 
    // 第一个参数为this指向
    man.showMe.apply(window,[41,'唱跳Rap']) 
    // 传参 第二个参数为数组，数组参数传递给函数的形参
    

结果

相同点

• 改变this指向
• 第一个参数都是this

不同点

• apply 和 call 都是直接执行函数，bind是返回一个新的函数再调用
• apply 给函数传参是数组
• call 给函数传参，是在this之后以逗号分割参数传递
• bind既可以在绑定时和this一起传递参数给函数，也可以在后续调用新函数时再传递参数给函数。其中，函数调用时，先从绑定时传入的参数中读取，后续才是新函数传递的参数