Sintaks kelas Javascript dan mengikatnya dalam metode [duplikat]

Dec 09 2020

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

1 CertainPerformance Dec 09 2020 at 11:52

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 thismengacu pada apa yang thisada 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 someFndengan konteks panggilan myObj- yang diketahui browser hanyalah memanggil callback yang diteruskan ke click listener; konteks panggilan myObjhilang ketika diteruskan seperti itu.