ExtJS 3：创建自定义类的两种方式：有啥区别？

Posted 2023-02-26

【中文标题】ExtJS 3：创建自定义类的两种方式：有啥区别？

【英文标题】：ExtJS 3: Two ways of creating custom class: what's the difference?ExtJS 3：创建自定义类的两种方式：有什么区别？

【发布时间】：2010-11-07 20:11:13

【问题描述】：

我正在尝试学习 ExtJS 和一般的面向对象的 javascript。我见过人们以几种方式在自定义命名空间中定义类。这两种方法有什么区别？

方法一

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

    myapp.cars.Car = Car;
)()

方法二

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

方法2更容易阅读，需要的代码更少；有什么理由方法1更好吗？谢谢！

【问题讨论】：

你的意思是方法2更容易阅读，需要更少的代码？

【参考方案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 );

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

【讨论】：

这是我最喜欢的模式实现，虽然我在一件事上遇到了麻烦...@Harmen 我有一个问题，如果我要扩展一个 Ext 类，例如var MyWindowClass = Ext.extend(Ext.Window, ... );你知道我如何使用MyWindowClass 中声明的默认配置，然后，如果我进一步扩展（即var MySuperWindowClass = Ext.extend(myapp.MyWindowClass , ... );）再次声明默认配置，它将与 MyWindowClass 中的默认配置一起应用？

【参考方案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.