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是函数被调用时放生的绑定 它指向什么完全取决于在那里被调用的。