Как теряется контекст в классовых компонентах, и как помогает bind?

Question

[Rapen]

Сильно ударяюсь об эти камушки подводные, зачем биндим методы в JSX и конструкторе.
this.method = method.bind(this);
Помогите объяснить детально пожалуйста:)

Answer 1

[Антон Мудренок]

Внутри функции может потеряться контекст в зависимости от того, как она вызвана.

// вызов
obj.foo();
// и вызов
const bar =  obj.foo;
bar();
// оба вызывают foo, но во втором случае this внутри foo будет привязан не к obj, 
// а к глобальному объекту

Таким образом, если мы хотим передать функцию куда-то с определенным контекстом, нам ее надо привязывать. Второй момент, что класс это просто синтаксический сахар, а на самом деле это просто функция, к которой this не привязывается. Таким образом, внутри класса, метод не будет понимать куда вы обращаетесь без привязки.

Answer 2

[KnightForce]

Если используешь метод внутри класса - то не нужно.

class Div extends Component {
  constructor(props) {
    super(props);
    this.props=props;
  }

  showAlert(value) {
      alert(value);
  }

  render() {
      this.showAlert(1);
    return (
      <div>

      </div>
    );
  }
}

Все будет норм.
Но если ты будешь передавать какой-то метод в обработчик или в дочерний компонент, то произойдет следующее:
this - текущий контекст - класс в котором объявлен.
Далее button (это хоть и простой jsx, но все же компонент) - внутри себя вызывает this.имяМетода - this уже сменился.
Вот пример:

class Div extends Component {
  constructor(props) {
    super(props);
    this.props=props;
  }

  showEvent(e) {
      alert(e);
  }

  render() {
      this.showAlert(1);
    return (
      <div>
          <button onClick={this.showEvent}></button>
      </div>
    );
  }
}

this - определяется в момент вызова.
Чтобы все было ок, есть следующие пути привязки контекста:
1)var self = this - сохранение в переменную.
2)apply - вызов метода с явной передачей контекста.
3)bind(some) - привязка контекста. Говорит функции что использовать в качестве контекста, потом изменить контекст нельзя.
4)()=>{} - стрелочная функция, которая в отличие от function(){} - определяет контекст не в момент вызова, а в момент объявления.

Используется фиксированный контекст и метод вызывается используя то что нужно, а не пытается вызваться от другого объекта.

Comments

[Rapen]

то есть каждый jsx имеет свой контекст?

[Rapen]

и передавая в атрибут onClick, функция ведь вызывается в обработчике, а там уже window, получается из-за этого и теряется контекст?

[KnightForce]

Rapen:
jsx это синтаксис.
На выходе объект JavaScript.
Проверил - undefined.

[KnightForce]

Rapen, на jsx можешь посмотреть как на то как ты пишешь. Как синтаксис.
В итоге каждый jsx компонент транспайтится в функцию. А у функции есть this.)