Object Oriented Java Script

With the basics out of the way, we'll now focus on object-oriented JavaScript (OOJS) — this article presents a basic view of object-oriented programming (OOP) theory, then explores how JavaScript emulates object classes via constructor functions, and how to create object instances.

u Namespace

u this keyword

u Class

u Object

Namespace

A namespace is a container which allows developers to bundle up functionality under a unique, application-specific name.

In JavaScript a namespace is just another object containing methods, properties, and objects.

The idea behind creating a namespace in JavaScript is simple: create one global object, and all variables, methods, and functions become properties of that object.

Use of namespaces also reduces the chance of name conflicts in an application, since each application's objects are properties of an application-defined global object.

Namespace we must have known from any language or the other. What it does is, it doesn’t allow us to pollute our code base and makes it cleaner by grouping our code logically and avoiding unexpected and expected collision.

To achieve this, what we need to do is to create a namespace in application and use it.

In any modern day application, Namespace is a must to have because at the end, we need third party libraries and components.

Global Object Class EdyS

// global namespace

var EdyS = EdyS || {};

In the above code sample, we first checked whether EdyS is already defined (either in same file or in another file). If yes, then use the existing EdyS global object, otherwise create an empty object

called MYAPP which will encapsulate methods, functions, variables, and objects.

this keyword

‘this’ is a reference to the current object instantiated by the class. In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.

If there’s no current object, ‘this’ refers to the global object.

In a web browser, that’s ‘window’ — the top-level object which represents the document, location, history and a few other useful properties and methods.

Example:

this.name="Sharjeel";

document.write(this.name+'<br>')     //Because of declaration

document.write(window.name+'<br>')  // window object  and this equivalence

document.write(name+'<br>')  //Global Scope

alert(window===this)

Class

u  It's important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an object. And when it comes to inheritance, objects inherit from objects, not classes from classes

Object

u  Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects.

u  In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.

Create objects

u  These are the two common ways to create objects

1-Object Literals

2-Object Constructor

Here I am explaining 1^st approach i.e. Object Literal.

u  The most common and, indeed, the easiest way to create objects is with the object literal described here:

u  Literals are shorter way to define objects and arrays in JavaScript. To create an empty object using you can do:

var ob = {};

var apple = {

    type: "macintosh",

    color: "red",

    getInfo: function () {

        return this.color + ' ' + this.type + ' apple';

    }

}

In this case you don't need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance.

apple.color = "reddish";

alert(apple.getInfo());