Saya dulu tahu apa artinya ini, tapi saya berjuang sekarang ...
Apakah ini pada dasarnya mengatakan document.onload
?
(function () {
})();
javascript
iife
Exitos
sumber
sumber
Jawaban:
Ini adalah Ekspresi Fungsi Segera-Disebut , atau IIFE singkatnya. Itu dijalankan segera setelah itu dibuat.
Ini tidak ada hubungannya dengan event-handler untuk acara apa pun (seperti
document.onload
).Pertimbangkan bagian dalam pasangan kurung pertama: .... itu adalah ekspresi fungsi reguler. Kemudian lihat pasangan terakhir , ini biasanya ditambahkan ke ekspresi untuk memanggil fungsi; dalam hal ini, ungkapan kami sebelumnya.
(function(){})();
(function(){})();
Pola ini sering digunakan ketika mencoba menghindari polusi namespace global, karena semua variabel yang digunakan di dalam IIFE (seperti dalam fungsi normal lainnya ) tidak terlihat di luar cakupannya.
Inilah sebabnya, mungkin, Anda mengacaukan konstruksi ini dengan event-handler
window.onload
, karena ini sering digunakan sebagai berikut:Koreksi yang disarankan oleh Guffa :
Update Karena ini adalah topik yang cukup populer, layak itu menyebutkan bahwa Iife juga dapat ditulis dengan fungsi panah ES6 ini (seperti gajus memiliki keluar runcing dalam komentar ):
sumber
function(){ var foo = '5'; }
Itu hanya fungsi anonim yang dijalankan segera setelah itu dibuat.
Ini seperti jika Anda menugaskannya ke variabel, dan menggunakannya tepat setelah itu, hanya tanpa variabel:
Di jQuery ada konstruksi serupa yang mungkin Anda pikirkan:
Itu adalah bentuk singkat dari pengikatan
ready
acara:Tetapi dua konstruksi di atas bukanlah IIFE .
sumber
Ekspresi fungsi yang segera dipanggil (IIFE) segera memanggil fungsi. Ini berarti bahwa fungsi tersebut dieksekusi segera setelah definisi selesai.
Tiga kata yang lebih umum:
Jika tidak ada persyaratan khusus untuk nilai pengembaliannya, maka kita dapat menulis:
Atau, bisa juga:
Anda bahkan dapat menulis:
sumber
31.new
'adalah sintaks yang tidak valid;(function(){}());
1 - 1
dan Anda bisa melakukannya dengan mudahtrue - function(){}
. Ini hanya satu hal (operator pengurangan infiks) tetapi dengan operan yang berbeda, bahkan tidak masuk akal.Ini mendeklarasikan fungsi anonim, lalu menyebutnya:
sumber
arguments
adalah khusus ; Dugaan saya adalah penjawab yang baru saja membalik ke mana namaMaksudnya segera jalankan.
jadi jika saya lakukan:
Fiddle: http://jsfiddle.net/maniator/LqvpQ/
Contoh kedua:
sumber
Konstruk itu disebut Ekspresi Fungsi Segera Diminta (IIFE) yang artinya dieksekusi segera. Anggap saja sebagai fungsi yang dipanggil secara otomatis ketika juru bahasa mencapai fungsi itu.
Kasus penggunaan yang paling umum:
Salah satu kasus penggunaannya yang paling umum adalah membatasi ruang lingkup variabel yang dibuat via
var
. Variabel yang dibuat melaluivar
memiliki lingkup terbatas pada fungsi sehingga konstruk ini (yang merupakan pembungkus fungsi di sekitar kode tertentu) akan memastikan bahwa ruang lingkup variabel Anda tidak keluar dari fungsi itu.Dalam contoh berikut,
count
tidak akan tersedia di luar fungsi yang dipanggil segera yaitu ruang lingkupcount
tidak akan bocor keluar dari fungsi. Anda harus mendapatkanReferenceError
, haruskah Anda mencoba mengaksesnya di luar fungsi yang dipanggil segera.ES6 Alternatif (Disarankan)
Di ES6, kami sekarang dapat membuat variabel dibuat melalui
let
danconst
. Keduanya diblok-blok (tidak sepertivar
yang dibatasi fungsi).Oleh karena itu, alih-alih menggunakan konstruksi IIFE yang kompleks untuk use case yang saya sebutkan di atas, Anda sekarang dapat menulis kode yang lebih sederhana untuk memastikan bahwa ruang lingkup variabel tidak bocor keluar dari blok yang Anda inginkan.
Dalam contoh ini, kami digunakan
let
untuk mendefinisikancount
variabel yang membuatcount
terbatas pada blok kode, kami buat dengan kurung keriting{...}
.Saya menyebutnya "Penjara Keriting".
sumber
Ini disebut IIFE (Ekspresi Fungsi Segera Diminta). Salah satu pola desain JavaScript yang terkenal, itu adalah jantung dan jiwa dari pola Modul modern. Seperti namanya itu dijalankan segera setelah itu dibuat. Pola ini menciptakan cakupan eksekusi yang terisolasi atau pribadi.
JavaScript sebelum ECMAScript 6 menggunakan scoping lexical, jadi IIFE digunakan untuk mensimulasikan scoping blok. (Dengan pelingkupan blok ECMAScript 6 dimungkinkan dengan pengenalan
let
danconst
kata kunci.) Referensi untuk masalah dengan pelingkupan leksikalMensimulasikan pelingkupan blok dengan IIFE
Manfaat kinerja menggunakan Iife adalah kemampuan untuk melewati umum digunakan objek global seperti
window
,document
, dll sebagai argumen dengan mengurangi ruang lingkup lookup. (Ingat JavaScript mencari properti di lingkup lokal dan meningkatkan rantai sampai lingkup global). Jadi mengakses objek global dalam lingkup lokal mengurangi waktu pencarian seperti di bawah ini.sumber
Tidak, konstruksi ini hanya menciptakan ruang lingkup untuk penamaan. Jika Anda memecahnya di beberapa bagian Anda dapat melihat bahwa Anda memiliki eksternal
Itu adalah doa fungsi. Di dalam kurung Anda memiliki:
Itu adalah fungsi anonim. Segala sesuatu yang dideklarasikan dengan var di dalam konstruk akan terlihat hanya di dalam konstruk yang sama dan tidak akan mencemari namespace global.
sumber
Ini adalah Ekspresi Fungsi yang Segera Diminta dalam Javascript:
Untuk memahami IIFE di JS, mari jabarkan:
Contoh: Coba ikuti di konsol chrome. Ini adalah ekspresi dalam JS.
Contoh:
Cara kerja ekspresi fungsi:
- Ketika mesin JS berjalan untuk pertama kalinya (Konteks Eksekusi - Buat Fase), fungsi ini (di sisi kanan = atas) tidak dijalankan atau disimpan dalam memori. Variabel 'salam' diberi nilai 'tidak terdefinisi' oleh mesin JS.
- Selama eksekusi (Konteks Eksekusi - fase Eksekusi), objek funtion dibuat dengan cepat ( belum dieksekusi ), akan ditugaskan ke variabel 'sapa' dan dapat dipanggil menggunakan 'salam (' nama samaran ')'.
3. Ekspresi Funtion Segera Diminta:
Contoh:
Cara IIFE bekerja :
- Perhatikan '()' segera setelah deklarasi fungsi. Setiap objek funtion memiliki properti 'CODE' yang melekat padanya yang dapat dipanggil. Dan kita bisa menyebutnya (atau memintanya) menggunakan kawat gigi '()'.
- Jadi di sini, selama eksekusi (Execution Context - Execute Phase), objek fungsi dibuat dan dieksekusi pada saat yang sama - Jadi sekarang, variabel ucapan, alih-alih memiliki objek funtion, memiliki nilai balik (string)
Usecase khas IIFE di JS:
Pola IIFE berikut ini cukup umum digunakan.
b) Kami menjalankan fungsi ini pada saat yang sama menggunakan () di akhir itu.
Jadi fungsi ini dibuat dan dijalankan pada saat yang sama (IIFE).
Penggunaan penting untuk IIFE:
IIFE menjaga keamanan kode kita.
- IIFE, sebagai fungsi, memiliki konteks eksekusi sendiri, yang berarti semua variabel yang dibuat di dalamnya adalah lokal untuk fungsi ini dan tidak dibagi dengan konteks eksekusi global.
Misalkan saya memiliki file JS lain (test1.js) yang digunakan dalam aplikasi saya bersama dengan iife.js (lihat di bawah).
Jadi IIFE membantu kita menulis kode aman di mana kita tidak bertabrakan dengan objek global secara tidak sengaja.
sumber
Itu adalah fungsi anonim yang dapat digunakan sendiri .
Lihatlah penjelasan W3Schools tentang fungsi self-invaging .
sumber
(function named(){console.log("Hello");}());
<- mengeksekusi fungsi bernama fungsiIni adalah fungsi anonim yang aktif sendiri. Ini dieksekusi saat didefinisikan. Yang berarti fungsi ini didefinisikan dan memanggil dirinya sendiri segera setelah definisi.
Dan penjelasan sintaksnya adalah: Fungsi dalam
()
tanda kurung pertama adalah fungsi yang tidak memiliki nama dan dengan();
tanda kurung berikutnya Anda dapat memahami bahwa itu dipanggil pada saat itu didefinisikan. Dan Anda bisa memberikan argumen apa pun dalam()
tanda kurung kedua yang akan diambil dalam fungsi yang ada di tanda kurung pertama. Lihat contoh ini:Di sini 'objek' yang Anda lewati akan dapat diakses di dalam fungsi dengan 'obj', karena Anda meraihnya dalam tanda tangan fungsi.
sumber
Mulai di sini:
Masukkan fungsi dan tidak lagi mendunia - tujuan utama Anda.
Segera panggil fungsi - oops:
Gunakan tanda kurung untuk menghindari kesalahan sintaksis:
Anda dapat mengabaikan nama fungsi:
Tidak perlu lebih rumit dari itu.
sumber
Uncaught SyntaxError: Unexpected token )
daripada menyebutkan fungsi panah. Bisakah Anda berbagi biola dengan itu melempar kesalahan fungsi panah?Menjalankan fungsi anonim. Ini dieksekusi segera setelah dibuat.
Salah satu contoh pendek dan dummy di mana ini berguna adalah:
Jadi, alih-alih membuat daftar setiap kali, Anda membuatnya hanya sekali (kurang overhead).
sumber
Fungsi self-executing biasanya digunakan untuk merangkum konteks dan menghindari kolusi nama. Variabel apa pun yang Anda tetapkan di dalam (function () {..}) () tidak bersifat global.
Kode
menghasilkan output ini:
Dengan menggunakan sintaks ini Anda menghindari bertabrakan dengan variabel global yang dideklarasikan di tempat lain dalam kode JavaScript Anda.
sumber
var same_name = 1; var myVar = function() { var same_name = 2; console.log(same_name); }; myVar(); console.log(same_name);
Akan memiliki hasil yang sama.Ini disebut IIFE - Ekspresi Fungsi Segera Diminta. Berikut adalah contoh untuk menunjukkan sintaks dan penggunaannya. Ini digunakan untuk lingkup penggunaan variabel hanya sampai fungsi dan bukan di luar.
sumber
IIFE (Ekspresi fungsi yang segera dipanggil) adalah fungsi yang dieksekusi segera setelah skrip dimuat dan hilang.
Pertimbangkan fungsi di bawah ini yang ditulis dalam file bernama iife.js
Kode di atas ini akan dieksekusi segera setelah Anda memuat iife.js dan akan mencetak ' Hello Stackoverflow! konsol 'pada alat pengembang'.
Untuk penjelasan terperinci, lihat Ekspresi Fungsi Segera-Diminta (IIFE)
sumber
Satu lagi use case adalah memoisasi di mana objek cache tidak bersifat global:
sumber
An
IIFE
juga dapat digambarkan sebagai fungsi anonim yang aktif sendiri. Penggunaannya yang paling umum adalah untuk membatasi ruang lingkup variabel yang dibuat melalui var atau untuk merangkum konteks untuk menghindari tabrakan nama.sumber
Alasan self-membangkitkan fungsi anonim digunakan adalah mereka tidak boleh dipanggil oleh kode lain karena mereka "mengatur" kode yang dimaksudkan untuk dipanggil IS (bersama dengan memberikan ruang lingkup ke fungsi dan variabel).
Dengan kata lain, mereka seperti program yang "membuat kelas ', pada awal program. Setelah mereka instantiated (secara otomatis), satu-satunya fungsi yang tersedia adalah yang dikembalikan oleh fungsi anonim. Namun, semua yang lain' fungsi-fungsi tersembunyi masih ada, bersama dengan status apa pun (variabel ditetapkan selama pembuatan lingkup).
Sangat keren.
sumber
Kode berikut:
disebut ekspresi fungsi yang segera dipanggil (IIFE).
Ini disebut ekspresi fungsi karena
( yourcode )
operator dalam Javascript memaksanya menjadi ekspresi. Perbedaan antara ekspresi fungsi dan deklarasi fungsi adalah sebagai berikut:Ekspresi hanyalah sekelompok kode yang dapat dievaluasi menjadi nilai tunggal . Dalam kasus ekspresi dalam contoh di atas nilai ini adalah objek fungsi tunggal .
Setelah kami memiliki ekspresi yang mengevaluasi ke objek fungsi kami kemudian dapat segera memanggil objek fungsi dengan
()
operator. Sebagai contoh:Mengapa ini berguna?
Ketika kita berhadapan dengan basis kode besar dan / atau ketika kita mengimpor berbagai pustaka, peluang penamaan konflik meningkat. Ketika kita menulis bagian-bagian tertentu dari kode kita yang terkait (dan dengan demikian menggunakan variabel yang sama) di dalam IIFE semua variabel dan nama fungsi di-scoped ke kurung fungsi IIFE . Ini mengurangi kemungkinan penamaan konflik dan memungkinkan Anda menamainya dengan lebih ceroboh (mis. Anda tidak harus mengawasinya).
sumber
Dalam sintaks ES6 (memposting untuk saya sendiri, karena saya terus mendarat di halaman ini mencari contoh cepat):
sumber
Fungsi ini disebut fungsi memohon sendiri. Fungsi self-invoking (juga disebut self-executing) adalah fungsi tanpa nama (anonim) yang dipanggil (Dipanggil) segera setelah definisinya. Baca lebih lanjut di sini
Apa fungsi-fungsi ini lakukan adalah bahwa ketika fungsi didefinisikan, fungsi segera dipanggil, yang menghemat waktu dan baris kode tambahan (dibandingkan dengan memanggilnya pada baris terpisah).
Berikut ini sebuah contoh:
sumber
Ini adalah penjelasan yang lebih mendalam tentang mengapa Anda akan menggunakan ini:
"Alasan utama untuk menggunakan IIFE adalah untuk mendapatkan privasi data. Karena JavaScript's var lingkup variabel ke fungsi yang mengandung, setiap variabel yang dinyatakan dalam IIFE tidak dapat diakses oleh dunia luar."
http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html
sumber
Ini adalah ekspresi fungsi, singkatan dari Immediately Invoked Function Expression (IIFE). IIFE hanyalah sebuah fungsi yang dieksekusi segera setelah itu dibuat. Jadi insted dari fungsi harus menunggu sampai dipanggil untuk dieksekusi, IIFE dieksekusi segera. Mari kita membangun IIFE dengan contoh. Misalkan kita memiliki fungsi add yang mengambil dua bilangan bulat sebagai args dan mengembalikan jumlah mari kita buat fungsi add menjadi IIFE,
Langkah 1: Tentukan fungsi
Langkah2: Panggil fungsi dengan membungkus seluruh deklarasi fungsi menjadi tanda kurung
Langkah 3: Untuk membuka fungsi dengan segera, cukup hapus teks 'tambah' dari panggilan.
Alasan utama untuk menggunakan IFFE adalah untuk mempertahankan ruang lingkup pribadi dalam fungsi Anda. Di dalam kode javascript Anda ingin memastikannya, Anda tidak mengabaikan variabel global apa pun. Terkadang Anda mungkin secara tidak sengaja mendefinisikan variabel yang menimpa variabel global. Mari kita coba dengan contoh. misalkan kita memiliki file html bernama iffe.html dan kode di dalam tag tubuh adalah-
Nah, kode di atas akan mengeksekusi tanpa pertanyaan, sekarang asumsikan Anda mendeklarasikan variabel bernama dokumen yang tidak disengaja atau disengaja.
Anda akan berakhir di SyntaxError : pernyataan ulang dokumen properti global yang tidak dapat dikonfigurasi.
Tetapi jika keinginan Anda adalah untuk mendeklarasikan documet nama variabel, Anda dapat melakukannya dengan menggunakan IFFE.
Keluaran:
Mari kita coba dengan contoh lain, misalkan kita memiliki objek kalkulator seperti di bawah-
Yah itu berfungsi seperti pesona, bagaimana jika kita tidak sengaja menetapkan ulang nilai objek kalkulator.
ya Anda akan berakhir dengan TypeError: calculator.mul bukan fungsi iffe.html
Tetapi dengan bantuan IFFE kita dapat membuat ruang lingkup pribadi di mana kita dapat membuat kalkulator nama variabel lain dan menggunakannya;
Keluaran:
sumber
Saya pikir 2 set kurung membuatnya agak membingungkan tapi saya melihat penggunaan lain dalam contoh Google, mereka menggunakan sesuatu yang serupa, saya harap ini akan membantu Anda memahami lebih baik:
jadi jika
windows.app
tidak didefinisikan, makawindow.app = {}
segera dieksekusi, jadiwindow.app
ditugaskan{}
selama evaluasi kondisi, sehingga hasilnya keduanyaapp
danwindow.app
sekarang menjadi{}
, jadi output konsol adalah:sumber
Biasanya, kami tidak menjalankan fungsi segera setelah kami menulisnya di program. Dalam istilah yang sangat sederhana, ketika Anda memanggil fungsi tepat setelah pembuatannya, itu disebut IIFE - nama mewah.
sumber
Biasanya, kode JavaScript memiliki cakupan global dalam aplikasi. Ketika kami mendeklarasikan variabel global di dalamnya, ada peluang untuk menggunakan variabel duplikat yang sama di beberapa area pengembangan lainnya untuk beberapa tujuan lain. Karena duplikasi ini mungkin ada beberapa kesalahan. Jadi kita bisa menghindari variabel global ini dengan menggunakan ekspresi fungsi yang langsung dipanggil, ekspresi ini adalah ekspresi yang mengeksekusi sendiri. Ketika kita membuat kode kita di dalam IIFE ini variabel global ekspresi akan seperti cakupan lokal dan variabel lokal.
Dua cara kita dapat membuat IIFE
ATAU
Dalam cuplikan kode di atas, " var app " adalah variabel lokal sekarang.
sumber