引入:绑定事件,咱们个别怎么写?
在react开发中绑定事件,咱们往往用这种形式:
此时咱们发现,this指向了组件实例,合乎咱们的预期。
去掉bind this会如何?
能够看到,this指向了window
为什么会这样?
首先要晓得,JSX语法实际上是createElement的语法糖
<div>Hello, { this.props.name }</div>等价于React.createElement( ‘div’,null, `Hello,${this.props.name}` )
createElement伪代码
function createElement(dom, params) { var domObj = document.createElement(dom); domObj.onclick = params.onclick; domObj.innerHTML = params.conent; return domObj}
能够看到,咱们的自定义组件类中onclick绑定的事件,是作为回调函数绑定到domObj.onclick上的。
onclick事件触发
当浏览器监听到onclick事件,则调用回调函数,此时的this就指向了window
bind this的原理
new关键字
在应用new关键字时,构造函数(即class)中的this都会强制赋值为新的对象。
应用bind将this的值绑定在函数中
箭头函数形式
为什么箭头函数形式不须要bind this
- 箭头函数内没有this,默认用父级作用域的this。
- 当应用new关键字时,this指向新对象,同时箭头函数中的this也被赋值为了新对象且永远不会更改指向。
- 等价于如下模式
//在构造函数内:let _this = thisfuntion fn(){ console.log(_this)}