Fungsi anak panah vs fungsi biasa dalam JavaScript. Yang mana satu untuk digunakan?

JavaScript memberi kita dua cara utama untuk mentakrifkan fungsi: fungsi anak panah dan fungsi biasa. Walaupun ia mungkin kelihatan serupa pada pandangan pertama, terdapat beberapa perbezaan utama yang boleh memberi kesan kepada cara kod anda berjalan dan cara anda menstrukturnya. Mari pecahkan perbezaan ini supaya anda lebih memahami masa untuk menggunakan setiap jenis.

Perbezaan sintaks

Fungsi anak panah lebih pendek dan menggunakan => simbol. Begini rupa mereka berbanding dengan fungsi biasa:

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Dengan fungsi anak panah, anda boleh melangkau kata kunci pulangan jika anda mengembalikan satu ungkapan. Ini menjadikan fungsi anak panah popular untuk fungsi yang lebih pendek dan ringkas.

mengikat ini

Dalam fungsi biasa, ini merujuk kepada objek yang memanggil fungsi tersebut. Walau bagaimanapun, fungsi anak panah tidak mempunyai konteks ini sendiri. Sebaliknya, mereka mewarisi ini daripada kod sekeliling yang ditakrifkan.

Berikut ialah contoh untuk menunjukkan cara perbezaan ini mempengaruhi tingkah laku:

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

Ini mungkin berguna apabila anda menyampaikan fungsi kepada pendengar acara, lihat:

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

objek hujah

Fungsi biasa mempunyai akses kepada objek argumen, yang menyimpan semua argumen yang dihantar ke fungsi. Fungsi anak panah tidak mempunyai ini; mereka menggunakan parameter rehat ...args sebaliknya.

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

Penggunaan dalam panggilan balik

Fungsi anak panah boleh memudahkan kod anda, terutamanya apabila berurusan dengan perkara yang memerlukan callbaks - contohnya janji atau kaedah tatasusunan seperti .map() dan .filter().

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

Bila hendak menggunakan fungsi anak panah vs fungsi biasa

Secara amnya, fungsi anak panah berfungsi dengan baik untuk:

• Fungsi ringkas dan padat seperti dalam kaedah tatasusunan atau panggil balik
• Situasi di mana ini harus kekal konsisten, seperti dalam kaedah kelas atau penutupan

Fungsi biasa berguna apabila:

• Anda memerlukan pengikatan ini yang khusus, seperti dalam kaedah objek atau pendengar acara
• Anda mahu menggunakan objek argumen tanpa menentukan parameter rehat

Mari kita perhatikan sesuatu yang menarik di sini. Seperti yang anda lihat, perbezaannya agak halus. Dalam kebanyakan kes, tidak kira yang mana satu yang anda pilih, melainkan asas kod anda menggunakan banyak perkara ini atau hujah (tidak mungkin).

Intinya ialah pilih sahaja mana-mana yang anda suka, cuma konsisten dalam projek anda.

Adakah anda bersetuju dengan pendekatan ini?

Atas ialah kandungan terperinci Fungsi anak panah vs fungsi biasa dalam JavaScript. Yang mana satu untuk digunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!