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