Bagaimanakah Kata Kunci `ini` Berkelakuan Berbeza dalam Fungsi Anak Panah ES6 Berbanding dengan Fungsi Tradisional?

Fungsi Anak Panah dan Ini

Dalam ES6, fungsi anak panah menawarkan sintaks ringkas untuk mentakrifkan fungsi. Walau bagaimanapun, tingkah laku mereka berbeza daripada fungsi tradisional dalam cara mereka mengendalikan kata kunci ini.

Pertimbangkan kod berikut:

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

Di sini, niatnya adalah untuk log "nama saya jason" apabila person.shout() dipanggil. Walau bagaimanapun, outputnya ialah "nama saya tidak ditentukan". Ini kerana fungsi anak panah tidak mempunyai pengikatan ini sendiri. Sebaliknya, mereka mewarisi nilai ini daripada skop yang disertakan.

Dalam kes ini, skop yang disertakan ialah skop global, di mana ini merujuk kepada objek tetingkap. Memandangkan objek tetingkap tidak mempunyai sifat nama, ungkapan this.name dinilai kepada tidak ditentukan.

Untuk menyelesaikan isu ini, anda boleh menggunakan fakta bahawa fungsi anak panah tidak mengikat perkara ini. Dengan meletakkan fungsi anak panah terus di dalam literal objek, anda boleh mewarisi nilai ini yang betul daripada objek:

var person = {
  name: "jason",
  shout: function() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

Sebagai alternatif, anda boleh menggunakan pengisytiharan kaedah ES6 tanpa kata kunci fungsi dan : sintaks:

var person = {
  name: "jason",
  shout() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

Dengan menggunakan teknik ini, anda boleh menggunakan ini dengan berkesan dalam fungsi anak panah dan mencapai output yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Kata Kunci `ini` Berkelakuan Berbeza dalam Fungsi Anak Panah ES6 Berbanding dengan Fungsi Tradisional?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!