Bagaimanakah Fungsi Anak Panah Memudahkan Kaedah Kelas dalam ES6?

Anak Panah Berfungsi sebagai Kaedah Kelas dalam Kelas ES6

Dalam kelas ES6, anda boleh mentakrifkan kaedah kelas menggunakan fungsi anak panah. Pendekatan ini mempunyai beberapa faedah, termasuk:

• Fungsi anak panah terikat pada contoh kelas secara lalai, menghapuskan keperluan untuk pengikatan eksplisit.
• Fungsi ini memberikan ringkasan dan boleh dibaca sintaks.

Sintaks

Untuk menentukan kaedah kelas menggunakan fungsi anak panah, hanya berikan fungsi anak panah kepada sifat pada objek kelas. Walau bagaimanapun, tidak seperti sifat biasa, fungsi anak panah tidak memerlukan kata kunci ini sebelum anak panah.

Contohnya:

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

Skop

Fungsi anak panah terikat pada skop leksikal, yang bermaksud ia mewarisi skop objek kelas. Oleh itu, apabila menggunakan kaedah handleInputChange, konteks ini akan ditetapkan secara automatik kepada contoh kelas, memastikan skop yang betul.

Penggunaan

Anda boleh lulus kaedah kelas fungsi anak panah sebagai fungsi panggil balik tanpa perlu risau tentang pengikatan. Sebagai contoh, anda boleh menetapkan SomeClass.handleInputChange kepada setTimeout untuk menjadualkan panggilan fungsi dalam skop contoh kelas.

Konfigurasi

Perhatikan bahawa menggunakan anak panah berfungsi sebagai kelas kaedah ialah ciri percubaan dalam JavaScript. Untuk mendayakan ciri ini, anda mesti menetapkan pilihan "percubaan" kepada benar dalam konfigurasi Babel anda. Anda boleh mencapai ini dengan memasang pemalam transform-class-properties Babel.

Sintaks untuk konfigurasi pemalam Babel adalah seperti berikut:

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

Dengan memanfaatkan fungsi anak panah sebagai kaedah kelas, anda boleh memperkemas kod anda dan meningkatkan kebolehbacaan sambil memastikan skop yang betul untuk fungsi panggil balik.

Atas ialah kandungan terperinci Bagaimanakah Fungsi Anak Panah Memudahkan Kaedah Kelas dalam ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!