Javascript-Klassensyntax und Bindung dieser in Methoden [Duplikat]

Dec 09 2020

Ich wollte den grundlegenden Unterschied zwischen der Funktionsweise der folgenden Syntax verstehen.

// 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>

Während Syntax 1 eine explizite Bindung benötigt, die im Konstruktor angegeben werden muss. Bei Syntax 2 scheint dies jedoch nicht erforderlich zu sein. Wie kann Syntax 2 die Bindung automatisch erreichen?

Ich gehe davon aus, dass dieses Verständnis / diese Syntax für jedes Framework erweitert werden kann, einschließlich React, Angular, Ember usw.

Antworten

1 CertainPerformance Dec 09 2020 at 11:52

Klassenfelder - dh Eigenschaften, die direkt im Klassenkörper definiert sind - sind im Wesentlichen nur Syntaxzucker für dasselbe im Konstruktor. Also das:

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

ist, desugared:

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

Wenn das Zuckern entfernt ist, sollte klar sein, was los ist - die Pfeilfunktion bedeutet, dass sich das thisauf das bezieht, was thissich im Konstruktor befindet, der die Instanz selbst ist, ohne dass eine Bindung erforderlich ist.

Dies ist nicht nur eine Reaktion oder ein Framework - dies sind Standardregeln in Vanille-JavaScript.

Wenn Sie die Methode nicht binden oder keine Pfeilfunktion oder ähnliches verwenden, dann:

<button onClick={this.handleClick}>

scheitert aus dem gleichen Grund, dass

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

wird auch nicht someFnmit einem aufrufenden Kontext von anrufen myObj- alles, was der Browser weiß, ist, den an den Klick-Listener übergebenen Rückruf aufzurufen; Der aufrufende Kontext von myObjgeht verloren, wenn er so übergeben wird.