Fungsi Anak Panah => Apa yang salah dengan yang biasa?

Apa yang salah dengan yang biasa?" />

Jika anda mengembangkan pengetahuan anda tentang JavaScript dan tertanya-tanya mengapa mereka akan menambah Fungsi Anak Panah dalam ECMAScript 2015 (ES6), anda tidak bersendirian. Semasa saya membina pengetahuan saya tentang bahasa dan selok-belok dan keanehannya, saya mendapati diri saya tertanya-tanya perkara yang sama. Dalam siaran ini, saya akan membentangkan perbezaan, faedah dan sebab mengapa ia ditambah dan bila anda patut menggunakannya.

Mari bercakap perbezaan

Sebelum fungsi anak panah diperkenalkan, fungsi perlu diisytiharkan dalam format tradisional seperti di bawah:

function add(x, y) {
  return x + y;
}

atau diisytiharkan sebagai ungkapan:

const addFunction = function add(x, y) {
  return x + y;
}

dengan pengenalan fungsi anak panah, ini boleh ditulis sebagai:

const addFunction = (x,y) => x + y

Sintaks Ringkas

Daripada contoh di atas, kita boleh melihat dengan mudah bahawa dengan menggunakan fungsi anak panah dan memanfaatkan ciri pulangan tersiratnya, fungsi itu boleh difaktorkan semula dengan cepat kepada satu baris. Kod yang terhasil adalah lebih ringkas, bersih dan lebih mudah dibaca, menghasilkan pembangunan yang lebih lancar dan penyahpepijatan yang lebih pantas.

Mengangkat

Waktu jalan JavaScript secara lalai akan menaikkan semua fungsi dan perisytiharan berubah-ubah ke bahagian atas skopnya selepas penciptaan Konteks Pelaksanaan. Sebagai contoh, dalam skop global ini memastikan bahawa semua fungsi dan pembolehubah yang diisytiharkan akan tersedia untuk semua fungsi yang kemudiannya dipanggil. Walau bagaimanapun, fungsi anak panah tidak pernah dinaikkan, dengan itu membenarkan kawalan yang lebih besar ke atas lokasi tepat di mana fungsi dilaksanakan dan pembolehubah yang boleh diakses olehnya.

Konteks

Setiap kali fungsi JavaScript dilaksanakan, ia mencipta Konteks Perlaksanaan yang merangkumi maklumat tentang persekitaran di mana fungsi itu dijalankan, termasuk nilai ini. Walaupun fungsi tradisional dilaksanakan dalam konteksnya sendiri, fungsi anak panah akan sentiasa mewarisi konteks fungsi yang memanggilnya.
Menggunakan kod di bawah:

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

kami akan mendapat ralat mengatakan: Tidak dapat membaca sifat 'forEach' yang tidak ditentukan, ini kerana walaupun fungsi printGreetings berada dalam konteks kelas Person dan mewarisi konteksnya, namun fungsi forEach (walaupun fungsinya fungsi JavaScript terbina dalam) berjalan dalam konteksnya sendiri yang tidak mengandungi sifat this.name, oleh itu menghasilkan carian ralat.

Walau bagaimanapun, fungsi anak panah tidak akan berjalan dalam konteksnya sendiri dan dengan menulis semula fungsi di atas menggunakan fungsi anak panah...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

hasilnya akan seperti yang diharapkan

function add(x, y) {
  return x + y;
}

Ringkasan

Untuk meringkaskan faedah fungsi anak panah; mereka membenarkan kod yang lebih pendek dan ringkas; menawarkan pengembalian tersirat kod blok fungsi; tidak mengangkat ke bahagian atas Konteks Pelaksanaan dan mengekalkan lokasi tepatnya dalam kod; akhirnya, mereka mewarisi konteks fungsi yang memanggilnya tanpa melaksanakan konteksnya sendiri, membenarkan penggunaan kata kunci ini yang lebih boleh diramal.

Semoga siaran ini membantu anda memahami dengan lebih baik perbezaan dan faedah fungsi tradisional, ayat-ayat anak panah, dan membawa anda selangkah lebih jauh dalam perjalanan JavaScript anda!

Bacaan lanjut:
Blog Dmitri Pavlutin - Perbezaan antara anak panah & fungsi biasa
Dokumen Rujukan MDN - Fungsi Anak Panah

Atas ialah kandungan terperinci Fungsi Anak Panah => Apa yang salah dengan yang biasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!