react事件绑定this的原因

1.首先是js本身特性决定的

this永远指向最后调用它的那个对象

var name='windowName';
function a(){ 
  var name ='objName';   
  console.log(this.name)
}
a();//windowName ; this永远指向最后调用它的对象。window.a()




var name='windowName';
var obj={
  name:'objName',
  fun1:function(){
     console.log(this.name)
  }  
}
obj.fun1();//objName : this永远指向最后调用它的对象

2.在react事件中绑定this，来使事件的this指向当前组件，避免this的丢失

var name='windowName';
var obj={
  name:'objName',
  fun:function(){
   console.log(this.name)
  }
}
var fn = obj.fun;
fn();//windowName  这里只是将obj.fun赋值给一个变量。但是没有调用。this永远指向最后调用它的对象。这里还是通过window.fn();
//bind的复习
//bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
var a ={
        name : "Cherry",
        fn : function (a,b) {
            console.log( a + b)
        }
    }

    var b = a.fn;
    b.bind(a,1,2)()//将b的this指向a，然后在调用bind()方法创建的函数



//react中
<Button   onClick={this.handleClick}>绑定this</Button>
//这个时候onClick就当于一个变量，它指向window。你直接调用handleClick去做一些操作的时候,比如this.setState({})；这个时候this指向就会报错。所以我们需要给react事件绑定this来方式this的丢失
//第一种是使用bind
<Button   onClick={this.handleClick.bind(this)}>绑定this</Button>
//通过bind()来把this指向的当前的组件
handleClick(){}
//使用箭头函数
<Button   onClick={this.handleClick}>绑定this</Button>
handleClick=()=>{};//ES6 的箭头函数是可以避免 ES5 中使用 this 的坑的。箭头函数的 this 始终指向函数定义时的 this，而非执行时。，箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

参考文献：https://juejin.im/post/59bfe84351882531b730bac2#heading-2

https://my.oschina.net/shuaihong/blog/2990055

react事件绑定this的原因

猜你喜欢