Objectif de passer des variables globales à une fonction s'invocant elle-même ou "IIFE"

Question

Je vois beaucoup de cela dans les anciens JavaScript

(function (w){

    w.bar = 'baz';

 })(window); 

Quel est l'avantage de ce qui précède par rapport à

(function(){

    window.bar = 'baz';

})(); 

la même chose s'applique à toute variable globale, ou variable définie en dehors de l'IIFE.

Answer 1

1. Rend explicite le fait que vous utilisez (et probablement modifiez) des variables globales dans la fonction.
2. Vous permet de modifier le comportement à l'avenir. Peut-être avez-vous un mockWindow pour un test unitaire. Peut-être utilisez-vous Node.js et vous n'avez pas de window, mais vous souhaitez ajouter à la variable globals à la place.

p.s. A mon avis, le gain de performance trivial mentionné par @Rayon est une fausse piste.

Answer 2

En pratique, il n'y a pas (ou peu) de différence avec l'exemple que vous avez donné, mais vous l'avez probablement simplifié à partir du code que vous regardez effectivement.

Dans un programme plus réaliste, vous aurez des portées et des rappels déclenchés et exécutés de manière asynchrone dans la boucle d'événements, et vous liez la variable à une instance spécifique dans une fermeture -- ainsi ;

(function (w){
    setTimeout(function(){w.bar = 'baz';},100);
})(window); 
window = window2;

Le bar est toujours défini dans la fenêtre d'origine, car c'est ce qui est lié à w - où dans

(function (){
    setTimeout(function(){window.bar = 'baz';},10);
})(window); 
window = window2;

Il sera défini dans l'instance window2, car c'est ainsi que la fenêtre est liée lorsque l'exécution du code se produit finalement.

Dans cet exemple, "window" est une variable globale, mais c'est la même chose quel que soit l'étendue de la variable liée.

Answer 3

Le passage de la fenêtre se fait parce que les variables locales sont plus faciles et plus rapides à accéder que les variables globales ... cela peut montrer une légère différence de performance. La méthode est vraiment pratique avec les motifs de modules et/ou l'injection de dépendances.

Exemple

var moduleFirst = (function(){
    var name = "harry";
    return {
        firstparam : name
    }
})();
var moduleTwo = (function(x){
    console.log(x.firstparam);
})(moduleFirst)

La sortie sera : harry

Donc lorsque la fenêtre est passée dans IIFE ; toutes ses méthodes révélées sont disponibles dans une variable locale.

Answer 4

En passant des objets globaux comme window, document, $ à IIFE (Expression de Fonction Immédiatement Appelée), on peut améliorer les performances en réduisant le temps de recherche de portée. Rappelez-vous que Javascript recherche d'abord la propriété dans la portée locale et remonte en chaînant jusqu'à la portée globale. Ainsi, l'accès à l'objet window en portée locale réduit le temps de recherche.