JavaScript as Object-Oriented Language

As some of experienced Java, C++ or C# programmers I used to think JavaScript as some kind of elementary programming languages when compared to the full-fledged OO languages such as Java or C#, or C++. However even JavaScript cannot do some advanced and complex things which we can do using Java, C# or C++ it is still an programming language with OO features. And programmers normally are so used to class-type OO languages - Java, C++ or C# they would find it hard to understand and confusing how to use the OO features in JavaScript. The below is aimed to help skilled Java, C++ or C# programmer to grab the essence of JavaScript OO features in short time.

Object concepts in JavaScript

Contrary to the impression of me and some of Java developers, JavaScript thinks heavily with object. Almost everything in JavaScript is object. At the first glance it is not so obvious because JavaScript doesn't explicitly show this like Java, C++, C#. But it is true that most of things are dealt with objects in JavaScript. A number, a string, a date, an array, a function or a custom-made object are all objects even with some primitive type like numbers.

var myAmount = 123.456; var myAmount = new Number(123.456);

In above example the first line will declare one variable myAmount with the given value. Actually JavaScript will create one Number object. It is the same as the second line does.

The meaning of object in JavaScript is the same as in Java, C++, or C#. An object is a collection of data stored as properties and the methods that can be used to manipulate the data in the object.
The below example demonstrate the properties and the methods of JavaScript object. In the first line we declare one string object with the value as "This is a string" and the second line the property length of this string object is used. And in third line we invoke a method called toUpperCase of the string object.

var myString = "This is a string"; alert(myString.length) var upperCasedVar = myString.toUpperCase();

 
So far the object in JavaScript looks very similar as Java, C++ or C# although object creation in JavaScript sometimes is not so obvious.

 

What does object in JavaScript look like?

 
Objects in JavaScript have properties and methods. The properties are the name-value pairs and method. These are exactly same as Java, C# or C++.
But there are something different in JavaScript. Java, C++ or C# are all class-based Object-Oriented languages. All properties and methods must be predefined in the class from which the object is instantiated. In JavaScript you can don't need to predefine them. All you need to do is to add the property name to the object and then give the value to this property. That's it.

var myLaptop = new Object(); myLaptop.make = "DELL"; myLaptop.model = "Inspiron"; myLaptop.year = 2011;

 
In the above example we create one object as myLaptop and then we add three properties to this myLaptop object.
For the properties in JavaScript object there is one thing which cannot be done in Java or other OO languages: You can delete one property from the object using keyword delete.

//Creates a new object, myobj, with 4 properties. var myLaptop = new Object(); myLaptop.make = "DELL"; myLaptop.model = "Inspiron"; myLaptop.year = 2011; myLaptop.uer = "Mark Chen"; //Removes the a property, leaving myLaptop with only 3 properties. delete myLaptop.user;

 
Methods in JavaScript is similar to the properties. Methods of JavaScript object are the normal JavaScript functions which are assigned to the properties of the object.
The below example shows that one function is defined and assigned to the object: myLaptop. It becomes the method of that object and you invoke this method in this object.

var myLaptop = new Object(); myLaptop.make = "DELL"; myLaptop.startup = function() {       return "Startup is done...."; }; myLaptop.startup(); document.write(myLaptop.make + "  " + myLaptop.startup());

 

How do you create object in JavaScript?

 
JavaScript provides some built-in objects. String, Date, Array, Math and Object are mostly common used. You can also have the custom-built objects.
There are many ways in JavaScript to create an object. Actually we have seen two different ways to create objects in the above examples: using new operator and using object initializer.
The below are some examples of creating JavaScript objects using new operator and object initializer.

var myDate = new Date(2013, 2, 11); var myObj = new Object(); var anotherObj = {}; var myLaptop = new Object(); myLaptop.make = "DELL"; myLaptop.model = "INSPRION"; myLaptop.price = 1150.00; var anotherLaptop = {make: "DELL", model:"INSPRION", price:1150.00}

 
Besides the new operator and object initializer you can also use constructor function. This way is very similar to Java, C# or C++. Constructor function is a JavaScript function which is used to set the properties and methods for the object. You can use new operator to invoke this function. What you get is a JavaScript object.

function Laptop(make, model, price) {     this.make = make;     this.model = model;     this.price = price;     this.startup = function() {         alert(make+" "+model+" is started up.");     } } var myLaptop = new Laptop("DELL", "INSPRION", 1150.00);

Inheritance and Prototype

Inheritance is one of most important characteristics of OO language. In class-based OO languages such as Java, C++ or C# inheritance is implemented using class and subclass. JavaScript also provides inheritance. But it is implemented using another concept called prototype.
So what is prototype in JavaScript? A prototype is a property in an object and this property actually is a reference to another object. But this prototype property is a bit special: the object will inherit all properties and methods from its prototype object.
The below is an example of using prototype to add one property and one method to an object.

function Laptop(make, model, price) {     this.make = make;     this.model = model;     this.price = price; } // Adding the property to the prototype of Laptop object // Adding the method to the prototype of Laptop object Laptop.prototype.user = "Mark"; Laptop.prototype.startup = function() {       alert(this.make+" "+this.model+" "+this.user + " is started up."); }       var myLaptop = new Laptop("DELL", "INSPRION", 1150.00); // Invoke the startup method which is inherited from prototype myLaptop.startup();

 
The prototype property in JavaScript object is just another object. When you invoke new operator against Laptop function. The object which is created will automatically has one prototype property set as one empty object. But you can override this empty object with the object you want. In the below example the prototype of Laptop is set to Computer object. So all Laptop objects will have the properties and methods of Computer object.

function Computer(user) {       this.user = "Mark";       this.startup = function() {             alert(this.user + " is started up.");       } } function Laptop(make, model, price) {     this.make = make;     this.model = model;     this.price = price; } Laptop.prototype = new Computer("Mark");       var myLaptop = new Laptop("DELL", "INSPRION", 1150.00); myLaptop.startup();