JavaScript: How to create Object, Class and Instance

JavaScript is an object oriented programming (OOP) language. It is prototype based, weakly typed, dynamic and class-less scripting language which is supported by most of the browsers. It is mostly used in web based applications for  making apps more interactive with user and giving fancy user experience.

JavaScript class, object concepts are not exactly similar as in c#, java or other OOP languages. It has some inherent features which make it more powerful scripting language for web apps. You can create an object and then add properties and methods based on requirements at any time of that object scope.

You can use various convention for implementing javascript objects, though all the objects will show same result, for example, here “bird” object is defined as following:

Create an object using new Object():


// instantiate an object using new Object(),
// then, dynamically you can add properties and methods as required
var bird = new Object();
bird.name = "Magpie";       // property name
bird.color = "BlackWhite";  // property color
bird.sing = function () { return "Magpie is singing"; }; //method of this object

Create an object using JavaScript Object Notation (JSON):


// instantiate an object using Literal Notation (JSON)
var bird = { name: "Magpie", color: "BlackWhite", sing: function () { return "Magpie is singing"; } };

Limitation of these above two styles of object creation is that you can not instantiate similar more instances/objects for that Object. Sometimes it is necessary having more instances of a class.

Create an object using constructor function:

Create a simple function,  function in JavaScript can be used as function and also as constructor of object.  For example, we implement a Bird function and initialize several instances of it is as following:


// create a function,
// it can be used as a class/object constructor, as well as a simple function
// then intantiate it using new if you want it use like a class
function Bird() {
this.name = "Kingfisher";
this.color = "Blue";
this.sing = function () { return this.color + " " + this.name + " is singing"; }
}

var kingfisher = new Bird();

alert(kingfisher.sing());

var nightingale = new Bird();
nightingale.name = "Nightingle"
nightingale.color = "Black";

alert(nightingale.sing());

var robin = new Bird();
robin.name = "Robin";
robin.color = "Brown";
// also you can add properties and methods in this object if necessary
robin.beak = "Beak";

alert(robin.sing());

You can have more instances using  “Bird” constructor function or class like in C#/Java. But it is not possible in first two ways of object initialization. From above examples it is clear that JavaScript can be used as object oriented programming or procedural programming language. So it’s your journey to JavaScript world how you use it.  JavaScript is a flexible, lightweight, platform independent dynamic scripting language to develop more user friendly web applications.

References:

About these ads

About M Moniruzzaman
A passionate software engineer, have been developing applications on various platforms such as Android, iPhone, .Net (C#) technologies and web based ASP.NET, PHP, JavaScript, jQuery technologies for more than 7 years. Especially I have expertise on developing applications for Android and iPhone, as well as service oriented, client-server based applications where clients will be reside on Android/iPhone that communicate with WCF(.NET) service hosted on server. I have completed certification in Microsoft Certified Professional Developer (MCPD) on .Net 4 . I have completed my graduation in -- B.Sc in Computer Science and Engineering, ShahJalal University of Science and Technology, Bangladesh. Thanks, M. Moniruzzaman (Zaman)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: