javascript - 在反应绑定中，“这个”指的是什么？(in react bind what does 'this' refer to?)

Question

In the following example I'm trying to better understand the bind method.

(在下面的示例中，我试图更好地理解bind方法。)

Specifically, what do the two instances of 'this' refer to and why do we need the second one?

(具体来说，“ this”的两个实例指的是什么，为什么我们需要第二个实例？)

Also, why don't I need to include 'this' in the callback:

(另外，为什么我不需要在回调中包含“ this”：)

UPDATE:

(更新：)

I understand now that they both refer to FontChooser but why do we want to bind FontChooser.checkbox to FontChooser?

(现在我知道它们都引用了FontChooser，但是为什么我们要将FontChooser.checkbox绑定到FontChooser？)

Isn't that redundant?

(那不是多余的吗？)

or in other words if 'this' refers to the class why do we need to bind a class callback (this.checkbox) to the class (this.checkbox.bind(this))?

(或者换句话说，如果“ this”是指类，为什么我们需要将类回调（this.checkbox）绑定到类（this.checkbox.bind（this））？)

It's almost like we are binding a specific instance back to the class callback but (a) where are we creating the specific instance and (b) shouldn't the specific instance already have the class callback

(几乎就像我们将特定实例绑定回类回调一样，但是（a）我们在哪里创建特定实例，并且（b）特定实例不应该已经具有类回调)

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

  ask by DCR translate from so

Answer 1

In javascript, the this keyword points to a different object depending on the context it was executed in. When using a function in the JSX 'template', the function is not executed within your class, but in some other context in React.

(在javascript中， this关键字根据执行它的上下文指向一个不同的对象。在JSX'template'中使用函数时，该函数不在您的类中执行，而是在React中的其他上下文中执行。)

As a consequence, whatever this refers to, is changed.

(因此，无论this指的是被改变。)

One was to work around this, is using the bind() method.

(一种解决方法是使用bind()方法。)

This method will replace whatever function it is used on, and replace whatever the this keyword points to, to a new location you provided.

(此方法将替换其使用的任何功能，并将this关键字指向的所有内容替换为您提供的新位置。)

In your example, you're using this.displayButtons.bind(this) .

(在您的示例中，您正在使用this.displayButtons.bind(this) 。)

Here, this refers to this class ( FontChooser ), and will make sure that this will point to that class regardless of the execution context.

(在这里， this引用了该类（ FontChooser ），并将确保无论该类的执行上下文如何， this都将指向该类。)

Take a look at the MDN documentation, there are also easy to understand examples.

(看一下MDN文档，还有一些易于理解的示例。)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)