ExtJS 3: Два способа создания пользовательского класса: какая разница?

Я пытаюсь изучить ExtJS и объектно-ориентированный JavaScript в целом. Я видел людей, определяющих классы в пользовательских пространствах имен несколькими способами. Какая разница между этими двумя методами?

Метод 1

Ext.ns('myapp.cars');
(function(){
    var Car = Ext.extend(Object, {
       //...
    })

    myapp.cars.Car = Car;
})()

Метод 2

Ext.ns('myapp.cars');
myapp.cars.Car = Ext.extend(Object, {
       //...
});

Метод 2 легче читать и требует меньше кода; есть ли какая-то причина, по которой метод 1 лучше? Спасибо!

Ответ 1

Это в основном то же самое, за исключением того, что вы можете использовать частные переменные в функции self-exectuing первого метода, тогда как вы можете определять только глобальные переменные во втором.

Например:

Ext.ns('myapp.cars');
(function(){

    var carInfo = {
      goodEngine: true
    };

    var Car = Ext.extend(Object, {
       info: carInfo
    });

    myapp.cars.Car = Car;
})()

// carInfo is undefined here, so this will give an error
alert( carInfo.goodEngine );

Таким образом, первый метод весьма полезен, если вы работаете с одним словом переменных, которые позже не будут использоваться.

Ответ 2

Следующие значения практически эквивалентны:

var Car = Ext.extend(Object, {
   //...
});

myapp.cars.Car = Car;

... и:

myapp.cars.Car = Ext.extend(Object, {
   //...
});

В первом примере вы должны использовать временную переменную для хранения ссылки на вновь созданный объект, который затем копируется в myapp.cars.Car (копия ссылки копируется, а не объект). Во втором примере вы должны назначить ссылку на объект непосредственно на myapp.cars.Car.

Причина, по которой ваш первый пример был заключен в самозапускаемой анонимной функции (function(){ })(), заключается в ограничении объема этой временной переменной. Обычно это делается для того, чтобы не загрязнять глобальное пространство имен этой переменной Car. Если бы существовала другая переменная Car, определенная в другом месте, это не противоречило бы этому. Пример:

var Car = "My Nice Car";

(function(){
    var Car = Ext.extend(Object, {
       //...
    });

    myapp.cars.Car = Car;
})();

alert(Car); // Still "My Nice Car"
            // No conflict with the `Car` variable in the self invoking function.