Quali sono le differenze tra i seguenti due codici javascript?

Question

In qualche codice JavaScript che usa la funzione immediati, ha argomento window o document come la seguente:

(function (window, document) { 
    ... 
})(window, document); 

Tuttavia, window e document sono oggetti globali e può accedere direttamente come segue:

(function() { 
    var userAgent = window.navigator.userAgent; 
    ... 
    var el = document.getElementById(...) 
    ... 
})(); 

Quali sono le differenze tra i due codici precedenti. Qual è il modo migliore e perché?

Answer 1

Due ragioni mi vengono in mente:

1) Le variabili locali sono il primo della catena dell'area di validità, quindi il loro accesso è più veloce di variabili globali (con più veloce intendo irrilevante veloce).

2) All'interno della funzione, window e document sono variabili locali, quindi i loro nomi possono essere minimified:

(function (w, d) { 
//var userAgent = w.navigator.userAgent; 

)(window, document); 

Answer 2

La differenza è il polimorfismo: nel primo caso, si poteva passare la funzione di ogni coppia di oggetti che si comportano come gli oggetti window e document (almeno per i metodi che la funzione chiama) e la funzione funzionerà anche con essi.

In pratica, con questi due oggetti, in particolare, è più soggetto ad errori che un vantaggio - tutti si aspettano window e document di essere ilwindow e document definito da JavaScript. Ma in teoria, questo è il guadagno.

Answer 3

Quali sono le differenze tra i due codici precedenti. Qual è il modo migliore e perché?

In tutta praticità e utilizzo solo nei browser, non c'è alcuna differenza apprezzabile.

Detto questo, c'è un leggero aumento delle prestazioni derivante dal riferimento a variabili locali anziché globali.

Inoltre, consente la flessibilità di sostituire il vero window con una versione fittizia; questo potrebbe essere utile durante i test e in alcuni ambienti in cui alcuni degli oggetti non sono disponibili e devono essere sostituiti.

A proposito, c'è un altro tipo di argomento che potresti passare, ovvero undefined; va in questo modo:

(function(undefined) { 
    // your code 
}()); 

in realtà non passare nulla alla funzione esterna e così facendo è assicurarsi che undefined non è stato manomesso; persone pedanti come me sarebbero solo void 0 per quello scopo :)