OOP Concepts


A class is the blueprint of a concept. An instance is the actualization of the blueprint. Bridge is a class; the Golden Gate Bridge is an instance of "Bridge". Dog is a class; Lassie is an instance of "Dog".

Create a Square class and Square instance...

Pass two property values to constructor using object literal...

We can clean up the constructor further using Ext.apply, which copies properties of config to the specified object.

Add Circle and Rectangle classes in order to show a few slight deviations from the Square example.

Add an additional method/function to the Square class, and change the way the test message is generated...

Apply the same changes to the Rectangle and Circle classes...

By applying the concept of inheritance, we can simplify and reduce the repetitive code by giving child classes properties of a parent class:

We can move the generateTestSentence() method to the Shape class:

We can get instance property values directly...

To prevent direct read/write of an object’s properties, we’ll make use of Ext JS’ config block. This will automatically restrict access to the object’s properties so they can only be set and retrieved using accessor methods.

Accessor methods are automatically generated getters and setters for anything in a class’s config block. For instance, if you have shapeName in a config block, you get setShapeName() and getShapeName() by default.

The config block should only include new configs unique to its class. You should not include configs already defined in a parent class’s config block.

In Ext JS, all classes are children of a common base class unless explicitly specified. This base class is Ext.Base. Just like our Square class extends from Shape, Shape automatically extends from Ext.Base. Based on this logic, the following code:

...is actually equivalent to this:

This is why we can use this.initConfig(config); in the constructor of Shape. initConfig() is a method of Ext.Base and is inherited by anything extending from it. initConfig() initializes the config block for its class and auto-generates the accessor methods.

The main goal of encapsulation is to protect objects from unwanted and/or invalid property modification. These modifications would inevitably result in errors.

For example, when using the config block to avoid direct property modification, nothing is currently preventing invalid values from being passed to the accessor methods. That is, nothing prevents us from calling square.setSide(‘five’), which would result in an error since side expects a numeral.

Let’s prevent this by using the apply method. Apply is a template method which allows you to test the proposed value before modification. This method copies all of the properties of config to the specified object.

Since ‘side’ is a property defined through the ‘config’ block, we can make use of this template method to act before the value is actually modified, such as checking if the new value for ‘side’ is indeed a number.