Bagaimana cara kerja sintaksis JavaScript / jQuery ini: (fungsi (jendela, tidak terdefinisi) {}) (jendela)?

Pernahkah Anda melihat di bawah kap di kode sumber jQuery 1.4 dan perhatikan bagaimana itu dienkapsulasi dengan cara berikut:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Saya telah membaca sebuah artikel tentang JavaScript Namespacing dan satu lagi yang disebut " Sepasang Penting Orangtua ", jadi saya tahu beberapa tentang apa yang terjadi di sini.

Tapi saya belum pernah melihat sintaks khusus ini sebelumnya. Apa yang undefineddilakukan di sana? Dan mengapa windowharus dilewati dan kemudian muncul di akhir lagi?

Undefined adalah variabel normal dan dapat diubah dengan undefined = "new value";. Jadi jQuery membuat variabel "tidak terdefinisi" lokal yang BENAR-BENAR tidak terdefinisi.

Variabel jendela dibuat lokal untuk alasan kinerja. Karena ketika JavaScript mencari variabel, pertama-tama ia akan melalui variabel lokal hingga ia menemukan nama variabel. Ketika tidak ditemukan, JavaScript melewati ruang lingkup berikutnya dll. Hingga filter melalui variabel global. Jadi, jika variabel jendela dibuat lokal, JavaScript dapat melihatnya lebih cepat. Informasi lebih lanjut: Percepat JavaScript Anda - Nicholas C. Zakas

Tidak terdefinisi

Dengan mendeklarasikan undefined sebagai argumen tetapi tidak pernah memberikan nilai padanya memastikan bahwa itu selalu tidak terdefinisi, karena itu hanya variabel dalam lingkup global yang dapat ditimpa. Ini membuat a === undefinedalternatif yang aman typeof a == 'undefined', yang menghemat beberapa karakter. Ini juga membuat kode lebih ramah-minifier, seperti undefineddapat disingkat menjadi u, misalnya, menyimpan beberapa karakter lagi.

Jendela

Lulus windowsebagai argumen menyimpan salinan di lingkup lokal, yang memengaruhi kinerja: http://jsperf.com/short-scope . Semua akses ke windowsekarang harus melakukan perjalanan satu tingkat kurang dari rantai ruang lingkup. Seperti halnya undefined, salinan lokal lagi memungkinkan untuk minifikasi yang lebih agresif.

Sidenote:

Meskipun ini mungkin bukan maksud dari pengembang jQuery, lewat windowmemungkinkan perpustakaan menjadi lebih mudah diintegrasikan dalam lingkungan Javascript sisi-server, misalnya node.js - di mana tidak ada windowobjek global . Dalam situasi seperti itu, hanya satu baris yang perlu diubah untuk mengganti windowobjek dengan yang lain. Dalam kasus jQuery, windowobjek tiruan dapat dibuat dan diteruskan untuk tujuan pengikisan HTML (perpustakaan seperti jsdom dapat melakukan ini).

Yang lain sudah menjelaskan undefined. undefinedseperti variabel global yang dapat didefinisikan ulang untuk nilai apa pun. Teknik ini untuk mencegah semua cek yang tidak ditentukan dari melanggar jika seseorang menulis katakan, di undefined = 10suatu tempat. Argumen yang tidak pernah disahkan dijamin nyata undefinedterlepas dari nilai variabel undefined .

Alasan untuk lewat jendela dapat diilustrasikan dengan contoh berikut.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

Apa yang dicatat oleh konsol konsol? Nilai windowobjeknya benar? Salah! 10? Salah! Ini log undefined. Penerjemah Javascript (atau kompiler JIT) menulis ulang dengan cara ini -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

Namun, jika Anda mendapatkan windowvariabel sebagai argumen, tidak ada var dan karenanya tidak ada kejutan.

Saya tidak tahu apakah jQuery melakukannya, tetapi jika Anda mendefinisikan ulang windowvariabel lokal di mana saja dalam fungsi Anda untuk alasan apa pun, itu ide yang baik untuk meminjamnya dari lingkup global.

window dilewatkan seperti itu kalau-kalau seseorang memutuskan untuk mendefinisikan kembali objek jendela di IE, saya berasumsi sama untuk undefined , dalam kasus itu ditugaskan kembali dalam beberapa cara nanti.

Bagian atas windowdalam skrip itu hanya menamai argumen "jendela", argumen yang lebih lokal bahwa windowreferensi global dan apa kode di dalam penutupan ini akan digunakan. Yang windowpada akhirnya sebenarnya menentukan apa yang harus dilewati untuk argumen pertama, dalam hal ini arti saat ini window... harapannya adalah Anda belum mengacaukan windowsebelum itu terjadi.

Ini mungkin lebih mudah untuk memikirkan dengan menunjukkan kasus yang khas yang paling digunakan dalam jQuery, Plugin .noConflict()penanganan, sehingga untuk sebagian besar kode Anda masih bisa menggunakan $, bahkan jika itu berarti sesuatu yang lain dari jQueryluar lingkup ini:

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Diuji dengan iterasi 1000000. Pelokalan semacam ini tidak mempengaruhi kinerja. Bahkan satu milidetik dalam iterasi 1000000. Ini sama sekali tidak berguna.