react事件繫結this的原因

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

this永遠指向最後呼叫它的那個物件

var name='windowname';

function
a()a();
//windowname ; this永遠指向最後呼叫它的物件。window.a()
var name='windowname';
var obj=  
}obj.fun1();
//objname : this永遠指向最後呼叫它的物件

2.在react事件中繫結this，來使事件的this指向當前元件，避免this的丟失

var name='windowname';

var obj=
}var fn =obj.fun;
fn();
//windowname  這裡只是將obj.fun賦值給乙個變數。但是沒有呼叫。this永遠指向最後呼叫它的物件。這裡還是通過window.fn();
//bind的複習
//bind() 方法建立乙個新的函式，在 bind() 被呼叫時，這個新函式的 this 被指定為 bind() 的第乙個引數，而其餘引數將作為新函式的引數，供呼叫時使用。
var a =
}var b =a.fn;
b.bind(a,1,2)()//
將b的this指向a，然後在呼叫bind()方法建立的函式
//react中
this.handleclick}>繫結this
//這個時候onclick就當於乙個變數，它指向window。你直接呼叫handleclick去做一些操作的時候,比如this.setstate({})；這個時候this指向就會報錯。所以我們需要給react事件繫結this來方式this的丟失
//第一種是使用bind
this.handleclick.bind(this)}>繫結this
//通過bind()來把this指向的當前的元件
handleclick(){}
//使用箭頭函式
this.handleclick}>繫結this
handleclick=()=>{};//
es6 的箭頭函式是可以避免 es5 中使用 this 的坑的。箭頭函式的 this 始終指向函式定義時的 this，而非執行時。，箭頭函式需要記著這句話：「箭頭函式中沒有 this 繫結，必須通過查詢作用域鏈來決定其值，如果箭頭函式被非箭頭函式包含，則 this 繫結的是最近一層非箭頭函式的 this，否則，this 為 undefined」。

參考文獻：

React 事件繫結

一 class方式定義元件事件繫結的幾種方法 一 在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二 在呼叫的時候使用bind去繫結this 1 ...

React 事件繫結

一 class方式定義元件事件繫結的幾種方法 一 在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二 在呼叫的時候使用bind去繫結this 1 ...

React事件繫結總結

需要繫結的原因 事件繫結目的，就是事件的作用域的轉移。問題是，react生成出來的元件，this還不能指向自身嗎？this.plus plus plus函式上的this，是事件響應時的上下文 window 並不是當前元件例項！先來看看bind方法的定義 bind 方法建立乙個新的函式，當這個新函式被...