猫说

this小结

2020/07/22 javascript

浅谈一哈this，包括vue、react里的this

1、普通js中的this

在js里面，this表示当前对象的一个引用，它会随着执行环境的改变而改变，通常来说就是，谁调用的，this就是谁，没人调用就是window

大致如下：

  1. 在方法中，this表示改方法所属的对象。
  2. 在函数中，单独使用指向的是全局对象。
  3. 在构造函数中，谁new这个函数就是谁。
  4. 在事件中，this表示接收事件的元素。
  5. call()\apply()\bind()方法可以将this绑定到你想绑定的对象身上。
  6. 箭头函数内部是没有this的，或者说是外部this穿透进来的，在箭头函数使用的this是父级作用域的this。

2、vue中的this

其实vue的this无非就还是js的this那一套。只不过vue的this都是指向当前vue实例。

2.1 事件里面的函数里面的this

export default {
  data(){
    return {
      ccc: 1
    }
  },
  methods: {
    test(){
      console.log(this.ccc);
      function a(){
        console.log(this.ccc);
      }
    }
  }
}

如上例子，在第一个console就可以打印出ccc的值，在函数里面就找不到this.ccc，因为当前的this指向的是全局，而不是当前vue实例，调整为箭头函数即可。

3、react中的this

react中的this问题主要就弄明白一点：为什么在react类组件中需要为时间处理程序绑定this。

如下代码

 <button type="button" onClick={this.handleClick}>按钮</button>

运行这个代码会发现控制台打印的是undefined，会发现已经丢失了this。

问题是什么呢？问题根源其实是js，react类声明和原型方法编译后的代码都是以严格模式执行的，我们在调用的时候传入了this不假，但是我们没有为这个this绑定作用域，而不绑定的结果就是this指向了全局，而在严格模式下，指向全局的this是undefined，这就是为什么需要绑定this的原因。

解决办法是什么呢：两种，官方也给说了。

handleClick = (e) => {
  console.log(e); 
}

<button type="button" onClick={this.handleClick}>按钮</button>

// 或者
handleClick(e){
  console.log(e);
}
<button type="button" onClick={(e) => this.handleClick(e)}>按钮</button>

Search

    Table of Contents