Зачем встраивать класс JavaScript в анонимный вызов функции()?

Question

Я читал о новом JavaScript-подобном языке от Microsoft под названием Машинописный текст.В игровая площадка (примерный раздел), существует простой класс в синтаксисе TypeScript, преобразованный в код JavaScript.Имея опыт программирования на Java, мне было интересно узнать, как выполняется ООП в JavaScript, скомпилированном из 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)

И эквивалентный 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);

Часть Typescript очень похожа на Java, так что я это понимаю.Теперь мой вопрос заключается в том, почему в JavaScript тело Greeter класс встроен в анонимный function() позвонить?

Почему бы не написать это так?

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

В чем преимущество/недостаток каждого метода?

Answer 1

Следующее называется Немедленно вызываемое выражение функции:

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

Он используется для поддержания чистоты глобальной области видимости.Хотя в данном случае в этом нет необходимости, поскольку возвращаемое значение присваивается переменной Greeter.Единственный раз, когда этот шаблон полезен, - это когда вы хотите "приватный" статический члены.

Напр.:

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

Это должно разрешить частным членам.В этом примере все члены публики, поэтому ваши две конструкции эквивалентны.Тем не менее, если вы хотите предоставить частным членам, вам нужно скрыть их от призванной области с помощью закрытия.Таким образом, если у вас есть частный член так:

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

.

Вы, вероятно, получите что-то подобное:

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

.

Переменная приветствия будет доступна любую функцию, определенную внутри анонимной функции, но невидимой везде.

Answer 3

Помимо очевидного рассмотрения навес / закрытия.Используя анонимную функцию, которая сразу же вызывает предварительные нагрузки (интерпретирует) определение класса.Это позволяет любые оптимизации JIT должны быть загружены в выполнении.Короче говоря, для более крупных сложных приложений он улучшит производительность.

Answer 4

Анонимная функция / самостоятельная замыкание обычно используется для инкапсуляции охвата, так что только возвращенное значение доступно за его пределами.(или что-нибудь прикрепите к другим объектам, как окно)

Answer 5

Анонимная функция, вероятно, там, чтобы предотвратить начало имени с другими частями кода.Подумайте об этом таким образом, внутри вашей анонимной функции вы даже можете объявить переменную, называемую «$», чтобы быть то, что вы хотите, и в то же время, используйте jQuery на других частях вашего кода без конфликтов.

Answer 6

Закрытие - это единственное средство для вызова конструкторов с параметрами:

var w = new Greeter("hello")

.

Есть другие методы, но все сложные и с ограничениями и недостатками.