Waarom insluiten de JavaScript-klasse in een anonieme functie () bellen?

Question

Waarom insluiten de JavaScript-klasse in een anonieme functie () bellen?

stemmen

17

Ik las over de nieuwe JavaScript-achtige taal van Microsoft genaamd typoscript . In de speelplaats (voorbeeldsectie) , is er een eenvoudige klasse schrijfmachine syntax omgezet JavaScript code. Komend uit een Java-programmeertaal achtergrond, het was interessant voor mij om te leren hoe OOP wordt gedaan in JavaScript als samengesteld uit typoscript.

De getypte code:

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)

En het equivalent JavaScript-code:

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);

De Typescript deel is zeer vergelijkbaar met Java, dus ik dat begrijpen. Nu is mijn vraag is waarom in JavaScript het lichaam van de Greeterklasse is ingebed in een een anonieme function()oproep?

Waarom niet schrijven het zo?

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

Wat is het voordeel / nadeel van elke methode?

javascript typescript

De vraag is gesteld op 02/10/2012 om 15:27
bron van user AlexStack

In andere talen...

6 antwoorden

stemmen

3

Naast de voor de hand liggende scoping / sluiting redenering. Met behulp van een anonieme functie die zichzelf onmiddellijk een beroep doet op pre-belastingen (interpreteert) de definitie van de klasse. Dit kan elke JIT optimalisaties naar voren in de uitvoering geladen. Kortom, voor grotere, meer complexe toepassingen zal de prestaties te verbeteren.

antwoordde op 02/10/2012 om 15:44
bron van user Louis Ricci

stemmen

2

Dit is om te zorgen voor particuliere leden. In dit voorbeeld zijn alle leden zijn openbaar, zodat je twee constructies zijn gelijkwaardig. Echter, als je wilt voor particuliere leden die u nodig hebt om ze te verbergen voor de bellen bereik via een sluiting. Dus als u een eigen lid als volgt:

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

Je zou waarschijnlijk iets als dit:

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

De begroeting variabele zal beschikbaar zijn voor een functie gedefinieerd in de anonieme functie, maar overal elders onzichtbaar.

antwoordde op 02/10/2012 om 15:36
bron van user Mark Porter

stemmen

2

De anonieme functie / zelf uitvoeren afsluiting wordt meestal gebruikt om ruimte te kapselen zodat alleen de geretourneerde waarde toegankelijk daarbuiten. (Of wat je hechten aan andere objecten, zoals venster)

antwoordde op 02/10/2012 om 15:31
bron van user Jordan Denison

stemmen

1

De anonieme functie is er waarschijnlijk de naam collition met andere delen van de code te voorkomen. Denk aan het op deze manier, in je anonieme functie, je kan zelfs verklaren een variabele genaamd "$" te zijn wat je wilt, en op hetzelfde moment, worden met behulp van jQuery op andere delen van de code zonder conflict.

antwoordde op 02/10/2012 om 15:31
bron van user Deleteman

stemmen

-4

De sluiting is het enige middel om het constructeurskampioenschap te bellen met parameters:

var w = new Greeter("hello")

Er zijn andere methoden, maar alle gecompliceerd en met beperkingen en nadelen.

antwoordde op 18/07/2014 om 09:13
bron van user Thinol

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

Het volgende is een zogenaamde Direct aangeroepen Functie Expression :

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

Het wordt gebruikt om het globale bereik schoon te houden. Hoewel, in dit geval is het niet nodig, omdat de retourwaarde wordt toegewezen aan een variabele Greeter. De enige keer dat dit patroon is handig is wanneer je wilt "privé" static leden.

bv:

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;
})();