Pourquoi intégrer la classe JavaScript dans une fonction anonyme () appeler?

Question

Pourquoi intégrer la classe JavaScript dans une fonction anonyme () appeler?

voix

17

Je lisais à propos de la nouvelle langue JavaScript comme de Microsoft appelé tapuscrit . Dans la cour de récréation (section exemple) , il y a une classe simple dans la syntaxe dactylographiée converti en code JavaScript. Issu d'un milieu de programmation Java, il était intéressant pour moi d'apprendre comment se fait POO en JavaScript compilées à partir tapuscrit.

Le code tapuscrit:

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 l'équivalent du code JavaScript:

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 Tapuscrit est très similaire à Java , donc je comprends. Maintenant , ma question est pourquoi en JavaScript le corps de la Greeterclasse est intégrée dans un un anonyme function()appel?

Pourquoi écrire pas comme ça?

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

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

javascript typescript

Créé 02/10/2012 à 15:27
source utilisateur AlexStack

Dans d'autres langues...

6 réponses

voix

3

En plus de la portée évidente / raisonnement de fermeture. En utilisant une fonction anonyme qui s'appelle immédiatement pré-charge (interprète) la définition de la classe. Cela permet des optimisations JIT à charger avant au sein de l'exécution. En bref, pour les grandes applications plus complexes, il permettra d'améliorer les performances.

Créé 02/10/2012 à 15:44
source utilisateur Louis Ricci

voix

2

Ceci pour permettre aux simples députés. Dans cet exemple, tous les membres sont publics pour que vos deux constructions sont équivalentes. Toutefois, si vous voulez fournir aux membres privés dont vous avez besoin de les cacher du champ d'application appelant par une fermeture. Ainsi, si vous avez un membre privé comme ceci:

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 d'accueil sera disponible pour toute fonction définie dans la fonction anonyme, mais invisible partout ailleurs.

Créé 02/10/2012 à 15:36
source utilisateur Mark Porter

voix

2

La fonction anonyme / auto fermeture d'exécution est habituellement utilisé pour encapsuler la portée de sorte que seule la valeur retournée est accessible à l'extérieur de celui-ci. (Ou tout ce que vous attachez à d'autres objets, comme une fenêtre)

Créé 02/10/2012 à 15:31
source utilisateur Jordan Denison

voix

1

La fonction anonyme est probablement là pour empêcher le nom collition 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 « $ » pour être ce que vous voulez, et en même temps, être en utilisant jQuery sur d'autres parties de votre code sans conflit.

Créé 02/10/2012 à 15:31
source utilisateur Deleteman

voix

-4

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 tous les complexes et avec des limitations et des inconvénients.

Créé 18/07/2014 à 09:13
source utilisateur Thinol

xandercoded · Accepted Answer · 2012-10-02 15:30

Ce qui suit est appelée expression Fonction Immédiatement Invoqué :

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

Il est utilisé pour conserver la portée globale propre. Bien que, dans ce cas , il est pas nécessaire puisque la valeur de retour est affectée à une variable Greeter. Le seul moment où ce modèle est utile est quand vous voulez « privés » statiques 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;
})();