Pourquoi intégrer la classe JavaScript dans un appel anonyme à une fonction() ?

Question

Je lisais quelque chose sur le nouveau langage de type JavaScript de Microsoft appelé Manuscrit.Dans le aire de jeux (exemple de section), il existe une classe simple en syntaxe TypeScript convertie en code JavaScript.Issu d'une formation en programmation Java, il était intéressant pour moi d'apprendre comment la POO est réalisée en JavaScript tel que compilé à partir de TypeScript.

Le code TypeScript :

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}   

var greeter = new Greeter("world");

var button = document.createElement('button')
button.innerText = "Say Hello"
button.onclick = function() {
    alert(greeter.greet())
}

document.body.appendChild(button)

Et le code JavaScript équivalent :

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter("world");
var button = document.createElement('button');
button.innerText = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

La partie Typescript est très similaire à Java donc je comprends cela.Maintenant, ma question est de savoir pourquoi en JavaScript le corps du Greeter la classe est intégrée dans un anonyme function() appel?

Pourquoi ne pas l'écrire ainsi ?

function Greeter(message) {
    this.greeting = message;
}
Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
};

Quel est l’avantage/inconvénient de chaque méthode ?

Answer 1

Ce qui suit est appelé un Expression de fonction immédiatement invoquée:

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

Il est utilisé pour garder la portée globale propre.Cependant, dans ce cas, cela n'est pas nécessaire puisque la valeur de retour est affectée à une variable. Greeter.La seule fois où ce modèle est utile, c'est lorsque vous voulez du "privé". statique membres.

Par exemple.:

var Greeter = (function () {
    var foo = 'foo', bar = 'bar'; /* only accessible from function's defined
                                     in the local scope ... */

    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Answer 2

Il s'agit de permettre aux membres privés.Dans cet exemple, tous les membres sont publics donc vos deux constructions sont équivalentes.Cependant, si vous souhaitez fournir des membres privés, vous devez les masquer de la portée appelante via une fermeture.Ainsi, si vous avez un membre privé comme celui-ci :

class Greeter {
    private greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
} 

Vous obtiendriez probablement quelque chose comme ceci :

var Greeter = (function () {
    var greeting="";
    function Greeter(message) {
        greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + greeting;
    };
    return Greeter;
})();

La variable de salutation sera disponible pour toute fonction définie à l'intérieur de la fonction anonyme, mais invisible partout ailleurs.

Answer 3

Outre le raisonnement évident de portée/clôture.L’utilisation d’une fonction anonyme qui s’appelle immédiatement précharge (interprète) la définition de classe.Cela permet à toutes les optimisations JIT d’être chargées en amont lors de l’exécution.En bref, pour les applications plus grandes et plus complexes, cela améliorera les performances.

Answer 4

La fonction anonyme/fermeture auto-exécutable est généralement utilisée pour encapsuler la portée afin que seule la valeur renvoyée soit accessible en dehors de celle-ci.(ou tout ce que vous attachez à d'autres objets, comme une fenêtre)

Answer 5

La fonction anonyme est probablement là pour empêcher la collision de noms avec d'autres parties du code.Pensez-y de cette façon, dans votre fonction anonyme, vous pouvez même déclarer une variable appelée "$" comme étant ce que vous voulez, et en même temps, utiliser jQuery sur d'autres parties de votre code sans conflit.

Answer 6

La fermeture est le seul moyen d'appeler les constructeurs avec des paramètres :

var w = new Greeter("hello")

Il existe d’autres méthodes mais toutes compliquées et présentant des limites et des inconvénients.