class类的this指向

阿正ºº⁷

已于 2022-03-10 11:38:24 修改

阅读量1.6k

点赞数 2

文章标签： javascript 前端 typescript

于 2022-03-10 11:11:06 首次发布

本文链接：https://blog.csdn.net/weixin_45526332/article/details/123396372

版权

本文探讨了JavaScript类方法中this的指向问题，当类方法被赋值给变量再调用时，this会指向window导致为undefined。解决方法是使用bind()函数来绑定this到实例对象，确保在调用时this正确指向。示例代码中展示了如何通过bind()修复这个问题。

摘要由CSDN通过智能技术生成

一般情况下类中的this指向实例，类中方法实例调用的话，类方法中this就指向实例对象。

但是把类中的方法，赋值给变量之后再调用就相当于自调用了，就不是实例调用了。赋值方法this就是指向window,但是类中的方法是自动开启局部严格模式了，所以赋值方法this最终是undefined

例如下面代码中类方法ready，赋值给变量x，再x()调用，就是自调用，this就是undefined

解决：要想让x（）调用时this指向实例对象，只需在赋值是改变this指向就行。例如bind()

类方法(也就是p1实例原型对象)的方法 ready通过bind返回一个并且this是指向p1的新函数，赋值给x

x()调用自然this就是指向p1了

class Preson{
        constructor(name,age){
          this.name = name
          this.age = age
          console.log(this); // Preson {name: 'zhansan', age: 18}
        }
        speak(){
          console.log(this); // Preson {name: 'zhansan', age: 18}
        }
        ready(){
          console.log(this,'方法赋值给变量，相当于是自调用');
        }
      }
      const p1 = new Preson('zhansan',18)
      p1.speak()
      const x = p1.ready
      // const x = p1.ready.bind(p1) // 通过bind改变this指向实例就行  // Preson {name: 'zhansan', age: 18} 
      // 类方法(也就是p1实例原型对象)的方法 ready通过bind返回一个并且this是指向p1的新函数，赋值给x
      // x()调用自然this就是指向p1了
      console.log(x); // ƒ ready(){console.log(this,'方法赋值给变量，相当于是自调用');}
      x() // undefined  
      /* 
         const x = p1.ready  是把类方法ready赋值给 x ,此时x就是类ready方法
         x()  此步骤就是函数自调用，应该指向window，但是类的方法是局部自动开启严格模式，所以this是undefined
      
      */