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
Salinan kode adalah sebagai berikut:
// Nama Ekspresi Fungsi
var add = function add (a, b) {
mengembalikan A+B;
};
Ekspresi fungsi
Salinan kode adalah sebagai berikut:
// juga dikenal sebagai fungsi anonim
var add = function (a, b) {
mengembalikan 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
Salinan kode adalah sebagai berikut:
fungsi foo () {
// kode di sini
} // Tidak diperlukan 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.
Deklarasi dan ekspresi fungsi
Fungsi Promosi (Mengangkat)
Perilaku deklarasi fungsi tidak setara dengan ekspresi fungsi yang disebutkan. Perbedaannya adalah perilaku mengangkat. Lihat contoh berikut:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// fungsi global
function foo () {alert ("Global foo!");}
function bar () {alert ('global bar');}
fungsi hoist () {
console.log (typeof foo); // fungsi
console.log (bilah tipe); // tidak ditentukan
foo (); // foo lokal!
bar (); // typeError: 'tidak terdefinisi' bukan fungsi
// variabel foo dan pelaksana dipromosikan
fungsi foo () {
waspada ('foo lokal! ');
}
// Hanya bilah variabel yang dipromosikan, bagian implementasi fungsi tidak dipromosikan
var bar = function () {
waspada ('local bar!');
};
}
kerekan();
</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:
Salinan kode adalah sebagai berikut:
<script>
(fungsi () {
var a = 1;
return function () {
waspada (2);
};
} () ()); // pop 2, tanda kurung pertama mengeksekusi diri mereka sendiri, dan tanda kurung kedua menjalankan fungsi anonim internal
</script>
Pola 2: Menunjuk variabel fungsi yang dieksekusi sendiri
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var result = (function () {
kembali 2;
}) (); // Fungsi telah dieksekusi di sini
peringatan (hasil); // Hasil menunjuk ke nilai pengembalian 2 dari fungsi yang dieksekusi sendiri; Jika hasil () muncul, kesalahan akan terjadi.
</script>
Pola tiga: Fungsi bersarang
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var result = (function () {
return function () {
kembali 2;
};
}) ();
peringatan (result ()); // 2 muncul saat peringatan (hasil); function () {return 2}
</script>
Mode 4: Fungsi Ekseksi Mandiri Menetapkan Nilai Pengembaliannya ke Variabel
Salinan kode adalah sebagai berikut:
var abc = (function () {
var a = 1;
return function () {
kembali ++ a;
}
}) (); // Fungsi yang dieksekusi sendiri mengembalikan fungsi setelah kembali ke variabel
alert (ABC ()); // Jika peringatan (ABC), kode setelah pernyataan pengembalian akan muncul; Jika ABC (), fungsi setelah pengembalian akan dieksekusi
Pola 5: Fungsi mengeksekusi dirinya sendiri secara internal, rekursif
Salinan kode adalah sebagai berikut:
// Ini adalah fungsi yang dieksekusi sendiri, fungsi mengeksekusi dirinya sendiri secara internal, rekursif
fungsi 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:
Salinan kode adalah sebagai berikut:
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:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var call = function () {
console.log ("100ms akan ditanya ...");
};
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 menerima lebih sedikit parameter) dengan mengisi beberapa parameter ke dalam tubuh fungsi. ―― 【mahir dalam javascript】
Sederhananya, kariisasi adalah proses konversi, yaitu proses pelaksanaan konversi fungsi kami. Seperti yang ditunjukkan dalam contoh berikut:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// fungsi add () berbasis kari
fungsi add (x, y) {
var oldx = x, oldy = y;
if (typeof Oldy == "tidak terdefinisi") {
return function (newy) {
return oldx + newy;
};
}
// Aplikasi lengkap
mengembalikan x+y;
}
//tes
typeof add (5); // output "fungsi"
Tambahkan (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 fungsi CURRY FUNGSI CURRY yang sewenang -wenang, seperti:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// Fungsi normal
fungsi add (x, y) {
mengembalikan x + y;
}
// kari fungsi untuk mendapatkan fungsi baru
var newAdd = tes (add, 5);
Newadd (4); // 9
// Opsi lain, hubungi fungsi baru secara langsung
tes (tambahkan, 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