Mengapa Anda perlu menjalankan fungsi anonim pada baris yang sama?

Saya membaca beberapa posting tentang penutupan dan melihat ini di mana-mana, tetapi tidak ada penjelasan yang jelas tentang cara kerjanya - setiap kali saya hanya diminta untuk menggunakannya ...:

// Create a new anonymous function, to use as a wrapper
(function(){
    // The variable that would, normally, be global
    var msg = "Thanks for visiting!";

    // Binding a new function to a global object
    window.onunload = function(){
        // Which uses the 'hidden' variable
        alert( msg );
    };
// Close off the anonymous function and execute it
})();

Ok saya melihat bahwa kita akan membuat fungsi anonim baru dan kemudian menjalankannya. Jadi setelah itu kode sederhana ini akan berfungsi (dan itu memang):

(function (msg){alert(msg)})('SO');

Pertanyaan saya adalah sihir apa yang terjadi di sini? Saya berpikir ketika saya menulis:

(function (msg){alert(msg)})

maka fungsi tanpa nama baru akan dibuat seperti fungsi "" (msg) ...

tapi mengapa ini tidak berhasil?

(function (msg){alert(msg)});
('SO');

Mengapa harus di baris yang sama?

Bisakah Anda menunjukkan saya beberapa posting atau memberi saya penjelasan?

Jatuhkan titik koma setelah definisi fungsi.

(function (msg){alert(msg)})
('SO');

Di atas harus bekerja.

Halaman DEMO: https://jsfiddle.net/e7ooeq6m/

Saya telah membahas pola semacam ini di pos ini:

jQuery dan $ pertanyaan

EDIT:

Jika Anda melihat spesifikasi skrip ECMA , ada 3 cara Anda dapat mendefinisikan suatu fungsi. (Halaman 98, Bagian 13 Definisi Fungsi)

1. Menggunakan Function constructor

var sum = new Function('a','b', 'return a + b;');
alert(sum(10, 20)); //alerts 30

2. Menggunakan deklarasi Fungsi.

function sum(a, b)
{
    return a + b;
}

alert(sum(10, 10)); //Alerts 20;

3. Ekspresi Fungsi

var sum = function(a, b) { return a + b; }

alert(sum(5, 5)); // alerts 10

Jadi Anda mungkin bertanya, apa perbedaan antara deklarasi dan ekspresi?

Dari spesifikasi Script ECMA:

FunctionDeclaration: function Identifier (FormalParameterListopt) {FunctionBody}

FunctionExpression: function Identifieropt (FormalParameterListopt) {FunctionBody}

Jika Anda perhatikan, 'pengidentifikasi' adalah opsional untuk ekspresi fungsi. Dan ketika Anda tidak memberikan pengenal, Anda membuat fungsi anonim. Itu tidak berarti bahwa Anda tidak dapat menentukan pengidentifikasi.

Ini berarti mengikuti adalah valid.

var sum = function mySum(a, b) { return a + b; }

Poin penting yang perlu diperhatikan adalah Anda dapat menggunakan 'mySum' hanya di dalam tubuh fungsi mySum, bukan di luar. Lihat contoh berikut:

var test1 = function test2() { alert(typeof test2); }

alert(typeof(test2)); //alerts 'undefined', surprise! 

test1(); //alerts 'function' because test2 is a function.

Demo Langsung

Bandingkan ini dengan

 function test1() { alert(typeof test1) };

 alert(typeof test1); //alerts 'function'

 test1(); //alerts 'function'

Berbekal pengetahuan ini, mari kita coba menganalisis kode Anda.

Ketika Anda memiliki kode seperti,

    function(msg) { alert(msg); }

Anda membuat ekspresi fungsi. Dan Anda bisa menjalankan ekspresi fungsi ini dengan membungkusnya di dalam tanda kurung.

    (function(msg) { alert(msg); })('SO'); //alerts SO.

Ini disebut fungsi yang dipanggil sendiri.

Apa yang Anda lakukan saat menelepon (function(){})mengembalikan objek fungsi. Ketika Anda menambahkannya (), itu dipanggil dan apa pun di tubuh dieksekusi. Yang ;menunjukkan akhir pernyataan, itu sebabnya doa ke-2 gagal.

Satu hal yang saya anggap membingungkan adalah "()" adalah operator pengelompokan.

Inilah fungsi dasar Anda yang dideklarasikan.

Ex. 1:

var message = 'SO';

function foo(msg) {
    alert(msg);
}

foo(message);

Fungsi adalah objek, dan dapat dikelompokkan. Jadi mari kita melempar orangtua di sekitar fungsi.

Ex. 2:

var message = 'SO';

function foo(msg) {  //declares foo
    alert(msg);
}

(foo)(message);     // calls foo

Sekarang alih-alih mendeklarasikan dan langsung memanggil fungsi yang sama, kita dapat menggunakan substitusi dasar untuk mendeklarasikannya seperti kita menyebutnya.

Ex. 3.

var message = 'SO';

(function foo(msg) {
    alert(msg);
})(message);          // declares & calls foo

Akhirnya, kami tidak membutuhkan foo tambahan itu karena kami tidak menggunakan nama untuk memanggilnya! Fungsinya bisa anonim.

Ex. 4.

var message = 'SO';

(function (msg) {   // remove unnecessary reference to foo
    alert(msg);
})(message);

Untuk menjawab pertanyaan Anda, lihat kembali Contoh 2. Baris pertama Anda menyatakan beberapa fungsi tanpa nama dan mengelompokkannya, tetapi tidak menyebutnya. Baris kedua mengelompokkan string. Keduanya tidak melakukan apa pun. (Contoh pertama Vincent.)

(function (msg){alert(msg)});  
('SO');                       // nothing.

(foo); 
(msg); //Still nothing.

Tapi

(foo)
(msg); //works

Fungsi anonim bukanlah fungsi dengan nama "". Ini hanyalah sebuah fungsi tanpa nama.

Seperti nilai lain dalam JavaScript, fungsi tidak perlu nama yang akan dibuat. Meskipun jauh lebih berguna untuk benar-benar mengikatnya ke nama sama seperti nilai lainnya.

Tetapi seperti nilai lainnya, Anda terkadang ingin menggunakannya tanpa mengikatnya ke nama. Itulah pola yang membangkitkan semangat.

Ini adalah fungsi dan angka, tidak terikat, mereka tidak melakukan apa-apa dan tidak pernah dapat digunakan:

function(){ alert("plop"); }
2;

Jadi kita harus menyimpannya dalam variabel untuk dapat menggunakannya, sama seperti nilai lainnya:

var f = function(){ alert("plop"); }
var n = 2;

Anda juga dapat menggunakan gula sintaksis untuk mengikat fungsi ke variabel:

function f(){ alert("plop"); }
var n = 2;

Tetapi jika penamaan mereka tidak diperlukan dan akan menyebabkan lebih banyak kebingungan dan lebih sedikit keterbacaan, Anda bisa langsung menggunakannya.

(function(){ alert("plop"); })(); // will display "plop"
alert(2 + 3); // will display 5

Di sini, fungsi saya dan nomor saya tidak terikat pada variabel, tetapi mereka masih dapat digunakan.

Mengatakan seperti ini, sepertinya fungsi self-invaging tidak memiliki nilai nyata. Tetapi Anda harus ingat bahwa pembatas ruang lingkup JavaScript adalah fungsi dan bukan blok ({}).

Jadi fungsi self-invoking sebenarnya memiliki arti yang sama dengan blok C ++, C # atau Java. Yang berarti bahwa variabel yang dibuat di dalam tidak akan "bocor" di luar ruang lingkup. Ini sangat berguna dalam JavaScript agar tidak mencemari ruang lingkup global.

Itu hanya cara kerja JavaScript. Anda dapat mendeklarasikan fungsi bernama:

function foo(msg){
   alert(msg);
}

Dan menyebutnya:

foo("Hi!");

Atau, Anda dapat mendeklarasikan fungsi anonim:

var foo = function (msg) {
    alert(msg);
}

Dan sebut itu:

foo("Hi!");

Atau, Anda tidak bisa mengikat fungsi ke nama:

(function(msg){
   alert(msg);
 })("Hi!");

Fungsi juga dapat mengembalikan fungsi:

function make_foo() {
    return function(msg){ alert(msg) };
}

(make_foo())("Hi!");

Tidak ada artinya bahwa setiap variabel yang didefinisikan dengan "var" dalam tubuh make_fooakan ditutup oleh setiap fungsi yang dikembalikan olehmake_foo . Ini adalah penutupan, dan itu berarti bahwa setiap perubahan yang dilakukan pada nilai oleh satu fungsi akan terlihat oleh yang lain.

Ini memungkinkan Anda merangkum informasi, jika Anda menginginkan:

function make_greeter(msg){
    return function() { alert(msg) };
}

var hello = make_greeter("Hello!");

hello();

Hanya saja hampir setiap bahasa pemrograman tetapi Java berfungsi.

Kode yang Anda tunjukkan,

(function (msg){alert(msg)});
('SO');

terdiri dari dua pernyataan. Yang pertama adalah ekspresi yang menghasilkan objek fungsi (yang kemudian akan menjadi sampah yang dikumpulkan karena tidak disimpan). Yang kedua adalah ekspresi yang menghasilkan string. Untuk menerapkan fungsi ke string, Anda harus meneruskan string sebagai argumen ke fungsi ketika itu dibuat (yang juga Anda tunjukkan di atas), atau Anda harus benar-benar menyimpan fungsi dalam variabel, sehingga Anda bisa menerapkannya di lain waktu, di waktu luang Anda. Seperti itu:

var f = (function (msg){alert(msg)});
f('SO');

Perhatikan bahwa dengan menyimpan fungsi anonim (fungsi lambda) dalam variabel, Anda secara efektif memberinya nama. Karenanya Anda dapat mendefinisikan fungsi biasa:

function f(msg) {alert(msg)};
f('SO');

Dalam ringkasan komentar sebelumnya:

function() {
  alert("hello");
}();

ketika tidak ditugaskan ke variabel, menghasilkan kesalahan sintaksis. Kode diuraikan sebagai pernyataan fungsi (atau definisi), yang menjadikan tanda kurung tutup secara sintaksis salah. Menambahkan tanda kurung di sekitar bagian fungsi memberi tahu juru bahasa (dan programmer) bahwa ini adalah ekspresi fungsi (atau doa), seperti dalam

(function() {
  alert("hello");
})();

Ini adalah fungsi self-invaging, artinya ia dibuat secara anonim dan berjalan segera karena doa terjadi di baris yang sama di mana ia dinyatakan. Fungsi diri memohon hal ini ditunjukkan dengan sintaks yang akrab memanggil fungsi tanpa argumen, ditambah menambahkan tanda kurung di sekitar nama fungsi: (myFunction)();.

Ada sintaks fungsi JavaScript diskusi SO yang baik .

Jawaban ini tidak sepenuhnya terkait dengan pertanyaan, tetapi Anda mungkin tertarik untuk mengetahui bahwa fitur sintaksis semacam ini tidak khusus untuk fungsi. Misalnya, kita selalu dapat melakukan sesuatu seperti ini:

alert(
    {foo: "I am foo", bar: "I am bar"}.foo
); // alerts "I am foo"

Terkait dengan fungsi. Karena mereka adalah objek, yang mewarisi dari Function.prototype, kita dapat melakukan hal-hal seperti:

Function.prototype.foo = function () {
    return function () {
        alert("foo");
    };
};

var bar = (function () {}).foo();

bar(); // alerts foo

Dan Anda tahu, kita bahkan tidak perlu mengelilingi fungsi dengan tanda kurung untuk menjalankannya. Lagi pula, selama kita mencoba untuk menetapkan hasil ke variabel.

var x = function () {} (); // this function is executed but does nothing

function () {} (); // syntax error

Satu hal lain yang dapat Anda lakukan dengan fungsi, segera setelah Anda mendeklarasikannya, adalah untuk memanggil newoperator atas mereka dan mendapatkan objek. Berikut ini adalah setara:

var obj = new function () {
    this.foo = "bar";
};

var obj = {
    foo : "bar"
};

Ada satu lagi fungsi yang dimiliki fungsi JavaScript. Jika Anda ingin memanggil fungsi anonim yang sama secara rekursif.

(function forInternalOnly(){

  //you can use forInternalOnly to call this anonymous function
  /// forInternalOnly can be used inside function only, like
  var result = forInternalOnly();
})();

//this will not work
forInternalOnly();// no such a method exist

Pemahaman saya tentang pertanyaan penanya adalah sedemikian rupa sehingga:

Bagaimana cara kerja sihir ini:

(function(){}) ('input')   // Used in his example

Saya mungkin salah. Namun, praktik yang biasa dilakukan orang adalah:

(function(){}('input') )

Alasannya adalah sedemikian sehingga JavaScript tanda kurung AKA (), tidak dapat berisi pernyataan dan ketika parser menemukan kata kunci fungsi, ia tahu untuk menguraikannya sebagai ekspresi fungsi dan bukan deklarasi fungsi.

Sumber: posting blog Ekspresi Fungsi Segera Dibatalkan (IIFE)

contoh tanpa tanda kurung:

void function (msg) { alert(msg); }
('SO');

(Ini adalah satu-satunya penggunaan void, afaik)

atau

var a = function (msg) { alert(msg); }
('SO');

atau

!function (msg) { alert(msg); }
('SO');

bekerja juga. yang voidmenyebabkan ekspresi untuk mengevaluasi, serta tugas dan bang. yang terakhir bekerja dengan ~, +, -, delete, typeof, beberapa operator unary ( voidsatu juga). tidak bekerja adalah penyebab ++, --karena persyaratan variabel.

istirahat baris tidak perlu.

Ini adalah fungsi anonim yang dijalankan sendiri. Set kurung pertama berisi ekspresi yang akan dieksekusi, dan set kedua kurung mengeksekusi ekspresi tersebut.

(function () {
    return ( 10 + 20 );
})();

Peter Michaux membahas perbedaan dalam Sepasang Kurung Yang Penting .

Ini adalah konstruksi yang berguna ketika mencoba untuk menyembunyikan variabel dari namespace induk. Semua kode di dalam fungsi terkandung dalam ruang lingkup fungsi pribadi, artinya tidak dapat diakses sama sekali dari luar fungsi, membuatnya benar-benar pribadi.

Lihat:

1. Penutupan (ilmu komputer)
2. JavaScript Namespacing
3. Pasangan Penting Tanda Kurung Javascript

Sudut pandang lain

Pertama, Anda dapat mendeklarasikan fungsi anonim:

var foo = function(msg){
 alert(msg);
}

Maka Anda menyebutnya:

foo ('Few');

Karena foo = function (msg) {alert (msg);} sehingga Anda dapat mengganti foo sebagai:

function(msg){
 alert(msg);
} ('Few');

Tetapi Anda harus membungkus seluruh fungsi anonim Anda di dalam sepasang kawat gigi untuk menghindari kesalahan sintaks dari mendeklarasikan fungsi saat parsing. Lalu kita punya,

(function(msg){
 alert(msg);
}) ('Few');

Dengan cara ini, mudah dimengerti bagi saya.

Ketika Anda melakukannya:

(function (msg){alert(msg)});
('SO');

Anda mengakhiri fungsi sebelumnya ('SO')karena titik koma. Jika Anda hanya menulis:

(function (msg){alert(msg)})
('SO');

Itu akan berhasil.

Contoh kerja: http://jsfiddle.net/oliverni/dbVjg/

Alasan sederhana mengapa itu tidak berhasil bukan karena ;menunjukkan akhir dari fungsi anonim. Itu karena tanpa ()di akhir panggilan fungsi, itu bukan panggilan fungsi. Itu adalah,

function help() {return true;}

Jika Anda memanggil result = help();ini adalah panggilan ke suatu fungsi dan akan mengembalikan true.

Jika Anda menelepon result = help; ini bukan panggilan. Ini adalah tugas di mana bantuan diperlakukan seperti data yang akan ditugaskan untuk hasil.

Apa yang Anda lakukan adalah mendeklarasikan / membuat instance fungsi anonim dengan menambahkan tanda titik koma,

(function (msg) { /* Code here */ });

dan kemudian mencoba menyebutnya dalam pernyataan lain hanya dengan menggunakan tanda kurung ... Jelas karena fungsi tidak memiliki nama, tetapi ini tidak akan berfungsi:

('SO');

Penerjemah melihat tanda kurung pada baris kedua sebagai instruksi / pernyataan baru, dan karenanya tidak berfungsi, bahkan jika Anda melakukannya seperti ini:

(function (msg){/*code here*/});('SO');

Masih tidak berfungsi, tetapi berfungsi saat Anda menghapus titik koma karena penerjemah mengabaikan spasi putih dan gerbong dan melihat kode lengkap sebagai satu pernyataan.

(function (msg){/*code here*/})        // This space is ignored by the interpreter
('SO');

Kesimpulan: panggilan fungsi bukan panggilan fungsi tanpa ()di akhir kecuali dalam kondisi tertentu seperti dipanggil oleh fungsi lain, yaitu, onload = 'bantuan' akan menjalankan fungsi bantuan meskipun tanda kurung tidak dimasukkan. Saya percaya setTimeout dan setInterval juga memungkinkan pemanggilan fungsi jenis ini juga, dan saya juga percaya bahwa penerjemah menambahkan tanda kurung di belakang layar bagaimanapun juga yang membawa kita kembali ke "pemanggilan fungsi bukan pemanggilan fungsi tanpa tanda kurung".

(function (msg){alert(msg)})
('SO');

Ini adalah metode umum menggunakan fungsi anonim sebagai penutup yang digunakan banyak kerangka kerja JavaScript.

Fungsi ini dipanggil secara otomatis ketika kode dikompilasi.

Jika menempatkan ;pada baris pertama, kompilator memperlakukannya sebagai dua baris yang berbeda. Jadi Anda tidak bisa mendapatkan hasil yang sama seperti di atas.

Ini juga dapat ditulis sebagai:

(function (msg){alert(msg)}('SO'));

Untuk detail lebih lanjut, lihatlah pada Fungsi JavaScript / Anonim .

1. Fungsi anonim adalah fungsi yang secara dinamis dideklarasikan pada saat runtime. Mereka disebut fungsi anonim karena mereka tidak diberi nama dengan cara yang sama seperti fungsi normal.

   Fungsi anonim dideklarasikan menggunakan operator fungsi alih-alih deklarasi fungsi. Anda dapat menggunakan operator fungsi untuk membuat fungsi baru di mana pun valid untuk meletakkan ekspresi. Misalnya Anda dapat mendeklarasikan fungsi baru sebagai parameter untuk panggilan fungsi atau untuk menetapkan properti objek lain.

   Berikut adalah contoh khas dari fungsi bernama:

   function flyToTheMoon () {alert ("Zoom! Zoom! Zoom!"); } terbang ke bulan(); Berikut ini contoh yang sama dibuat sebagai fungsi anonim:

   var flyToTheMoon = function () {alert ("Zoom! Zoom! Zoom!"); } terbang ke bulan();

   Untuk detail silakan baca di sini:

   http://helephant.com/2008/08/23/javascript-anonymous-functions/

IIFE hanya mengelompokkan fungsi dan menyembunyikan msgvariabel agar tidak "mencemari" namespace global. Pada kenyataannya, tetap sederhana dan lakukan seperti di bawah ini kecuali Anda membangun situs web miliaran dolar.

var msg = "later dude";
window.onunload = function(msg){
  alert( msg );
};

Anda dapat namespace msgproperti Anda menggunakan Pola Penyingkapan Modul seperti:

var myScript = (function() {
    var pub = {};
    //myscript.msg
    pub.msg = "later dude";
    window.onunload = function(msg) {
        alert(msg);
    };
    //API
    return pub;
}());

Fungsi anonim dimaksudkan untuk menangani satu-shot di mana Anda mendefinisikan fungsi dengan cepat sehingga menghasilkan output dari Anda dari input yang Anda berikan. Kecuali Anda tidak memberikan input. Alih-alih, Anda menulis sesuatu di baris kedua ('SO'); - pernyataan independen yang tidak ada hubungannya dengan fungsi. Apa yang kamu harapkan? :)