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.