Mengapa `ini` Tidak Berfungsi Seperti Yang Dijangkakan dalam Fungsi Anak Panah ES6?

Fungsi Anak Panah dan ini

Apabila menggabungkan sifat dalam fungsi menggunakan ES6, isu timbul apabila cuba mengakses objek ini.

var person = {
  name: "jason",

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

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

Walau bagaimanapun, menjalankan kod ini gagal memasukkan nama yang dimaksudkan, hanya mencetak "nama saya." Masalah ini berpunca daripada tingkah laku unik fungsi anak panah.

Fungsi anak panah tidak terikat dengan ini, hujah atau nama khas lain. Apabila objek dicipta, ini terletak dalam skop yang disertakan, bukan dalam objek. Dengan meneliti kod dalam variasi ini, isu menjadi lebih jelas:

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

dan, apabila menterjemah kepada penghampiran samar-samar sintaks anak panah dalam ES5:

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

Dalam kedua-dua keadaan , ini untuk fungsi shout menunjuk kepada skop di mana orang ditakrifkan, bukan skop baharu yang dikaitkan dengan objek apabila ia ditambahkan pada orang.

Walaupun fungsi anak panah tidak dapat meniru tingkah laku yang dimaksudkan, ES6 menawarkan penyelesaian alternatif dengan menggunakan corak pengisytiharan kaedah untuk menjimatkan ruang:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leaving off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

Atas ialah kandungan terperinci Mengapa `ini` Tidak Berfungsi Seperti Yang Dijangkakan dalam Fungsi Anak Panah ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!