Object-Oriented programming with JavaScript

Object-Oriented programming is one of the widely used programming paradigm that uses abstraction to create model based on real world. It is a model organized around “objects” rather than “actions” and data rather than logic. Historically, a program has been viewed as a logical procedure that takes input data, processes it, and produces output data. Object-oriented programming (OOP) uses “objects” – data structures consisting of datafields and methods – and their interactions to design applications and computer programs. Each object can be seen as a tiny machine which is responsible for the set of task assign to it. Today, many popular programming languages (such as Java, JavaScript, C#, C++, Python, PHP etc) support object-oriented programming (OOP). JavaScript has strong object-oriented programming capabilities. Although there is differences in object-oriented capability of javascript compared to other languages.

Terminology

First let us see few terminologies that we use in object-oriented programming. Class: Defines the characteristics of the Object. Constructor: A method called at the moment of instantiation. Object: An Instance of a Class. Method: An Object capability as walk. Property: An Object characteristic, such as color. Inheritance: A Class can inherit characteristics from another Class. Encapsulation: A Class defines only the characteristics of the Object, a method defines only how the method executes. Abstraction: The conjunction of complex inheritance, methods, properties of an Object must be able to simulate a reality model. Polymorphism: Different Classes might define the same method or property.

The Class in JavaScript

Unlike Java, C++ etc, JavaScript does not contains class statement. JavaScript is a prototype-based language. JavaScript uses functions as classes. Defining a class is as easy as defining a function. In the example below we define a new class called Car.

//Define the class Car
function Car() { }
Code language: JavaScript (javascript)

The Object (Class Instance) in JavaScript

For creating instances of any class i.e. objects use new keyword. For example, in below code snippet we created two instances of class Car.

//Define the class Car
function Car() { }

var car1 = new Car();
var car2 = new Car();
Code language: JavaScript (javascript)

The Constructor in JavaScript

In object oriented methodology, a Constructor is a method that is used to initiate the properties of any class instance. Thus the constructor gets called when the class is instantiated. As in JavaScript there is no class keyword and the function serves as class definition, there is no need of defining constructor explicitly. The function defined for the class acts as constructor. For example, in following code snippet we have called an alert statement when class Car is instantiated.

//Define the class Car
function Car() {
	alert("Class CAR Instantiated");
}

var car1 = new Car();
var car2 = new Car();
Code language: JavaScript (javascript)

The Property (object attribute) in JavaScript

Properties are the variable that are member of an object and can define the state of any instance of Class. Property of a class can be accessed within the class using this keyword. For example, in following code snippet we have assign a property speed to Car.

//Define the class Car
function Car(speed) {
	alert("Class CAR Instantiated");
	this.speed = speed;
}

var car1 = new Car(40);
var car2 = new Car(60);

alert("Car1 Speed: " + car1.speed);
alert("Car2 Speed: " + car2.speed);
Code language: JavaScript (javascript)

One thing we should note here is that for inheritance works correctly, the Properties should be set in the prototype property of the class (function). The above example becomes:

//Define the class Car
function Car(speed) {
	alert("Class CAR Instantiated");
	this.speed = speed;
}
Car.prototype.speed= 'Car Speed';

var car1 = new Car(40);
var car2 = new Car(60);

alert("Car1 Speed: " + car1.speed);
alert("Car2 Speed: " + car2.speed);
Code language: JavaScript (javascript)

The methods in JavaScript

To define methods in a Class, all you have to do is just define a attribute and assign an function to it. For example, in below code snippet we defined a method setSpeed() for class Car.

//Define the class Car
function Car(speed) {
	alert("Class CAR Instantiated");
	this.speed = speed;
}
Car.prototype.speed= 'Car Speed';
Car.prototype.setSpeed = function(speed) {
	this.speed = speed;
	alert("Car speed changed");
}

var car1 = new Car(40);
var car2 = new Car(60);

car1.setSpeed(120);
car2.setSpeed(140);
Code language: JavaScript (javascript)

Inheritance in JavaScript

JavaScript supports single class inheritance. To create a child class that inherit parent class, we create a Parent class object and assign it to the Child class. In following example we created a child class Ferrari from parent class Car.

//Define the Car class
function Car() { }
Car.prototype.speed= 'Car Speed';
Car.prototype.setSpeed = function(speed) {
	this.speed = speed;
	alert("Car speed changed");
}


//Define the Ferrari class
function Ferrari() { }
Ferrari.prototype = new Car();


// correct the constructor pointer because it points to Car
Ferrari.prototype.constructor = Ferrari;

// replace the setSpeed method
Ferrari.prototype.setSpeed = function(speed) {
	this.speed = speed;
	alert("Ferrari speed changed");
}

var car = new Ferrari();
car.setSpeed();
Code language: JavaScript (javascript)

Encapsulation in JavaScript

In JavaScript, encapsulation is achieved by the inheritance. The child class inherit all the properties and methods of parent class and needs to override the method only that needs to be changed. This encapsulation by which every class inherits the methods of its parent and only needs to define things it wishes to change. Update: A new tutorial cover these Javascript OOPs topics in details. Please refer: JavaScript 101: Objects and Functions