Object Oriented JavaScript

Guys, do you all know that Javascript is the world’s most misunderstood programming language. Despite its popularity, few know that JavaScript is a very nice dynamic object-oriented general-purpose programming language. How can this be a secret? Why is this language so misunderstood? Lets see!!

Object-oriented programming is a programming paradigm that uses abstraction to create models based on the real world. It uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation. In the past, it was a common argument that JavaScript was a basic language and was very ‘slap dash’ with no real foundation; this is no longer the case.

JavaScript can have all that an Object-Orientated language has to offer. It follows all the principles of object oriented programming – Inheritance, Encapsulation, Abstraction and Polymorphism. In OOP, few terminologies are usually followed:

1. Class

Defines the characteristics of the Object.

e.g:

1. //Person Class

2. function Person() { }

Wasn’t that simple??

Another way of defining class is

1. var Person = function () { };

2. Object

An Instance of a Class.

e.g:

1. var person1 = new

Person();

2. var person2 = new

Person();

Here person1 and person2 are instances of class Person.

3. Property

An Object characteristic, such as gender, color, type etc.

e.g:

1. function Person(gender) {

2. this.gender = gender;

3. };

4. var person1 = new Person('Male');

5. //display the person1 gender

6. alert('person1 is a ' + person1.gender); // person1 is a

Male

4. Method

An Object capability, such as walk.

e.g.:

1. function Person(gender) {

2. this.gender = gender;

3. //method

4. this.getGender = function() {

5. return this.gender();

6. }

7. };

5. Constructor

A method called at the moment of instantiation (the moment when the object instance is created). The constructor is a method of the class. In JavaScript, the function serves as the constructor of the object; therefore, there is no need to explicitly define a constructor method.

6. Inheritance

Inheritance is a way to create a class as a specialized version of one or more classes (JavaScript only supports single class inheritance). The specialized class is commonly called the child, and the other class is commonly called the parent. In JavaScript you do this by assigning an instance of the parent class to the child class, and then specializing it. In modern browsers you can also use Object.create to implement inheritance.

In the example below, we define the class Studentas a child class of Person. Then we redefine the sayHello() method and add the sayGoodBye() method.

1. // define the Person Class

2. function Person() {}

3. Person.prototype.walk = function() {

4. alert ('I am walking!');

5. };

6. Person.prototype.sayHello = function() {

7. alert ('hello');

8. };

9. // define the Student class

10. function Student() {

11. // Call the parent constructor

12. Person.call(this);

13. }

14. // inherit Person

15. Student.prototype = new Person();

16. // correct the constructor pointer because it points to

Person

17. Student.prototype.constructor = Student;

18. // replace the sayHello method

19. Student.prototype.sayHello = function() {

20. alert('hi, I am a student');

21. }

22. // add sayGoodBye method

23. Student.prototype.sayGoodBye = function() {

24. alert('goodBye');

25. }

26. var student1 = new Student();

27. student1.sayHello();

28. student1.walk();

29. student1.sayGoodBye();

30. // check inheritance

31. alert(student1 instanceof Person); // true

32. alert(student1 instanceof Student); // true

Using Object.create the inheritance line would instead be:

1. Student.prototype = Object.create(Person.prototype);

7. Encapsulation

A Class defines only the characteristics of the Object, a method defines only how the method executes. In the previous example, Student does not need to know how the Person class’s walk() method is implemented, but still can use that method; the Student class doesn’t need to explicitly define that method unless we want to change it. This is called encapsulation, by which every class inherits the methods of its parent and only needs to define things it wishes to change.

8. Abstraction

Abstraction is a mechanism that permits modeling the current part of the working problem. This can be achieved by inheritance (specialization), or composition. JavaScript achieves specialization by inheritance, and composition by letting instances of classes be the values of attributes of other objects.

The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).

1. var foo = function(){};

2. alert( 'foo is a Function: ' + (foo instanceof Function) );

3. alert( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object)

);

9. Polymorphism

Just like all methods and properties are defined inside the prototype property, different classes can define methods with the same name; methods are scoped to the class in which they’re defined. This is only true when the two classes do not hold a parent-child relation (when one does not inherit from the other in a chain of inheritance).