React 组件中，当绑定dom事件时,为什么要绑定事件方法的this。this丢失

1,看如下代码，react render 中 

<button type="primary" onClick={

//表达式 中的this 指向组件， 通过 箭头函数将当前作用域 隐士丢失

this.handleButtonClick() }>提交</button>

handleButtonClick(){

console.log(this) // undefined

}

为什么是undefined 

因为当渲染到dom中是 这个事件的绑定直接指向了这个函数 （直接引用的是handleButtonClick函数本身），当响应事件时 handleButtonClick() 的执行作用域是 window,

又因为是严格模式所以是 undefined. 和如下代码的隐式丢失原理一样

function foo() { console.log( this.a ); }

var obj = { a: 2, foo: foo };

var bar = obj.foo; // 函数别名！ var a = "oops, global"; // a 是全局对象的属性

bar(); // "oops, global"

2解决方法，用箭头函数或在构造函数中强制绑定

 

3 this是函数被调用时放生的绑定 它指向什么完全取决于在那里被调用的。