Что делает this.handleClick на левой стороне знака =?

Question

Я не совсем понимаю, как this используется в конструкторе ES6.

Сначала я понял следующее (см. Пример ниже): - Мы используем this.height = height;, чтобы добавить новый instance variable.
- Добавление нового метода экземпляра с использованием className() {...} и добавление статического класса с использованием static className() {...}.
- Использование this для ссылки на метод экземпляра, такой как this.calcArea() в получателе ниже.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {   // Getter
    return this.calcArea();
  }
  calcArea() {
    return this.height * this.width;
  }
  static staticMethod() {
    return 'static method has been called.';
  }
}

Тем не менее, когда я увидел приведенный ниже пример React, this.handleClick = this.handleClick.bind(this); в Ин-7 озадачил меня. Я понял this.handleClick.bind(this);. У меня есть сомнения в том, что this.handleClick находится на стороне LEFT знака =. this.handleClick выглядит так, как будто он создает instance variable с именем handleClick. Я смотрю на это так, как б / с this.height = height; в предыдущем примере.

Мой вопрос: моя мысль не так? или кто-нибудь может объяснить, что делает this.handleClick на стороне LEFT знака =?

Answer 1

Используется для привязки функции к экземпляру компонента. Проверьте это здесь . Используется для функций ES5. Если вы используете функции ES6, вам не нужно использовать find.

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this); // need binding for es5
  }

  handleClick() {
    console.log('Click happened');
  }

  handleClick2 = () => {
    console.log('click happened (es6)');
  }

  render() {
    return (
       <div>
         <button onClick={this.handleClick}>Click Me</button>
         <button onClick={this.handleClick2}>Click Me 2</button>
       </div>
    );
  }
}

Примечание: ключевое слово this используется для присвоения значений экземпляру объекта в случае базового класса javascript. Точно так же он используется для класса реакции.