Bolehkah Arrow Functions Mengikat Kaedah Kelas Secara Kekal dalam ES6?

Cara Mengikat Fungsi Kelas Secara Kekal Menggunakan Fungsi Anak Panah dalam Kelas ES6

Kelas ES6 menyediakan cara yang lebih ringkas untuk menulis kod JavaScript berorientasikan objek . Walau bagaimanapun, apabila ia datang untuk mentakrifkan kaedah kelas, pembangun mungkin tertanya-tanya sama ada mungkin untuk mengikat kaedah secara kekal pada tika kelas menggunakan fungsi anak panah, sama seperti apa yang boleh dilakukan dengan CoffeeScript.

Masalah:

Secara tradisinya, kaedah kelas terikat pada contoh menggunakan kaedah bind() dalam pembina. Walau bagaimanapun, menggunakan fungsi anak panah memperkenalkan perbezaan sintaksis yang memerlukan pendekatan yang diubah suai.

Sintaks:

Untuk mengikat fungsi kelas sebagai kaedah contoh kelas menggunakan fungsi anak panah, sintaks berikut boleh digunakan:

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

Perhatikan perbezaan:

Berbanding dengan pendekatan tradisional, fungsi anak panah memerlukan tanda sama (=) selepas nama sifat.

Ciri Eksperimen:

Ciri ini pada masa ini dianggap sebagai percubaan di Babel. Untuk menggunakannya, pemalam transform-class-properties mesti didayakan. Ini boleh dilakukan dengan menambahkannya pada bahagian pemalam fail konfigurasi Babel:

{
  "plugins": [
    "transform-class-properties"
  ]
}

Contoh Penggunaan:

Setelah ciri didayakan, pembangun boleh lulus kaedah kelas sebagai fungsi panggil balik dan ia akan diskop kepada contoh kelas, bukannya objek tetingkap. Sebagai contoh, kod berikut akan log nilai 'val' dari dalam contoh SomeClass:

setTimeout(SomeClass.handleInputChange, 1000, 'foo');

Kesimpulan:

Dengan memanfaatkan fungsi anak panah dan mendayakan pemalam transform-class-properties, pembangun boleh mengikat kaedah kelas secara kekal kepada kejadian kelas. Pendekatan ini memudahkan proses pengikatan dan menyediakan sintaks yang ringkas dan konsisten untuk mentakrifkan kaedah kelas dalam ES6.

Atas ialah kandungan terperinci Bolehkah Arrow Functions Mengikat Kaedah Kelas Secara Kekal dalam ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!