How to Extend and Customize Javascript Object in Magento 1

As you might know, most of javascript (JS) are built as Object type in Magento 1.

And, have you ever had a need to create and extend an Javascript Object in Magento 1? It is a piece of cake if you follow our instructions as below.

How to create Class and Object

1. Create Object Constructor by Protoype Js

Magento using prototype js. Prototype js provides for us the ability to create Class with Class.create()

Example:

var Person = Class.create();

Person.prototype  = {
  initialize : function(name){    
    this.name = name;
    this.say();
},
    say: function() {
        alert(this.name);
    }
    });
// Run

var Trung = new Person("Trung");  // Alert Trung

Method “initialize” is a Constructor method of Person class. Class initialization will be passed to this Constructor method.

New Person (Parameters) is the way to call Class. When calling a class, the default Constructor method runs immediately.

2. Create a Singleton object.

You don’t need Prototype js to create a Singleton Object. A Singleton doesn’t create multiple instances by using function new (Singleton).

Example:

var ProjectManager  =  {

              initialize: function(name) {
                        this.name = name;
                        this.say();
              },
              say: function() {
                        alert(this.name);
              }
     }
     // Run

     ProjectManager.initialize("Kin"); // Alert Kin

Method “initialize” is constructor method which we define. When calling a Singleton Object we have to call directly to the initialize method to run constructor method immediately.

Of course, we still can create by other ways (example: use function() {}). But those are the most common ways in Magento core

How to extend a Class

1. Extend a class created by Class.create()

Example:

var Developer = Class.create(Person, {

         say: function() {
              // rewrite method say of Person
           alert("My name is " + this.name + ", I'm Developer.");
         }
     });
     // Run

     var Julius = new Developer("Julius");  // Alert My name is julius, I'm Developer

Class Developer is created and it extends from class Person but does not affect class Person. You can add or rewrite all methods and properties of class Person in class Developer.

2. Use Object.extend

Example:

var TechnicalSupport = Object.extend (Person, {

say : function() {
          alert("I'm Technical Support" + this.name);
 }
});

var HungVu = new TechnicalSupport("Hung Vu"); //Alert I'm Technical Support Hung Vu

3. Extend a Singleton Object

To extend a Singleton Object we can use Object.create(). This is also pure Javascript which you don’t need prototype js.

Example:

var Nhan = Object.create(ProjectManager);

Nhan.say = function() {
              alert("My name is " + this.name + ", I'm Project Manager.");
     };
Nhan.initialize("Nhan"); // Alert My name is Nhan, I'm Project Manager.
// Extend Nhan?

var Janechu = Object.create(Nhan);

Janechu.initialize('Jane Chu'); // Alert My name is Jane Chu, I'm Project Manager

Object.create() can not be used with a Object Constructor, Object.create() which only works with the object parameter, is a Singleton.

How to rewrite a method of Class

Very simple! Only use prototype.

Example: Rewrite method “initialize” of Person class above.


Person.prototype.initialize = function(name,age) {
              this.name = name;
              this.age = age;
         console.log("My name is " + this.name + " - My Age is " + age);
     }
     // Run
     var Kin = new Person("Kin", 26); // My name is Kin - My Age is 26

As you see, method “initialize” is rewritten. All instances of Class Person will use this rewritten method.

With the above solutions, you can create or edit a class javascript the right way without having to overwrite a core file. This is very useful when you want to upgrade Magento version without fear of losing your custom code or in case you want to create an extended module in Magento.