Question

我很好奇为什么 functionA 会返回错误，而 functionB 对“this”有正确的引用并且有效。差异的原因是什么？

class MyComponent extends Component {
  ...

  render() {
    return (
      <input ref="myInput" type="text" />
      <button onClick={this.functionA} />
      <button onClick={this.functionB} />
    );
  }
}

这会抛出错误“无法读取未定义的属性'refs'：

functionA() {
  const val = this.refs.myInput.value;
  console.log(val); 
}

虽然这正确显示了值：

functionB = () => {
  const val = this.refs.myInput.value;
  console.log(val); 
}

Answer 1

这两个函数之间的区别在于使用es6上添加的箭头表达式允许使用lexycal。

在箭头函数之前，每个新函数都定义了自己的this值，阻止您访问正确的值。常见的解决方法之一是在正确的上下文级别定义对此的引用，并在函数中使用它：

var that = this; //creating a reference to the this we will need in a function
that.refs.myInput.value; // in our function we refer to 'that' variable

箭头函数会捕获封闭上下文的this值，因此您在FunctionB中引用的值实际上取自＆＃34;正确的＆＃34;上下文。

了解更多信息请查看： https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

在JavaScript中，函数上下文是在调用函数时定义的，而不是在定义函数时定义的。

您将两个函数作为回调传递给其他组件。它们在被定义的对象之外被调用。因此，他们不会分享它的类背景。

这里有什么区别是functionB的定义。使用箭头函数将当前上下文绑定到基础函数。

您可以在此处阅读更多内容http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ ...如果您有兴趣，可以选择谷歌。

Answer 3

在传统函数声明中，即函数范围内的function关键字this引用函数所属的对象，如果没有托管对象则引用undefined。点是{{ 1}}形成一个与外界不同的新范围

在新的function语法中，有一个不同的故事。函数不来自新范围（与旧方式完全不同），而是它的范围与外部范围

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

这两个ES6函数如何以不同方式访问“this”？

3 个答案: