Apakah yang perlu anda perhatikan apabila menggunakan fungsi anak panah es6?

Nota: 1. Fungsi anak panah akan menukar titik ini dalam fungsi agar selaras dengan titik ini dalam skop unggul 2. Ia tidak boleh digunakan sebagai pembina, iaitu yang baharu arahan tidak boleh digunakan; 3. Tidak Objek argumen boleh digunakan 4. Perintah hasil tidak boleh digunakan dan tidak boleh digunakan sebagai fungsi Generator.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Dalam sintaks baharu es6, fungsi anak panah muncul.

ES6 membenarkan penggunaan "anak panah" (=>) untuk mentakrifkan fungsi.

		function fun(a){ return a; }
// ↓ 去掉 function 在 ( ) 和 { } 之间添加 => 
		var fun = (a) => { return a; }  
// ↓ 如果只有一个形参可省略 ( ) 如果一个形参都没有，必须加( )         
		var fun = a => { return a; }  
// ↓ 如果函数体只有一句话，可省略{ }，如果仅有的这句话还是 return， 则必须省略 return         
		var fun = a => a

Nota mengenai fungsi anak panah dalam ES6

(1) Fungsi anak panah akan menukar titik ini dalam fungsi agar konsisten dengan titik ini dalam skop peringkat atas

Objek ini dalam badan fungsi ialah objek di mana ia ditakrifkan, bukan objek di mana ia digunakan.

(2) tidak boleh digunakan sebagai pembina, iaitu arahan baru tidak boleh digunakan, jika tidak ralat akan dilemparkan.

(3) Objek argumen tidak boleh digunakan, kerana objek itu tidak wujud dalam badan fungsi. Jika anda ingin menggunakannya, anda boleh menggunakan parameter selebihnya.

(4) Perintah hasil tidak boleh digunakan, jadi fungsi anak panah tidak boleh digunakan sebagai fungsi Penjana.

Dari empat perkara di atas, perkara pertama amat perlu diberi perhatian. Penunjuk objek ini berubah-ubah, tetapi dalam fungsi anak panah, ia tetap.

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

Dalam kod di atas, parameter setTimeout ialah fungsi anak panah Takrif fungsi anak panah ini berkuat kuasa apabila fungsi foo dijana, dan pelaksanaan sebenar tidak akan menunggu sehingga 100. milisaat kemudian. Jika ia adalah fungsi biasa, ini harus menunjuk ke tetingkap objek global apabila dilaksanakan, dan 21 harus dikeluarkan pada masa ini. Walau bagaimanapun, fungsi anak panah menyebabkan ini sentiasa menunjuk ke objek di mana definisi fungsi berkuat kuasa (dalam kes ini, {id: 42}), jadi output ialah 42.
Fungsi anak panah membenarkan ini dalam setTimeout untuk terikat pada skop di mana ia ditakrifkan, dan bukannya menunjuk ke skop di mana ia dijalankan. Ini satu lagi contoh.

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

Dalam kod di atas, dua pemasa disediakan di dalam fungsi Pemasa, masing-masing menggunakan fungsi anak panah dan fungsi biasa. Yang ini dari yang pertama terikat pada skop di mana ia ditakrifkan (iaitu, fungsi Pemasa), dan yang ini yang terakhir menunjukkan kepada skop di mana masa jalan adalah (iaitu, objek global). Jadi, selepas 3100 milisaat, timer.s1 telah dikemas kini sebanyak tiga kali, tetapi timer.s2 tidak dikemas kini sekali.

Fungsi anak panah boleh menjadikan perkara ini tetap. Ciri ini sangat membantu untuk merangkum fungsi panggil balik. Di bawah ialah contoh di mana fungsi panggil balik acara DOM dirangkumkan dalam objek.

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

Dalam kaedah init kod di atas, fungsi anak panah digunakan, yang menyebabkan ini dalam fungsi anak panah sentiasa menghala ke objek pengendali. Jika tidak, apabila fungsi panggil balik berjalan, baris this.doSomething akan melaporkan ralat, kerana ini menunjuk ke objek dokumen pada masa ini.

Titik tetap ini bukan kerana terdapat mekanisme untuk mengikat ini di dalam fungsi anak panah Sebab sebenarnya ialah fungsi anak panah tidak mempunyai ini sendiri, jadi dalaman ini adalah ini daripada blok kod luar. Tepat kerana ia tidak mempunyai ini, ia tidak boleh digunakan sebagai pembina.

Jadi, kod untuk menukar fungsi anak panah kepada ES5 adalah seperti berikut.

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

Dalam kod di atas, versi ES5 yang ditukar dengan jelas menunjukkan bahawa fungsi anak panah tidak mempunyai ini sendiri sama sekali, tetapi merujuk kepada bahagian luar ini.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah yang perlu anda perhatikan apabila menggunakan fungsi anak panah es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!