Saya telah membaca banyak Javascript belakangan ini dan saya telah memperhatikan bahwa seluruh file dibungkus seperti berikut dalam file .js yang akan diimpor.

(function() {
    ... 
    code
    ...
})();

Apa alasan untuk melakukan ini daripada satu set fungsi konstruktor yang sederhana?

Biasanya untuk namespace (lihat nanti) dan mengontrol visibilitas fungsi anggota dan / atau variabel. Anggap saja seperti definisi objek. Nama teknis untuk itu adalah Ekspresi Fungsi Segera Dibawa (IIFE). Plugin jQuery biasanya ditulis seperti ini.

Di Javascript, Anda bisa membuat fungsi sarang. Jadi, yang berikut ini legal:

function outerFunction() {
   function innerFunction() {
      // code
   }
}

Sekarang Anda dapat menelepon outerFunction(), tetapi visiblity innerFunction()terbatas pada ruang lingkup outerFunction(), yang berarti pribadi outerFunction(). Ini pada dasarnya mengikuti prinsip yang sama dengan variabel dalam Javascript:

var globalVariable;

function someFunction() {
   var localVariable;
}

Sejalan dengan itu:

function globalFunction() {

   var localFunction1 = function() {
       //I'm anonymous! But localFunction1 is a reference to me!
   };

   function localFunction2() {
      //I'm named!
   }
}

Dalam skenario di atas, Anda dapat menelepon globalFunction()dari mana saja, tetapi Anda tidak dapat menelepon localFunction1atau localFunction2.

Apa yang Anda lakukan saat menulis (function() { ... })(), adalah membuat kode di dalam set kurung pertama sebagai fungsi literal (artinya seluruh "objek" sebenarnya adalah sebuah fungsi). Setelah itu, Anda menjalankan sendiri fungsi (final ()) yang baru saja Anda tetapkan. Jadi keuntungan utama dari ini seperti yang saya sebutkan sebelumnya, adalah Anda dapat memiliki metode / fungsi dan properti pribadi:

(function() {
   var private_var;

   function private_function() {
     //code
   }
})();

Pada contoh pertama, Anda akan secara eksplisit memanggil globalFunctionnama untuk menjalankannya. Artinya, Anda hanya perlu melakukannya globalFunction()untuk menjalankannya. Tetapi dalam contoh di atas, Anda tidak hanya mendefinisikan suatu fungsi; Anda mendefinisikan dan menjalankannya dalam sekali jalan. Ini berarti bahwa ketika file JavaScript Anda dimuat, segera dieksekusi. Tentu saja, Anda bisa melakukan:

function globalFunction() {
    // code
}
globalFunction();

Perilaku ini sebagian besar akan sama kecuali untuk satu perbedaan signifikan: Anda menghindari mencemari ruang lingkup global ketika Anda menggunakan IIFE (sebagai akibatnya itu juga berarti bahwa Anda tidak dapat memanggil fungsi beberapa kali karena tidak memiliki nama, tetapi karena fungsi ini hanya dimaksudkan untuk dieksekusi setelah itu benar-benar bukan masalah).

Hal yang rapi dengan IIFE adalah bahwa Anda juga dapat mendefinisikan hal-hal di dalam dan hanya mengekspos bagian yang Anda inginkan ke dunia luar begitu (contoh namespacing sehingga Anda pada dasarnya dapat membuat perpustakaan / plugin Anda sendiri):

var myPlugin = (function() {
 var private_var;

 function private_function() {
 }

 return {
    public_function1: function() {
    },
    public_function2: function() {
    }
 }
})()

Sekarang Anda dapat menelepon myPlugin.public_function1(), tetapi Anda tidak dapat mengakses private_function()! Sangat mirip dengan definisi kelas. Untuk memahami ini dengan lebih baik, saya merekomendasikan tautan berikut untuk bacaan lebih lanjut:

• Menamai Javascript Anda
• Anggota pribadi dalam Javascript (oleh Douglas Crockford)

EDIT

Saya lupa menyebutkan. Di final itu (), Anda bisa melewati apa pun yang Anda inginkan di dalam. Misalnya, ketika Anda membuat plugin jQuery, Anda meneruskan jQueryatau $suka:

(function(jQ) { ... code ... })(jQuery) 

Jadi yang Anda lakukan di sini adalah mendefinisikan fungsi yang mengambil satu parameter (disebut jQ, variabel lokal, dan hanya diketahui oleh fungsi itu). Kemudian Anda menjalankan fungsi sendiri dan mengirimkan parameter (juga disebut jQuery, tetapi yang ini dari dunia luar dan referensi ke jQuery aktual itu sendiri). Tidak perlu mendesak untuk melakukan ini, tetapi ada beberapa keuntungan:

• Anda dapat mendefinisikan ulang parameter global dan memberikannya nama yang masuk akal dalam lingkup lokal.
• Ada sedikit keuntungan kinerja karena lebih cepat untuk mencari hal-hal di lingkup lokal daripada harus berjalan naik rantai lingkup ke lingkup global.
• Ada manfaat untuk kompresi (minifikasi).

Sebelumnya saya menjelaskan bagaimana fungsi-fungsi ini berjalan secara otomatis pada saat startup, tetapi jika mereka berjalan secara otomatis, siapa yang memberikan argumen? Teknik ini mengasumsikan bahwa semua parameter yang Anda butuhkan sudah didefinisikan sebagai variabel global. Jadi jika jQuery belum didefinisikan sebagai variabel global, contoh ini tidak akan berfungsi. Seperti yang Anda duga, satu hal yang dilakukan jquery.js saat inisialisasi adalah mendefinisikan variabel global 'jQuery', serta variabel global '$' yang lebih terkenal, yang memungkinkan kode ini berfungsi setelah jQuery dimasukkan.

Pendeknya

Ringkasan

Dalam bentuknya yang paling sederhana, teknik ini bertujuan untuk membungkus kode di dalam lingkup fungsi .

Ini membantu mengurangi kemungkinan:

• berbenturan dengan aplikasi / perpustakaan lain
• ruang lingkup unggul (kemungkinan terbesar) yang berpolusi

Itu tidak mendeteksi ketika dokumen sudah siap - itu bukan semacam document.onloadatau tidakwindow.onload

Umumnya dikenal sebagai Immediately Invoked Function Expression (IIFE)atau Self Executing Anonymous Function.

Kode Dijelaskan

var someFunction = function(){ console.log('wagwan!'); };

(function() {                   /* function scope starts here */
  console.log('start of IIFE');

  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();                           /* function scope ends */

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Dalam contoh di atas, variabel apa pun yang didefinisikan dalam fungsi (yaitu dideklarasikan menggunakan var) akan menjadi "pribadi" dan dapat diakses dalam lingkup fungsi HANYA (seperti yang dikatakan Vivin Paliath). Dengan kata lain, variabel-variabel ini tidak terlihat / terjangkau di luar fungsi. Lihat demo langsung .

Javascript memiliki fungsi pelingkupan. "Parameter dan variabel yang didefinisikan dalam suatu fungsi tidak terlihat di luar fungsi, dan bahwa variabel yang didefinisikan di mana saja dalam suatu fungsi terlihat di mana-mana dalam fungsi." (dari "Javascript: The Good Parts").

Keterangan lebih lanjut

Kode Alternatif

Pada akhirnya, kode yang diposting sebelumnya juga dapat dilakukan sebagai berikut:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
};

myMainFunction();          // I CALL "myMainFunction" FUNCTION HERE
someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Lihat demo langsung .

Akar

Iterasi 1

Suatu hari, seseorang mungkin berpikir "pasti ada cara untuk menghindari penamaan 'myMainFunction', karena semua yang kita inginkan adalah menjalankannya dengan segera."

Jika Anda kembali ke dasar-dasarnya, Anda mengetahui bahwa:

• expression: sesuatu yang mengevaluasi suatu nilai. yaitu3+11/x
• statement: baris kode melakukan sesuatu TETAPI itu tidak mengevaluasi nilai. yaituif(){}

Demikian pula, ekspresi fungsi mengevaluasi suatu nilai. Dan satu konsekuensi (saya kira?) Adalah mereka dapat langsung dipanggil:

 var italianSayinSomething = function(){ console.log('mamamia!'); }();

Jadi contoh kita yang lebih kompleks menjadi:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
}();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Lihat demo langsung .

Iterasi 2

Langkah selanjutnya adalah pikiran "mengapa var myMainFunction =kita harus menggunakan itu saja !?"

Jawabannya sederhana: coba hapus ini, seperti di bawah ini:

 function(){ console.log('mamamia!'); }();

Lihat demo langsung .

Ini tidak akan berfungsi karena "deklarasi fungsi tidak dapat dimasuki" .

Kuncinya adalah dengan menghapus var myMainFunction =kita mengubah ekspresi fungsi menjadi pernyataan fungsi . Lihat tautan di "Sumberdaya" untuk detail lebih lanjut tentang ini.

Pertanyaan selanjutnya adalah "mengapa saya tidak bisa menyimpannya sebagai ekspresi fungsi dengan sesuatu selain var myMainFunction =?

Jawabannya adalah "Anda bisa", dan sebenarnya ada banyak cara Anda bisa melakukan ini: menambahkan a +, a !, a -, atau mungkin membungkus sepasang tanda kurung (seperti yang sekarang dilakukan oleh konvensi), dan lebih banyak lagi saya percaya. Sebagai contoh:

 (function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.

atau

 +function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console

atau

 -function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console

• Apa yang dilakukan tanda seru sebelum fungsi?
• JavaScript plus masuk di depan nama fungsi

Jadi, setelah modifikasi yang relevan ditambahkan ke apa yang dulunya "Kode Alternatif" kami, kami kembali ke kode yang sama persis seperti yang digunakan dalam contoh "Kode Dijelaskan"

var someFunction = function(){ console.log('wagwan!'); };

(function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Baca lebih lanjut tentang Expressions vs Statements:

• developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Fungsi#Function_constructor_vs._function_declaration_vs._function_expression
• Javascript: perbedaan antara pernyataan dan ekspresi?
• Ekspresi versus Pernyataan

Lingkup Demistifikasi

Satu hal yang mungkin bertanya-tanya adalah "apa yang terjadi ketika Anda TIDAK mendefinisikan variabel 'benar' di dalam fungsi - yaitu melakukan tugas sederhana sebagai gantinya?"

(function() {
  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  myOtherFunction = function(){  /* oops, an assignment instead of a declaration */
    console.log('haha. got ya!');
  };
})();
myOtherFunction();         // reachable, hence works: see in the console
window.myOtherFunction();  // works in the browser, myOtherFunction is then in the global scope
myFunction();              // unreachable, will throw an error, see in the console

Lihat demo langsung .

Pada dasarnya, jika suatu variabel yang tidak dideklarasikan dalam lingkupnya saat ini diberi nilai, maka "lihat rantai lingkup terjadi sampai ia menemukan variabel atau mengenai lingkup global (pada titik mana ia akan membuatnya)".

Ketika di lingkungan browser (vs lingkungan server seperti nodejs) lingkup global ditentukan oleh windowobjek. Karenanya kita bisa melakukannya window.myOtherFunction().

Kiat "Praktik yang baik" pada topik ini adalah untuk selalu digunakan varsaat menentukan apa pun : apakah itu angka, objek, atau fungsi, & bahkan saat dalam lingkup global. Ini membuat kode lebih sederhana.

catatan:

• javascript tidak memiliki block scope(Pembaruan: ruang lingkup variabel lokal ditambahkan dalam ES6 .)
• javascript hanya memiliki function scope& global scope( windowcakupan di lingkungan browser)

Baca lebih lanjut tentang Javascript Scopes:

• Apa tujuan dari kata kunci var dan kapan menggunakannya (atau menghilangkannya)?
• Apa ruang lingkup variabel dalam JavaScript?

Sumber daya

• youtu.be/i_qE1iAmjFg?t=2m15s - Paul Irish menyajikan IIFE pada min 2:15, lihatlah ini!
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
• Buku: Javascript, bagian yang bagus - sangat direkomendasikan
• youtu.be/i_qE1iAmjFg?t=4m36s - Paul Irish menyajikan pola modul pada 4:36

Langkah selanjutnya

Setelah Anda mendapatkan IIFEkonsep ini , itu mengarah ke module pattern, yang biasanya dilakukan dengan memanfaatkan pola IIFE ini. Selamat bersenang-senang :)

Javascript di browser hanya benar-benar memiliki beberapa cakupan efektif: lingkup fungsi dan ruang lingkup global.

Jika variabel tidak dalam lingkup fungsi, itu dalam lingkup global. Dan variabel global umumnya buruk, jadi ini adalah konstruksi untuk menjaga variabel perpustakaan untuk dirinya sendiri.

Itu disebut penutupan. Ini pada dasarnya menyegel kode di dalam fungsi sehingga perpustakaan lain tidak mengganggu itu. Ini mirip dengan membuat namespace dalam bahasa yang dikompilasi.

Contoh. Misalkan saya menulis:

(function() {

    var x = 2;

    // do stuff with x

})();

Sekarang perpustakaan lain tidak dapat mengakses variabel yang xsaya buat untuk digunakan di perpustakaan saya.

Anda dapat menggunakan penutupan fungsi sebagai data dalam ekspresi yang lebih besar juga, seperti dalam metode ini menentukan dukungan browser untuk beberapa objek html5.

   navigator.html5={
     canvas: (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
     })(),
     localStorage: (function(){
      return !!window.localStorage;
     })(),
     webworkers: (function(){
      return !!window.Worker;
     })(),
     offline: (function(){
      return !!window.applicationCache;
     })()
    }

Selain menjaga variabel lokal, satu penggunaan yang sangat berguna adalah ketika menulis perpustakaan menggunakan variabel global, Anda bisa memberinya nama variabel yang lebih pendek untuk digunakan dalam perpustakaan. Ini sering digunakan dalam menulis plugin jQuery, karena jQuery memungkinkan Anda untuk menonaktifkan $ variabel yang menunjuk ke jQuery, menggunakan jQuery.noConflict (). Jika dinonaktifkan, kode Anda masih dapat menggunakan $ dan tidak rusak jika Anda hanya melakukannya:

(function($) { ...code...})(jQuery);

1. Untuk menghindari bentrok dengan metode / pustaka lain di jendela yang sama,
2. Hindari ruang lingkup Global, jadikan ruang lingkup lokal,
3. Untuk mempercepat proses debug (lingkup lokal),
4. JavaScript hanya memiliki lingkup fungsi, sehingga akan membantu dalam kompilasi kode juga.

Kita juga harus menggunakan 'gunakan ketat' dalam fungsi lingkup untuk memastikan bahwa kode harus dieksekusi dalam "mode ketat". Kode contoh ditunjukkan di bawah ini

(function() {
    'use strict';

    //Your code from here
})();