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 DeveloperClass 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 ManagerObject.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 26As 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.
