为什么在es6在这种情况下不需要bind this

Question

这种情况为什么不需要bind this？

class ArticleForm extends React.Component {
  // ...
  onCancelImageDialog = () => {
    this.setState({
      imageDialogOpen: false
    })
  }

  render() {
    return <Child onClick={this.onCancelImageDialog} />
  }
}

这种情况需要

class ArticleForm extends React.Component {
  // ...
  onCancelImageDialog() {
    this.setState({
      imageDialogOpen: false
    })
  }
  render() {
    return <Child onClick={this.onCancelImageDialog.bind(this)} />
  }
}

Answer 1

()=>{} 这种形式的代码，语法规定就是(function(){}).bind(this),即自动添加了bind this

Answer 2

arrow function自己没有this，和(function(){}).bind(this)是不等价的。

ECMA-262 v6.0文档：14.2.16 Runtime Semantics: Evaluation：

翻译：Arrow Function不定义arguemnts、supers、this、new.target的局部绑定，对它们的引用都在词法作用域内解析。

Answer 3

箭头函数没有自己的 this 值，所以箭头函数中引用的 this 和外部一致，不需要 let that = this。