Fungsi panah ditinjau kembali

Mari kita meninjau kembali fungsi panah.

Fungsi panah bukan sekadar “singkatan” untuk menulis hal-hal kecil. Mereka memiliki beberapa fitur yang sangat spesifik dan berguna.

JavaScript penuh dengan situasi di mana kita perlu menulis fungsi kecil yang dijalankan di tempat lain.

Misalnya:

• arr.forEach(func) – func dijalankan oleh forEach untuk setiap item array.

• setTimeout(func) – func dijalankan oleh penjadwal bawaan.

• …ada lagi.

Ini adalah semangat JavaScript untuk membuat suatu fungsi dan menyebarkannya ke suatu tempat.

Dan dalam fungsi seperti itu biasanya kita tidak ingin meninggalkan konteks saat ini. Di sinilah fungsi panah berguna.

Fungsi panah tidak memiliki “ini”

Seperti yang kita ingat dari bab Metode objek, "ini", fungsi panah tidak memiliki this . Kalau this diakses, diambil dari luar.

Misalnya, kita dapat menggunakannya untuk melakukan iterasi di dalam metode objek:

 biarkan grup = {
  judul: "Grup Kami",
  siswa: ["John", "Pete", "Alice"],

  tampilkanDaftar() {
    ini.siswa.untukSetiap(
      pelajar => waspada(ini.judul + ': ' + pelajar)
    );
  }
};

grup.showList();

Di sini, di forEach , fungsi panah digunakan, jadi this.title di dalamnya sama persis dengan metode luar showList . Yaitu: group.title .

Jika kita menggunakan fungsi “biasa”, akan ada kesalahan:

 biarkan grup = {
  judul: "Grup Kami",
  siswa: ["John", "Pete", "Alice"],

  tampilkanDaftar() {
    this.siswa.forEach(fungsi(siswa) {
      // Kesalahan: Tidak dapat membaca 'judul' properti yang tidak ditentukan
      alert(ini.judul + ': ' + siswa);
    });
  }
};

grup.showList();

Kesalahan terjadi karena forEach menjalankan fungsi dengan this=undefined secara default, sehingga upaya untuk mengakses undefined.title dilakukan.

Itu tidak mempengaruhi fungsi panah, karena mereka tidak memiliki this .

Fungsi panah tidak dapat dijalankan dengan new

Tidak memiliki this berarti batasan lain: fungsi panah tidak dapat digunakan sebagai konstruktor. Mereka tidak dapat dipanggil dengan new .

Fungsi panah VS mengikat

Ada perbedaan halus antara fungsi panah => dan fungsi biasa yang disebut dengan .bind(this) :

• .bind(this) membuat "versi terikat" dari fungsi tersebut.

• Panah => tidak membuat ikatan apa pun. Fungsinya tidak memiliki this . Pencarian this dilakukan dengan cara yang persis sama seperti pencarian variabel biasa: di lingkungan leksikal luar.

Panah tidak memiliki “argumen”

Fungsi panah juga tidak memiliki variabel arguments .

Itu bagus untuk dekorator, ketika kita perlu meneruskan panggilan dengan this dan arguments saat ini.

Misalnya, defer(f, ms) mendapatkan fungsi dan mengembalikan wrapper di sekelilingnya yang menunda panggilan sebanyak ms milidetik:

 fungsi tunda(f, ms) {
  fungsi kembali() {
    setTimeout(() => f.apply(ini, argumen), ms);
  };
}

fungsi sayHai(siapa) {
  alert('Halo, ' + siapa);
}

biarkan sayHiDeferred = tunda(sayHi, 2000);
sayHiDeferred("John"); // Halo, John setelah 2 detik

Hal yang sama tanpa fungsi panah akan terlihat seperti:

 fungsi tunda(f, ms) {
  fungsi pengembalian(...args) {
    misalkan ctx = ini;
    setTimeout(fungsi() {
      kembalikan f.apply(ctx, args);
    }, MS);
  };
}

Di sini kita harus membuat variabel tambahan args dan ctx sehingga fungsi di dalam setTimeout dapat mengambilnya.

Ringkasan

Fungsi panah:

• Jangan punya this

• Jangan arguments

• Tidak bisa disebut dengan new

• Mereka juga tidak punya super , tapi kami belum mempelajarinya. Kami akan membahasnya di bab Warisan kelas

Hal ini karena kode tersebut ditujukan untuk potongan kode pendek yang tidak memiliki “konteks” sendiri, namun bekerja pada kode yang sekarang. Dan mereka benar-benar bersinar dalam kasus penggunaan tersebut.