引入:绑定事件,咱们个别怎么写?

在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)}