Penjelasan Detail dan Contoh Pola Fungsi JavaScript

Peran pola desain JavaScript adalah untuk meningkatkan reusability dan keterbacaan kode, membuat kode lebih mudah dipelihara dan diperluas.

Dalam JavaScript, fungsi adalah kelas objek, yang berarti dapat dilewatkan sebagai parameter untuk fungsi lain; Selain itu, fungsi ini juga dapat memberikan ruang lingkup.

Sintaks untuk membuat fungsi

Bernama Ekspresi Fungsi

 // nama ekspresi fungsi var add = fungsi add (a, b) {return a+b;}; var foo = function bar () {console.log (foo === bar);}; foo (); // true

Dapat dilihat bahwa mereka mengacu pada fungsi yang sama, tetapi ini hanya valid di badan fungsi.

 var foo = batang fungsi () {}; console.log (foo === bar); // ReferenceError: Bar tidak didefinisikan

Namun, Anda tidak dapat memanggil fungsi dengan menelepon bar ().

 var foo = (function bar () {console.log (foo === bar);}) (); // false

Ekspresi fungsi

 // Juga dikenal sebagai fungsi anonim var add = fungsi (a, b) {return a+b;};

Nilai yang ditetapkan untuk Tambah Variabel adalah definisi fungsi itu sendiri. Dengan cara ini, tambahkan menjadi fungsi yang dapat dipanggil di mana saja.

Deklarasi Fungsi

 function foo () {// kode di sini} // tidak perlu untuk titik koma di sini

Dalam titik titik koma, ekspresi fungsi harus selalu menggunakan titik koma, dan akhir titik titik koma tidak diperlukan dalam deklarasi fungsi.

Perbedaan antara fungsi deklaratif dan ekspresi fungsi adalah bahwa selama periode prekompilasi JS, fungsi deklaratif akan diekstraksi terlebih dahulu, dan kemudian kode JS akan dieksekusi secara berurutan:

console.log (f1); // [fungsi: f1]

console.log (f2); // tidak ditentukan, javascript tidak sepenuhnya ditafsirkan dan dieksekusi secara berurutan, tetapi akan "memperkirakan" javascript sebelum interpretasi. Selama proses kompilasi, fungsi definitif akan dieksekusi terlebih dahulu.

 function f1 () {console.log ("I am f1");} var f2 = function () {console.log ("I Am f2");};

Karena fungsi mendeklarasikan akan diselesaikan selama konstruksi lingkup global, fungsi mendeklarasikan adalah properti dari objek jendela, yang menunjukkan mengapa di mana pun kami mendeklarasikan fungsi, mendeklarasikan fungsi yang pada akhirnya menjadi milik objek jendela.

Dalam bahasa JavaScript, fungsi anonim apa pun milik objek jendela. Saat mendefinisikan fungsi anonim, ia akan mengembalikan alamat memorinya. Jika suatu variabel menerima alamat memori ini saat ini, fungsi anonim dapat digunakan dalam program, karena fungsi anonim juga didefinisikan dan ditugaskan selama konstruksi lingkungan eksekusi global, jadi penunjuk fungsi anonim ini juga merupakan objek jendela

 var f2 = function () {console.log ("I am f2");}; console.log (f2 ()); // i am f2 (function () {console.log (jendela ini ===? // true}) ();

Deklarasi dan ekspresi fungsi

Fungsi Promosi (Mengangkat)

Perilaku deklarasi fungsi tidak setara dengan ekspresi fungsi yang disebutkan. Perbedaannya adalah perilaku mengangkat. Lihat contoh berikut:

 <script type = "text/javascript"> // function fungsi global foo () {waspada ("Global foo!");} function bar () {alert ('global bar');} function hoist () {console.log (typeOf foo); // function console.log (typeOf bar);//tidak didefinisikan bar (); // typeError: 'tidak terdefinisi' bukan fungsi // variabel foo dan implemer dipromosikan fungsi foo () {waspada ('foo lokal! '); } // Hanya bilah variabel yang dipromosikan, bagian implementasi fungsi yang tidak dipromosikan var bar = fungsi () {alert ('local bar!'); }; } hoist (); </script>

Untuk semua variabel, di mana pun mereka dinyatakan dalam tubuh, mereka dipromosikan secara internal ke bagian atas fungsi. Alasan untuk aplikasi fungsi umum adalah bahwa fungsi hanyalah objek yang ditetapkan untuk variabel.

Seperti namanya, perbaikan berarti menyebutkan hal -hal berikut ke atas. Dalam JS, ini adalah untuk meningkatkan hal -hal yang ditentukan dalam hal -hal berikut (variabel atau fungsi) ke definisi sebelumnya. Seperti yang dapat dilihat dari contoh di atas, foo dan batang dalam fungsi hoist di dalam fungsi bergerak ke atas, sehingga mencakup fungsi foo dan batang global. Perbedaan antara fungsi lokal Bar dan Foo adalah bahwa FOO dipromosikan ke atas dan dapat berjalan secara normal, sedangkan definisi bar () belum ditingkatkan, hanya deklarasi yang dipromosikan. Oleh karena itu, ketika bar () dieksekusi, hasilnya tidak terdefinisi alih -alih digunakan sebagai fungsi.

Mode fungsi real-time

Fungsi juga merupakan objek, sehingga dapat digunakan sebagai nilai pengembalian. Keuntungan menggunakan fungsi penguasaan diri adalah secara langsung mendeklarasikan fungsi anonim dan menggunakannya segera, untuk menghindari mendefinisikan fungsi yang tidak digunakan sekali, dan dihindari dari masalah penamaan konflik. Tidak ada konsep namespace di JS, jadi mudah untuk memiliki konflik nama fungsi. Setelah konflik penamaan dilakukan, yang terakhir dinyatakan akan menang.

Mode 1:

 <script> (function () {var a = 1; return function () {alert (2);};} () ()); // 2 muncul, tanda kurung pertama mengeksekusi diri mereka sendiri, dan tanda kurung kedua menjalankan fungsi anonim internal </script>

Pola 2: Menunjuk variabel fungsi yang dieksekusi sendiri

 <script type = "text/javascript"> var result = (function () {return 2;}) (); // function alert (hasil); // Hasil menunjuk ke nilai pengembalian 2 dari fungsi yang dieksekusi sendiri; Jika result () muncul, kesalahan akan terjadi </script>

Pola tiga: Fungsi bersarang

 <script type = "text/javascript"> var result = (function () {return function () {return 2;};}) (); waspada (result ()); // saat waspada (hasil) fungsi () {return 2} </script>

Mode 4: Fungsi Ekseksi Mandiri Menetapkan Nilai Pengembaliannya ke Variabel

 var abc = (function () {var a = 1; return function () {return ++ a;}}) (); // fungsi fungsi pengukuhan sendiri mengembalikan fungsi setelah kembali ke peringatan variabel (ABC ()); // jika waspada (ABC), kode setelah pernyataan pengembalian akan muncul; Jika ABC (), fungsi setelah kembali akan dieksekusi

Pola 5: Fungsi mengeksekusi dirinya sendiri secara internal, rekursif

 // Ini adalah fungsi yang dieksekusi sendiri, fungsi mengeksekusi dirinya sendiri secara internal, fungsi rekursif ABC () {ABC (); }

Mode panggilan balik

Fungsi Callback: Ketika Anda melewati fungsi tulis () sebagai argumen ke fungsi lain panggilan (), maka panggilan () dapat mengeksekusi (atau memanggil) write () di beberapa titik. Dalam hal ini, tulis () disebut fungsi panggilan balik.

Pendengar acara asinkron

Mode Callback memiliki banyak kegunaan, misalnya, ketika pendengar acara dilampirkan ke elemen pada halaman, itu sebenarnya menyediakan pointer ke fungsi panggilan balik yang akan dipanggil ketika peristiwa terjadi. menyukai:

document.addeventlistener ("klik", console.log, false);

Contoh kode di atas menunjukkan callback function console.log () dalam mode gelembung saat dokumen mengklik.

JavaScript sangat cocok untuk pemrograman yang digerakkan oleh peristiwa, karena mode panggilan balik mendukung program untuk berjalan secara tidak sinkron.

waktu keluar

Contoh lain dari menggunakan mode panggilan balik adalah saat menggunakan metode batas waktu yang disediakan oleh objek jendela browser: setTimeout () dan setInterval (), seperti:

 <script type = "text/javascript"> var call = function () {console.log ("100ms akan ditanyakan ..."); }; setTimeout (panggilan, 100); </script>

Mode panggilan balik di perpustakaan

Saat merancang perpustakaan JS, fungsi callback akan berguna. Kode perpustakaan harus menggunakan kode yang dapat digunakan kembali sebanyak mungkin, dan panggilan balik dapat membantu mencapai generalisasi ini. Saat kami merancang perpustakaan JS yang sangat besar, faktanya adalah bahwa pengguna tidak membutuhkan sebagian besar dari itu, kami dapat fokus pada fungsi inti dan menyediakan fungsi panggilan balik dalam "bentuk kait", yang akan memudahkan kami untuk membangun, skala, dan menyesuaikan metode perpustakaan

Kari

Currying adalah teknik yang mengubah fungsi menjadi fungsi baru yang disederhanakan (untuk lebih sedikit parameter) dengan mengisi beberapa parameter ke dalam tubuh fungsi. ―― 【mahir dalam javascript】

Sederhananya, kariisasi adalah proses konversi, yaitu proses konversi fungsi kami. Seperti yang ditunjukkan dalam contoh berikut:

 <script type = "text/javascript"> // fungsi add () curry add () add (x, y) {var oldx = x, oldy = y; if (typeof oldy == "tidak terdefinisi") {return function (newy) {return oldx + newy; }; } // Terapkan sepenuhnya pengembalian x+y; } // tes tipe ADD (5); // output "function" add (3) (4); // 7 // buat dan simpan fungsi baru var add2000 = add (2000); add2000 (10); // output 2010 </script>

Ketika add () dipanggil untuk pertama kalinya, itu menciptakan penutupan untuk fungsi internal yang dikembalikan. Penutupan ini menyimpan nilai X dan Y asli ke dalam variabel pribadi Oldx dan Oldy.

Sekarang kita akan dapat menggunakan metode umum kari menggunakan fungsi apa pun, seperti:

 <script type = "text/javascript"> // fungsi fungsi biasa add (x, y) {return x + y; } // kari fungsi untuk mendapatkan fungsi baru var newAdd = test (add, 5); NewAdd (4); // 9 // Opsi lain, langsung hubungi Tes Fungsi Baru (Tambah, 6) (7); // Output 13 </Script>

Kapan Menggunakan Curry

Ketika ditemukan bahwa fungsi yang sama dipanggil dan sebagian besar parameter yang dilewatkan adalah sama, maka fungsi tersebut mungkin kandidat yang baik untuk kariisasi