Artikel ini menganalisis metode penciptaan dan panggilan fungsi anonim di JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Fungsi anonim adalah fungsi tanpa nama, juga disebut penutupan, yang memungkinkan pembuatan fungsi sementara tanpa nama yang ditentukan. Paling sering digunakan sebagai nilai untuk parameter callback, banyak pemula tidak tahu tentang fungsi anonim. Mari kita analisis di sini.
nama fungsi fungsi (daftar parameter) {function body;}
Jika Anda membuat fungsi anonim, itu harus:
function () {function body;}
Karena ini adalah fungsi anonim, umumnya tidak ada parameter yang disahkan kepadanya.
Mengapa membuat fungsi anonim? Dalam keadaan apa fungsi anonim akan digunakan? Ada dua skenario umum untuk fungsi anonim, satu adalah fungsi callback, dan yang lainnya adalah secara langsung menjalankan fungsi.
Fungsi callback, seperti operasi asinkron Ajax, memerlukan fungsi callback. Saya tidak akan menjelaskannya secara detail di sini. Mengenai fungsi yang secara langsung, saya akan memahaminya setelah melihat contoh:
Salin kode sebagai berikut: <bahasa skrip = "javascript">
var a = "a";
(fungsi(){
var a = "b";
waspada (a);
}) ();
waspada (a);
</script>
Dalam kode di atas, dua kotak peringatan akan menjadi output secara berurutan. Konten kotak peringatan pertama adalah B dan yang kedua adalah a. Pernahkah Anda melihat manfaatnya? Benar, menggunakan eksekusi fungsi dapat membatasi ruang lingkup variabel sehingga variabel yang sama dalam skrip yang berbeda dapat hidup berdampingan.
Di bawah ini, mari kita pahami konsep yang terkait dengan fungsi anonim.
Pernyataan fungsi. Untuk menggunakan fungsi, pertama -tama kita harus menyatakan keberadaannya. Cara paling umum yang kami gunakan adalah mendefinisikan fungsi menggunakan pernyataan fungsi, seperti:
Salin kode sebagai berikut: function abc () {
// kode untuk diproses
}
fungsi abc () {// kode untuk diproses}
Tentu saja, fungsi Anda juga dapat dengan parameter atau bahkan dengan nilai pengembalian.
Salinan kode adalah sebagai berikut: Lihat PlainCopy ke ClipboardPrint?
fungsi abc (x, y) {
mengembalikan x+y;
}
fungsi abc (x, y) {return x+y; }
Namun, tidak peduli bagaimana Anda mendefinisikan fungsi Anda, juru bahasa JS akan menerjemahkannya ke dalam objek fungsi. Misalnya, Anda menentukan nomor fungsi salah satu contoh di atas dan memasukkan kode berikut:
Salin kode sebagai berikut: Peringatan (TypeOf ABC); // "Fungsi"
Browser Anda akan memunculkan kotak prompt, mendorong Anda bahwa ABC adalah objek fungsi. Jadi apa sebenarnya objek fungsinya?
Objek fungsi
Objek fungsi adalah objek yang melekat dalam JavaScript, dan semua fungsi sebenarnya adalah objek fungsi. Mari kita lihat apakah objek fungsi dapat secara langsung menggunakan konstruktor untuk membuat fungsi baru? Jawabannya adalah ya. Misalnya:
Salinan kode adalah sebagai berikut: var abc = fungsi baru ("x", "y", "return x*y;");
peringatan (ABC (2,3)); // "6"
Saya percaya semua orang harus memiliki pemahaman tentang bagaimana mendeklarasikan fungsi sekarang. Jadi apa itu fungsi anonim?
Menyatakan fungsi anonim
Seperti namanya, fungsi anonim adalah fungsi tanpa nama aktual. Misalnya, kami menghapus nama fungsi dalam contoh di atas dan kemudian menentukan apakah itu fungsi:
Salin kode sebagai berikut: peringatan (typeof function () {}); // "fungsi"
peringatan (typeof function (x, y) {return x+y;}); // "function"
peringatan (typeof fungsi baru ("x", "y", "return x*y;")) // "fungsi"
peringatan (typeof function () {}); // "fungsi"
peringatan (typeof function (x, y) {return x+y;}); // "function"
peringatan (typeof fungsi baru ("x", "y", "return x*y;")) // "fungsi"
Kita dapat dengan mudah melihat bahwa mereka semua adalah objek fungsi, dengan kata lain, semuanya adalah fungsi, tetapi mereka semua memiliki satu karakteristik - tanpa nama. Jadi kami menyebutnya "fungsi anonim". Namun, justru karena mereka tidak memiliki "nama", kami tidak memiliki cara untuk menemukannya. Ini memperluas pertanyaan tentang bagaimana menyebut fungsi anonim.
Memanggil fungsi anonim
Untuk memanggil suatu fungsi, kita harus memiliki metode untuk menemukannya dan merujuknya. Jadi, kita perlu menemukan nama untuk itu. Misalnya:
Salin kode sebagai berikut: var abc = fungsi (x, y) {
mengembalikan x+y;
}
peringatan (ABC (2,3)); // "5"
Operasi di atas sebenarnya setara dengan mendefinisikan fungsi dengan cara yang berbeda. Penggunaan ini adalah sesuatu yang lebih sering kita temui. Misalnya, ketika kami mengatur fungsi penangan acara elemen DOM, kami biasanya tidak menyebutkan nama mereka, tetapi sebaliknya memberikan acara yang sesuai dengan fungsi anonim.
Sebenarnya ada cara lain untuk menyebut fungsi anonim, yang merupakan fragmen jQuery yang kita lihat - gunakan () untuk melampirkan fungsi anonim, dan kemudian menambahkan sepasang kurung (termasuk daftar parameter). Mari kita lihat contoh -contoh berikut:
Salin kode sebagai berikut: peringatan ((fungsi (x, y) {return x+y;}) (2,3)); // "5"
waspada ((fungsi baru ("x", "y", "return x*y;")) (2,3)); // "6"
Banyak orang mungkin bertanya -tanya mengapa metode ini dapat dipanggil dengan sukses? Jika menurut Anda aplikasi ini aneh, silakan lihat penjelasan saya di bawah ini.
Apakah Anda tahu peran kurung? Kurung dapat membagi ekspresi kami menjadi potongan -potongan, dan setiap bagian, yaitu, masing -masing pasangan kawat gigi, memiliki nilai pengembalian. Nilai pengembalian ini sebenarnya adalah nilai pengembalian ekspresi dalam tanda kurung. Oleh karena itu, ketika kami melampirkan fungsi anonim dengan sepasang tanda kurung, tanda kurung mengembalikan objek fungsi dari fungsi anonim. Oleh karena itu, menambahkan fungsi anonim ke pasangan braket seperti fungsi bernama dan kami mendapatkan posisi referensi. Jadi, jika Anda menambahkan daftar parameter setelah variabel referensi ini, bentuk panggilan fungsi biasa akan diimplementasikan.
Saya tidak tahu apakah Anda dapat memahami teks di atas. Jika Anda masih tidak dapat memahaminya, silakan lihat kode berikut dan coba.
Salin kode sebagai berikut: var abc = fungsi (x, y) {return x+y;}; // Tetapkan objek fungsi anonim ke ABC
// Konstruktor ABC sama dengan konstruktor fungsi anonim. Dengan kata lain, implementasi dua fungsi adalah sama.
alert ((ABC) .constructor == (function (x, y) {return x+y;}). konstruktor);
PS: Konstruktor mengacu pada fungsi yang membuat objek. Yaitu, tubuh fungsi yang diwakili oleh objek fungsi.
Singkatnya, pahami (fungsi anonim yang terkandung dalam tanda kurung) sebagai objek fungsi yang dikembalikan oleh ekspresi braket, dan kemudian Anda dapat membuat panggilan daftar parameter normal ke objek fungsi ini. (Saya membuat kesalahan di sini sebelumnya. Hanya ekspresi fungsi yang tidak dapat dipanggil secara langsung. Hapus tanda kurung fungsi anonim dan harus ditetapkan dengan ekspresi. Yaitu, (function () {alert (1)}) () harus setara dengan a = fungsi () {waspada (1)} (), dan bahkan tidak dapat menghapus a =.
Penutup
Apa itu penutupan? Penutupan merujuk pada blok kode dalam bahasa pemrograman tertentu yang memungkinkan keberadaan fungsi tingkat pertama dan variabel bebas yang didefinisikan dalam fungsi tingkat pertama tidak dapat dirilis. Sampai fungsi tingkat pertama dirilis, variabel bebas yang belum dirilis ini dapat diterapkan di luar fungsi tingkat pertama.
Bagaimana? Itu berkeringat ... tidak apa -apa, begitu juga saya (walaupun saya memahaminya, itu hanya masalah kemampuan ekspresi). Mari kita jelaskan dengan cara yang lebih sederhana: penutupan sebenarnya adalah fitur bahasa. Ini mengacu pada bahasa pemrograman yang memungkinkan fungsi dianggap sebagai objek, dan kemudian variabel instance (lokal) dapat didefinisikan dalam fungsi seperti operasi pada objek. Variabel -variabel ini dapat disimpan dalam fungsi sampai objek instance dari fungsi dihancurkan. Blok kode lain dapat memperoleh nilai variabel instance (lokal) ini dalam beberapa cara dan menerapkannya pada aplikasi.
Saya tidak tahu apakah akan lebih jelas setelah menjelaskan dengan cara ini. Jika Anda masih tidak mengerti, maka mari kita sederhanakan: Penutupan benar -benar merujuk ke variabel lokal yang didefinisikan dalam fungsi berjalan dalam bahasa pemrograman.
Sekarang mari kita lihat contoh:
Salin kode sebagai berikut: var abc = fungsi (y) {
var x = y; // Ini adalah variabel lokal
return function () {
waspada (x ++); // Di sinilah X dipanggil dalam fungsi tingkat pertama variabel lokal di fitur penutupan dan beroperasi di atasnya
Peringatan (y-); // Variabel parameter yang direferensikan juga merupakan variabel gratis
}} (5); // Inisialisasi
abc (); // "5" "5"
abc (); // "6" "4"
abc (); // "7" "3"
peringatan (x); // kesalahan! "X" tidak ditentukan!
Setelah melihat ini, dapatkah Anda mengetahui apakah cuplikan kode jQuery adalah penutupan?
Menurut pendapat saya, mari kita bicarakan. Apakah fitur penutupan diterapkan, perlu untuk menentukan apakah elemen paling penting dari kode ini adalah: variabel lokal yang tidak didesain. Maka jelas bahwa tidak mungkin untuk menerapkan fitur penutupan tanpa implementasi apa pun. Tetapi bagaimana jika ada implementasi dalam fungsi anonim? Ini juga perlu menentukan apakah ada variabel lokal yang tidak didesain dalam implementasinya. Jadi jika Anda bertanya fitur apa di JS yang digunakan di awal cuplikan kode jQuery? Maka itu hanya panggilan untuk fungsi anonim dan fungsi anonim. Namun, ini menyiratkan karakteristik penutupan dan dapat diimplementasikan kapan saja.
Penggunaan yang paling umum:
Salin kode sebagai berikut: (function () {
waspada ('air');
}) ();
Tentu saja, parameter juga dapat disertakan:
Salin kode sebagai berikut: (fungsi (o) {
waspada (o);
})('air');
Ingin menggunakan panggilan rantai dengan fungsi anonim? Sangat sederhana:
Salin kode sebagai berikut: (fungsi (o) {
waspada (o);
pengembalian argumen.callee;
}) ('air') ('turun');
Anda tahu semua fungsi anonim yang umum, mari kita lihat yang tidak umum:
Salin kode sebagai berikut: ~ (function () {
waspada ('air');
}) (); // tulisannya sedikit keren ~
function void () {
waspada ('air');
} (); // Dikatakan bahwa yang paling efisien ~
+function () {
waspada ('air');
} ();
-fungsi(){
waspada ('air');
} ();
~ function () {
waspada ('air');
} ();
!fungsi(){
waspada ('air');
} ();
(fungsi(){
waspada ('air');
} ()); // sedikit eksekusi paksa ~
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.