Bagaimanakah Fungsi Anak Panah Mengendalikan Kata Kunci `ini` dalam JavaScript?

Fungsi Anak panah dan 'ini'

Dalam ES6, fungsi anak panah memperkenalkan pendekatan baharu kepada definisi kaedah. Walau bagaimanapun, terdapat perbezaan ketara antara fungsi anak panah dan fungsi tradisional apabila ia datang untuk mengakses kata kunci 'ini'.

Isunya:

Pertimbangkan kod berikut:

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

Walaupun hasil yang dimaksudkan ialah mencetak "nama saya jason," konsol hanya mengeluarkan "nama saya." Ini kerana fungsi anak panah berkelakuan berbeza daripada fungsi tradisional dari segi pengikatan 'ini'.

Penjelasan:

Tidak seperti fungsi tradisional, fungsi anak panah tidak mengikat ' kata kunci ini kepada skop yang mengandungi. Sebaliknya, mereka mewarisi ikatan 'ini' dari konteks sekeliling. Dalam contoh di atas, 'ini' dalam fungsi anak panah merujuk kepada objek global, bukan objek 'orang'.

Penyelesaian:

Terdapat beberapa cara untuk menangani isu ini:

1. Gunakan Bound Fungsi:

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

2. Gunakan Fungsi Tradisional:

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

3. Gunakan Kaedah ES6 Pengisytiharan:

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};

Dengan memahami gelagat berbeza fungsi anak panah berkenaan pengikatan 'ini', anda boleh menulis kod yang berkesan dan fleksibel dalam ES6.

Atas ialah kandungan terperinci Bagaimanakah Fungsi Anak Panah Mengendalikan Kata Kunci `ini` dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!