ExtJS 3: Two ways of creating custom class: what's the difference?

Question

I'm trying to learn ExtJS and object-oriented JavaScript in general. I've seen people defining classes in custom namespaces in a couple of ways. What's the difference between these two methods?

Method 1

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

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

Method 2

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

Method 2 is easier to read and requires less code; is there any reason Method 1 is better? Thanks!

Do you mean that Method 2 is easier to read and requires less code? — fijiaaron, Apr 24 '12 at 17:46

score 6 · Accepted Answer · answered Nov 07 '10 at 20:16

6

It's basically the same, except that you could use private variables in the self-exectuing function of the first method, while you can only define global variables in the second one.

For example:

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

So, the first method is quite useful if you work with a bunge of variables that you won't use later on.

answered Nov 07 '10 at 20:16

Harmen

22,092
4
54
76

This is my favorite implementation of the pattern, although I'm having trouble with one thing... @Harmen I have one question, if I'm extending an Ext class, for example `var MyWindowClass = Ext.extend(Ext.Window, { ... });` Do you know how I can use default configs declared in `MyWindowClass` and then, if I extend further (i.e. `var MySuperWindowClass = Ext.extend(myapp.MyWindowClass , { ... });`) declare default configs again that will be applied along with the default configs in MyWindowClass ? – blong May 24 '12 at 21:47

score 6 · Answer 2 · answered Nov 07 '10 at 20:18

The following are practically equivalent:

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

myapp.cars.Car = Car;

... and:

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

In the first example you'd be using a temporary variable to hold a reference to the newly created object, which is then copied to myapp.cars.Car (the reference is copied, not the object). In the second example you'd be assigning the reference to the object directly to myapp.cars.Car.

The reason your first example was enclosed in the self-invoking anonymous function (function(){ })() is to limit the scope of that temporary variable. That is generally done in order not to pollute the global namespace with that Car variable. If there was an other Car variable defined elsewhere, it would not conflict with this one. Example:

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.

ExtJS 3: Two ways of creating custom class: what's the difference?

2 Answers2

Linked