Javascript Object Oriented Programming in 5mins
Master it in 5mins series.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
Encapsulation allows developers encapsulate both data and method into one package and hide details. This allows developers to inherit methods and use them without knowing the implementation details of the methods.
Abstraction allows developers hides all but the relevant data about an object in order to reduce complexity and increase efficiency. Specialization by inheritance and composition by using other objects as properties of an object help developers quickly abstract out the current problem at hand. This increases reusability of code.
Polymorphism allow developers use an identical interface (method names, such as add, subtract, multiplication) for different types of data and objects, such as Integer, Float, BigInt, Rational, Imaginary, which all provide identically named methods, such as add, subtract, multiplication methods. You can see immediate benefits.
Creating your own Namespace
if MYAPP is defined, just use an existing one. If not defined, create one
var MYAPP = MYAPP || {};
Creating a class called Person. It is just a function!
/** @constructor */
function Person(first, last, age, eyecolor) {
// this function is called when a Person object is created.
// i.e., this is the constructor function
// Attributes (properties of the class)
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
// function definition (if defined like this, subclasses cannot override and call at the same time)
this.fullName = function() {return this.firstName + " " + this.lastName;};
}
Overriding a method of a superclass. All classes are a subclass of Object class.
/** @override */
Person.prototype.toString = function() {
var ts = Object.prototype.toString.call(this); // call the superclass method
return ts + “ Person”;
}
Creating an object using the class
var john = new Person("John", "Doe", 50, "blue");
john.firstName; // access object properties
john.fullName(); // access object methods
Inherit from another prototype
/** @extend {Person}
* @constructor
**/
function Employee (first, last, age, eyecolor, title){
Person.call(this, first, last, age, eyecolor);
this.title = title;
}
Employee.prototype = Object.create(Person.prototype); // Do not use “new Person ()”
Employee.prototype.constructor = Employee; // set constructor property
Overriding inherited methods. All objects inherit from Object class
/** @override */
Employee.prototype.toString = function() {
var ts = Person.prototype.toString.call(this); // call the superclass method
return ts + “ Employee”;
}
call() and apply()
// You can call methods of a Class/object directly.
// This is useful for callbacks and event handlers.
// Calling a prototype method with a context (object reference)
var toString = Object.prototype.toString;
toString.call(new Person); // [object Person]
Adding a new method to an existing object
john.name = function () {
return this.firstName + " " + this.lastName;
};
Adding a new property to an existing Class:
Person.prototype.nationality = "English";
Adding a new method to an existing Class:
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
Callbacks, event handlers, this, and bind operator
// “this” in event handlers and callback functions might be undefined or incorrect.
// Always bind the target object to callback functions or event handlers to solve this.
// Solving callback function problems
Person.prototype.saveData = function(){
// callServerToSave(this.data, callBack); // this doesn’t work
callServerToSave(this.data, callBack.bind(this)); // bind the target obj
function callBack(result){
this.result = result; // here this is undefined without bind.
}
}
function callServerToSave(data, callBack){
…. call some AJax function to save
// call back when we have data
callBack(result);
}
Solving event handlers in jQuery
Person.prototype.onClick = function(event){ var self = event.data.self; } // access the correct obj
Person.prototype.registerHandler = function(){
// method 1
$("#the-element").click($.proxy(function () {
// you can use original 'this'
},this)); // pass this
// method 2
$('#the-element').on('click', {self:this}, this.onClick); // pass this
}
Calling a method of an object directly using call and apply
var fullName = john.fullName(); // get a reference to a method
fullName(); // error here. “this” in the function is undefined.
fullName.call(john); // correct. Pass the object specifically. Now “this” refer to john.
Other useful operators for prototype
john instanceof Person; //true;
Person.prototype.constructor == Person; //true. Construction is the Person function
john.constructor == Person; //true
john.hasOwnProperty('firstName'); // true
john.hasOwnProperty('toString'); // returns false. Doesn't check inherited properties
The following two are identical
var userAccount = new Object ();
var userAccount = {}
Making sure that this points to the right thing regardless of how the object is instantiated can be difficult. However, there is a simple idiom to make this easier.
var Person = function(firstName) {
if (this instanceof Person) {
this.firstName = firstName;
} else {
// make sure we create a Person not something else.
return new Person(firstName);
}
}
---------------------------------------------
End
