时间戳

首页 > 解决方案 > 我是否误解了 React 甚至 Javascript 中“this”的使用？

javascript - 我是否误解了 React 甚至 Javascript 中“this”的使用？

问题描述

关于这个主题已经有几个问题，我已经查看了我发现的所有问题 - 我的问题是为了为自己澄清一些我看到的（明显的）矛盾。我怀疑有比我现在唯一工作的解决方案更好的解决方案。我对 Javascript 很陌生。

我已经阅读this了例如https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this所描述的范围规则。我从阅读中的理解是，虽然很大程度上取决于调用上下文，但如果函数是对象的方法，那么函数内部this将是对象本身。我认为这条规则胜过其他规则，但也许我误解了。

我还阅读了https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480上的一篇文章，基本上说如果我想通过this, 和我有类似的代码

class App extends Component {
  constructor(props) {
    super(props);
  }
  clickFunction() {
    console.log(this.props.value);
  }
  render() {
    return(
      <div onClick={this.clickFunction}>Click Me!</div>
    );
  }
}

然后我需要clickFunction()通过向构造函数添加一行来显式绑定对象

this.clickFunction = this.clickFunction.bind(this);

或通过使用箭头符号来定义clickFunction()，例如

const clickFunction = () => { ... }

这些解决方案中的第一个对我有用 - 我没有第二个工作。对我来说我需要使用这两种解决方案似乎很奇怪，因为（a）它似乎与我认为的文档中的断言相矛盾，即对象方法会将对象视为this，并且（b）我没有看到人们在做我看到的其他教程示例中的这类事情。

例如，在https://reactjs.org/tutorial/tutorial.html上有一个 React 教程，它定义了对象方法renderSquare(i)，并且在任何时候都没有明确地将这些方法绑定到对象。

如果我尝试做一些在我看来与该教程完全相似的事情，并且没有显式地向构造函数添加行以将每个方法绑定到对象，即像这样的行this.clickFunction = this.clickFunction.bind(this)，那么我无法让我的代码工作。

谁能向我解释我对教程和文档的误解 - 为什么即使没有明确绑定到对象，教程仍然有效？我可以发现它和我自己的代码之间的唯一区别是我有use strict. 有比this.clickFunction.bind(this)我目前使用的解决方案更好的解决方案吗？为每个方法的构造函数添加一行额外的代码，以显式绑定我的所有方法，这似乎很笨拙。

标签： javascriptreactjs

解决方案

箭头函数将您的函数直接绑定到您的类。但是当你使用

const clickFunction = () => { ... }

这将创建一个内部函数，并且不会将其绑定到类。

您可以使用

clickFunction = () => { ... }

这将类似于

this.clickFunction = this.clickFunction.bind(this);

推荐阅读