Fungsi JavaScript

Fungsi JavaScript mampu lebih daripada sekadar melampirkan sekumpulan kod sambil menunggu panggilan untuk dilaksanakan. Fungsi telah berkembang dari semasa ke semasa yang membawa kepada definisi baru, kaedah pelaksanaan dan sintaks. Jawatan ini akan merangkumi sebahagian daripada peranan sekarang Fungsi JavaScript telah dimainkan setakat ini.

Mengetahui cara yang berbeza untuk menyatakan dan menentukan fungsi membuka kemungkinan melaksanakan logik dengan cara yang lebih optimum dalam JavaScript. Juga, anda mungkin dapat menjawab soalan wawancara dengan lebih mudah.

Ekspresi Fungsi

Apabila anda hanya menyatakan fungsi dengan fungsi kata kunci, parameter pilihan dan kod tubuh, itu a fungsi pengisytiharan.

Letakkan perisytiharan tersebut dalam ungkapan JavaScript (seperti dalam penyataan atau ungkapan aritmetik), ia menjadi fungsi ungkapan.

// Fungsi fungsi perisytiharan function_name () ; // Ungkapan fungsi var function_name = function () ; 

Semua pengisytiharan JavaScript dinaikkan (dimajukan dalam skop) semasa penilaian. Oleh itu menulis panggilan fungsi sebelum deklarasi fungsi adalah okay (kerana perisytiharan akan dipindahkan juga).

function_name (); // function call [WORKS] function_name () ; 

Ekspresi fungsi bagaimanapun tidak digerakkan kerana fungsi menjadi sebahagian daripada ekspresi dan bukan pernyataan yang bersendirian.

function_name (); // function call [TIDAK AKAN BEKERJA] var function_name = function () ; 

Ekspresi Fungsi Segera Dihadapkan (IIFE)

Ia merupakan ungkapan fungsi, kod yang akan dilaksanakan dengan serta-merta (hanya sekali apabila ia dinilai). Anda boleh membuat satu dengan hanya menambah () (sintaks yang digunakan untuk memanggil fungsi) sejurus selepas ungkapan fungsi. Mereka boleh menjadi tanpa nama (tiada nama untuk memanggilnya dengan).

Berikut adalah dua sintaks yang paling umum untuk membuat IIFE:

(function optional_function_name () // body ()); 

dan

(function optional_function_name () // body) (); 

Sangkar sekitar perisytiharan fungsi menukarnya kepada ungkapan dan kemudian menambah () selepas ia memanggil fungsi. Anda boleh menggunakan cara lain untuk membuat IIFE selama anda menambah () selepas ungkapan fungsi (seperti di bawah), tetapi kaedah pilihan adalah dua di atas.

/ Beberapa cara untuk membuat fungsi IIFEs! () / * ... * / (); + fungsi () / * ... * / (); fungsi baru () / * ... * /; 

IIFE adalah sesuai untuk menulis kod yang perlu dilaksanakan hanya sekali, namespacing, membuat penutupan, membuat pemboleh ubah peribadi dan banyak lagi. Berikut adalah contoh penggunaan IIFE.

var page_language = (function () var lang; // Code to get language of the page return lang;) (); 

Kod untuk mendapatkan bahasa halaman dilaksanakan hanya sekali (sebaiknya selepas memuatkan halaman). Hasilnya disimpan dalam page_language untuk kegunaan kemudian.

Kaedah

Apabila fungsi adalah objek objek, ia dipanggil kaedah. Oleh kerana fungsi juga merupakan objek, fungsi dalam fungsi lain juga merupakan kaedah. Berikut adalah contoh untuk kaedah di dalam objek.

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78 

The Tambah dan sub fungsi adalah kaedah calc objek.

Sekarang untuk fungsi dalam contoh fungsi:

fungsi tambah (a) return function (b) return a + b; console.log (add (1) (2)); // Output ialah 3 

Fungsi anonim yang dikembalikan adalah kaedah fungsi Tambah.

Nota: Oleh kerana parameter (a) fungsi Tambah dalam contoh di atas boleh didapati untuk fungsi berikut yang diminta, jenis proses ini dipanggil kari.

Pembina

Apabila anda menambah baru kata kunci sebelum fungsi dan memanggilnya, ia menjadi pembina yang mewujudkan contoh. Berikut adalah contoh di mana para pembina digunakan untuk membuat contoh Buah dan nilai ditambah kepada setiap Buahhartanah.

fungsi Buah () nama var, keluarga; // Nama saintifik & keluarga ini.getName = fungsi () return name;; this.setName = function (value) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var apple = buah baru (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var orange = buah baru (); orange.setName ("Citrus à ??  ?? â ??  ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus à ??  ?? â ??  ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

Fungsi Panah (Standard ES6) [Hanya di Firefox]

Takrif fungsi baru dari Standard ES6 menyediakan sintaks yang lebih pendek untuk ungkapan fungsi. Sintaksnya ialah

() => / * body * / 

Fungsi sampel ini:

var sing = function () console.log ('singing ...'); 

adalah sama seperti:

var sing = () => console.log ('singing ...'); 

Fungsi panah tidak dikenali dan tidak mempunyai sendiri ini nilai, ini di dalamnya akan sama seperti ini dalam kod tertutup. Juga, anda tidak boleh mengubahnya kepada pembina dengan baru kata kunci.

Mereka berguna apabila anda mahu ini di dalam fungsi untuk menjadi sama seperti di luar dan sintaks yang lebih pendek menjadikan kod untuk fungsi penulisan dalam fungsi ringkas (seperti di bawah)

setInterval (function () console.log ('message'), 1000); 

ke dalam

setInterval (() => console.log ('message'), 1000); 

Fungsi Penjana (Standard ES6) [Hanya di Firefox]

Satu lagi definisi fungsi baru dari Standard ES6 ialah Fungsi Penjana. Fungsi penjana mampu menghentikan dan meneruskan pelaksanaannya. Sintaksnya ialah:

fungsi * function_name ()  

atau

fungsi * function_name ()  

Fungsi Generator membuat iterators. Iterator itu seterusnya kaedah kemudian digunakan untuk melaksanakan kod di dalam fungsi penjana sehingga hasil kata kunci dicapai. Selepas itu, nilai terulang yang dikenalpasti oleh hasil Kata kunci dikembalikan oleh fungsi penjana dan pelaksanaan dihentikan.

Fungsi penjana sekali lagi dilaksanakan apabila seterusnya kaedah dipanggil sehingga seterusnya hasil kata kunci dicapai. Setelah semua hasil ungkapan dilaksanakan, pulangan nilai yang dihasilkan undefined.

Berikut adalah contoh mudah:

fungsi * generator_func (count) untuk (var i = 0; i 
Berikut adalah contoh lain:
 
fungsi * randomIncrement (i) hasil i + 3; hasil i + 5; hasil i + 10; hasil i + 6;  var itr = randomIncrement (4); console.log (itr.next (). nilai); // 7 console.log (itr.next (). Nilai); // 9 console.log (itr.next (). Nilai); // 14 
 
Terdapat juga a hasil * ungkapan yang melepasi nilai kepada fungsi penjana yang lain
 
fungsi * buah-buahan (buah) hasil * sayur-sayuran (buah); menghasilkan "Anggur";  fungsi * sayur-sayuran (buah) hasil buah + "dan Bayam"; hasil buah + "dan Brokoli"; buah buah + "dan Timun";  var itr = buah ("Apple"); console.log (itr.next (). nilai); / / "Apple and Spinach" console.log (itr.next (). Nilai); / / "Apple and Broccoli" console.log (itr.next (). Nilai); / / "Apple and Cucumber" console.log (itr.next (). Nilai); / // "Grapes" console.log (itr.next (). Nilai); / undefined 
 
Fungsi penjana adalah berguna jika anda mahu melalui nilai-nilai satu demi satu pada titik pilihan anda dalam kod dengan menghentikannya, daripada dalam satu pergi seperti dalam melambangkan array.
 
Kesimpulannya
 
Saya telah memasukkan senarai rujukan di bawah, di mana anda akan menemui pautan kepada rujukan dan artikel yang mendalam dengan topik yang berbeza secara berasingan. Kedua-dua fungsi standard ES6 hanya akan berfungsi di Firefox pada masa ini.
 
Rujukan
 
Bahasa ECMAScript: Fungsi dan Kelas
 
Ekspresi Fungsi Segera-Invoked (IIFE)
 
Asas-asas Penjana ES6
 
Fungsi Arrow
 
Fungsi - Rangkaian Pembangun Mozilla