ExtJS 3：创建自定义类的两种方法：有什么区别？

Question

我正在尝试总体学习 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更好吗？谢谢！

Answer 1

基本上是一样的，只是你可以在第一个方法的自执行函数中使用私有变量，而你只能在第二个方法中定义全局变量。

例如：

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

因此，如果您使用稍后不会使用的大量变量，则第一种方法非常有用。

Answer 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.