About

Labels

slider

Recent

Navigation

Glance over Javascript's Object Oriented behaviour


Javascript like other languages shows Object-Oriented behavior including Java and C++. Actually OOP uses process to make the scripting quite easy and a big advantage of OOP is that you can access to individual data independently, can create prototype of an object and shortens the code and effort.
Unlike other OOP languages, Javascript doesn't uses classes, while learning some stuff related to Java I found everything work around those classes, in JS we uses functions instead of classes. Both of them hold the same work to do. They both have properties that can be accessed through various method.

In this whole article I will use the example of car since it is easy to explain OOP with real world objects since they have properties and some function to perform.

Car Image

So lets start by creating a class.
var Car=function(){};
Assigning the properties the Car, you can simply add properties by adding arguments in the function.
var Car=function(carname,manufacturer){}; 
Properties are variables, every instance of this object will have these properties. Later you can access each instance's properties. The keyword this in below code refers to the individual object.
var Car = function (carname, manufacturer) {
    this.carname = carname;
    this.manufacturer = manufacturer;
}
Now by defining the above variables, we can access individual instance's property value. Moreover we can do some inheritance work with that. So lets move on to instance.

Instance

Well instance is an object which is normally a variable so that we can access its properties value later. To create a instance, use keyword new. Every instance has a property called constructor, which points to its parent class.
var car1=new Car('R8','Audi');
var car2=new Car('Aventador','Lamborghini');
var car3=new Car('Spider 360','Ferrari');
console.log(car1.constructor==Car) // true
Further you can find its parent class by instanceof.
console.log(car1 instanceof Car); // true


Value of a property of instance is also accessible with ordinary method like we do with object (eg:JSON objects).
car2.carname  // returns Aventador

Prototype-inheritance

Prototype in real world is a beta version or first draft. In OOP inheritance let you copy all the properties of a class and do some work with them. Lets create prototype of Car.
Car.prototype.getDetails=function(){ // Now do some magic with properties of Car here!  }
Here is a live demo of prototype:
See the Pen OOP in JS by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Some more functions & definitions

There are some definitions you need to know:

Enumerable and Non-Enumerable

Enumerable and Non-enumerable are the properties of the object. Enumerable are those which can be iterated by for...in loop and obviously which aren't counts in Non-Enumerable.

ECMAScript

ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the Web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript. - Wikipedia
ECMAScript-5 introduced some standard functions to handle OOP stuff finely.

The functions are listed below:

Object.getOwnPropertyNames()

Object.getOwnPropertyNames(obj) is a standard function that returns the array of properties of an object.

obj :  Object of which properties need to be returned.

This function returns the enumerable and non-enumerable properties of the objects. If obj is car1 then the values return will be ["carname", "manufacturer"].

obj.hasOwnProperty(prop)

This function checks either prop is the property of obj, then returns boolean accordingly.

obj : Object of which property need to be checked.
prop : The property which is checked in obj

This is the example
console.log(car1.hasOwnProperty("carname"));  // returns true

Object.keys() 

This one do the same function as Object.getOwnPropertyNames(obj) but this one returns only Enumerable properties.

obj :  Object of which properties need to be returned.

car1 will return ["carname", "manufacturer"]. Since they are Enumerable properties.

Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: