Wiązanie "this" w React, komponent klasowy

Witam Wszystkich,

Mam problem ze zrozumieniem pewnego zagadnienia, związanego z przekazywaniem "this" do metody w klasie, poniżej kod:

class Counter extends React.Component {

  state = {
    count: 0,
  }

  handleFunction() {
      this.setState(prevState => ({
        count: prevState.count + 1,
      })) 
  }

  render() {
    console.log(this.state.count);
    return (
      <>
        <button onClick={this.handleFunction.bind(this)}>+</button>
        <button onClick={() => this.handleFunction()}>+</button>     
      </>
    )
  }
  
}

Moje pytanie jest związane z wywołaniem metody poprzez: this.handleFunction(). Dlaczego "this" zostaje przekazany do środka metody, skoro teoretycznie powinien stracić swoje wiązanie, wykonując kod "this.setState"?

Z góry dziękuję za pomoc.

addamos91 napisał(a):

Moje pytanie jest związane z wywołaniem metody poprzez: this.handleFunction(). Dlaczego "this" zostaje przekazany do środka metody, skoro teoretycznie powinien stracić swoje wiązanie, wykonując kod "this.setState"?

Nic nie powinien stracić, przecież na tym polega JS, że jak dasz foo.bar() to się wywoła metoda bar obiektu foo i metoda ta będzie miała this ustawione.

<button onClick={() => this.handleFunction()}>+</button>

czyli przekazujesz funkcję strzałkową, funkcja się odpala i w tej funkcji odpala się metoda obiektu, która powinna mieć przypisane this. Jak tutaj:

const foo = {bar() { console.log("this", this); } };
foo.bar();

jednak gdybyś miał tak:

<button onClick={this.handleFunction}>+</button>

to faktycznie by się traciło this, ponieważ podajesz funkcję this.handleFunction i później nie wiadomo jakie ma mieć this(chyba, że to funkcja, która została wcześniej "zbindowana"), ponieważ funkcja jest traktowana jako osobny obiekt, niezależny od tego, do jakiego obiektu należy.

jak tutaj:

'use strict';
const foo = {bar() { console.log("this", this); } };
const bar = foo.bar;
bar(); // this undefined

@LukeJL: Dzięki za wytłumaczenie!