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指向了全局,而在严格模式下,指向全局的thisundefined,这就是为什么需要绑定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