Sintaks kelas Javascript dan mengikatnya dalam metode [duplikat]
Saya ingin memahami perbedaan mendasar antara cara kerja sintaks di bawah ini.
// 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>
Sementara sintaks 1 membutuhkan pengikatan eksplisit untuk ditentukan di dalam konstruktor. Namun, sepertinya dengan sintaks 2, itu tidak diperlukan. Bagaimana sintaks 2 dapat mencapai pengikatan secara otomatis?
Saya berasumsi pemahaman / sintaks ini dapat diperluas untuk kerangka kerja apa pun termasuk React, Angular, Ember, dll
Jawaban
Bidang kelas - yaitu, properti yang didefinisikan langsung di dalam badan kelas - pada dasarnya hanyalah gula sintaks untuk hal yang sama di dalam konstruktor. Jadi ini:
class Something {
handleClick = () => {
console.log('this is:', this)
}
}
adalah, desugared:
class Something {
constructor() {
this.handleClick = () => {
console.log('this is:', this)
};
}
}
Dengan sugaring dihapus, harus jelas apa yang terjadi - fungsi panah berarti this
mengacu pada apa yang this
ada di konstruktor, yang merupakan instance itu sendiri, tidak perlu pengikatan.
Ini bukan hanya React atau framework - ini adalah aturan standar dalam vanilla JavaScript.
Jika Anda tidak mengikat metode atau menggunakan fungsi panah atau semacamnya, maka:
<button onClick={this.handleClick}>
gagal karena alasan yang sama
someButton.addEventListener('click', myObj.someFn)
juga akan gagal memanggil someFn
dengan konteks panggilan myObj
- yang diketahui browser hanyalah memanggil callback yang diteruskan ke click listener; konteks panggilan myObj
hilang ketika diteruskan seperti itu.