在反应绑定中 'this' 指的是什么？

Question

在下面的示例中，我试图更好地理解绑定方法。具体来说，'this' 的两个实例指的是什么，为什么我们需要第二个实例？另外，为什么我不需要在回调中包含 'this'：

更新：

我现在明白了，它们都指的是 FontChooser，但为什么我们要将 FontChooser.checkbox 绑定到 FontChooser？那不是多余的吗？或者换句话说，如果 'this' 指的是 class 为什么我们需要将 class 回调 (this.checkbox) 绑定到 class (this.checkbox.bind(this))?

这几乎就像我们将特定实例绑定回 class 回调但是 (a) 我们在哪里创建特定实例以及 (b) 特定实例不应该已经有 class回调

class FontChooser extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hidden: true,
      checked: this.props.bold ? true : false
    };
  }

  displayButtons() {
    this.setState({
      hidden: !this.state.hidden
    });
  }

  checkbox() {
    //why not checkbox(this){
    this.setState({ checked: !this.state.checked });
  }

  render() {
    console.log(this.state);
    var weight = this.state.checked ? "bold" : "normal";

    return (
      <div>
        <input
          type="checkbox"
          id="boldCheckbox"
          hidden={this.state.hidden}
          checked={this.state.checked}
          onChange={this.checkbox.bind(this)}
        />
        <button id="decreaseButton" hidden={this.state.hidden}>
          {" "}
          -{" "}
        </button>
        <span id="fontSizeSpan" hidden={this.state.hidden}>
          {" "}
          {this.state.size}
        </span>
        <button id="increaseButton" hidden={this.state.hidden}>
          {" "}
          +{" "}
        </button>
        <span
          id="textSpan"
          style={{ fontWeight: weight, fontSize: this.state.size }}
          onClick={this.displayButtons.bind(this)}
        >
          {" "}
          {this.props.text}
        </span>
      </div>
    );
  }
}

Answer 1

在 javascript 中，this 关键字根据其执行的上下文指向不同的对象。在 JSX 'template' 中使用函数时，该函数不是在你的 class 中执行，但在 React 的其他上下文中执行。因此，无论 this 指的是什么，都会发生变化。

解决此问题的方法之一是使用 bind() 方法。此方法将替换它所使用的任何函数，并将 this 关键字指向的任何内容替换为您提供的新位置。

在您的示例中，您使用的是 this.displayButtons.bind(this)。这里，this 指的是这个 class (FontChooser)，并且将确保 this 将指向那个 class 而不管执行上下文如何。

看看MDN文档，里面也有通俗易懂的例子。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

在反应绑定中 'this' 指的是什么？

in react bind what does 'this' refer to?

javascript

bind

reactjs