Por incorporar a classe JavaScript em uma função anônima() chamada?

Question

Eu estava lendo sobre o novo JavaScript como linguagem da Microsoft chamado O TypeScript.No parque infantil (exemplo), há uma classe simples Máquina de sintaxe convertido para código JavaScript.Vindo de uma programação Java fundo, foi interessante para mim, para aprender OOP é feito em JavaScript como compilado a partir do TypeScript.

O TypeScript código:

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)

E o equivalente a código 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);

O Typescript parte é muito semelhante ao Java, então eu entendo isso.Agora a minha pergunta é por que no JavaScript, o corpo da Greeter classe é incorporado em um anônimo function() chamada?

Por que não escrever assim?

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

Qual é a vantagem/desvantagem de cada método?

Answer 1

O seguinte é chamado de Imediatamente Invocada A Função De Expressão:

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

Ele é usado para manter o escopo global limpa.Porém, neste caso não é necessário uma vez que o valor de retorno é atribuído a uma variável Greeter.A única vez que este padrão é útil quando você deseja "privado" estática membros.

E. g.:

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

Este é permitir que os membros privados.Neste exemplo, todos os membros são públicos para as duas construções são equivalentes.No entanto, se você deseja fornecer para membros particulares que você precisa para se esconder do escopo de chamada através de um fechamento.Assim, se você tem um membro privado da seguinte forma:

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

Provavelmente você deve obter algo como isto:

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

A saudação variável estará disponível para qualquer função definida dentro de uma função anônima, mas invisível em qualquer outro lugar.

Answer 3

Além do óbvio de escopo/fechamento de raciocínio.Usando uma função anônima que invoca-se imediatamente pré-carregado (interpreta) a definição de classe.Isso permite que qualquer JIT otimizações frente carregado dentro de execução.Em suma, para grandes aplicações mais complexas, ele irá melhorar o desempenho.

Answer 4

A função anônima auto execução de fechamento é geralmente usado para encapsular o escopo para que apenas o valor retornado é acessível do lado de fora.(ou qualquer coisa que você anexar a outros objetos, como janela)

Answer 5

A função anônima é, provavelmente para evitar o nome collition com outras partes do código.Pense nisso desta maneira, dentro da sua função anônima, você pode até declarar uma variável chamada "$" para ser o que você quiser, e, ao mesmo tempo, estar a utilizar jQuery em outras partes do seu código sem conflito.

Answer 6

O fechamento é o único significa chamar os construtores com parâmetros:

var w = new Greeter("hello")

Existem outros métodos, mas todos os complicado e com limitações e desvantagens.