Sintassi della classe Javascript e associazione nei metodi [duplicato]

Question

Volevo capire la differenza fondamentale tra il funzionamento della sintassi seguente.

// Syntax 1
class Component extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...
  }
}

// Syntax 2

handleClick = () => {
  console.log('this is:', this)
}
<button onClick={this.handleClick}>
  {'Click me'}
</button>

Mentre la sintassi 1 necessita di un'associazione esplicita da specificare all'interno del costruttore. Tuttavia, sembra che con la sintassi 2 non sia necessario. In che modo la sintassi 2 è in grado di ottenere l'associazione automaticamente?

Presumo che questa comprensione / sintassi possa essere estesa a qualsiasi framework inclusi React, Angular, Ember, ecc

Answer 1

I campi di classe, ovvero le proprietà definite direttamente all'interno del corpo della classe, sono essenzialmente solo zucchero di sintassi per la stessa cosa all'interno del costruttore. Così questo:

class Something {
  handleClick = () => {
    console.log('this is:', this)
  }
}

è, desugared:

class Something {
  constructor() {
    this.handleClick = () => {
      console.log('this is:', this)
    };
  }
}

Una volta rimosso lo zuccheraggio, dovrebbe essere chiaro cosa sta succedendo: la funzione freccia significa che si thisriferisce a ciò che thisè nel costruttore, che è l'istanza stessa, non è necessario alcun legame.

Questa non è solo una cosa React o framework: queste sono regole standard in JavaScript vanilla.

Se non vincoli il metodo o usi una funzione freccia o qualcosa del genere, allora:

<button onClick={this.handleClick}>

fallisce per lo stesso motivo

someButton.addEventListener('click', myObj.someFn)

inoltre non riuscirà a chiamare someFncon un contesto di chiamata di myObj: tutto ciò che il browser sa è chiamare la richiamata passata al click listener; il contesto di chiamata di myObjsi perde quando viene passato in questo modo.