JavaScript OOP Concepts

creating an object in JavaScript

Golden Statement:

An object literal is a pair of curly braces surrounding zero or more name/value pairs. - Douglas Crockford (Author of JavaScrirpt: The Good Parts)

Objects can be created in JavaScript by any of the following ways:

		var myObj = new Object();

		

- or -

		var myObj = {};

		

- or -

		var myObj = (function(){

				return {};

		}());

		

- or -

		var ObjectConstructor = function(){

		};

		var myObj = new ObjectConstructor();

		

Creating the objects with properties and methods in JavaScript

Objects with properties and methods can be created in JavaScript by any of the following ways:

		var Employee = new Object();

		Employee.name = "Joe P.";

		Employee.department = "Accounting";

		Employee.getName = function(){

			return this.name;

		};

		

		alert(Employee.name);

		alert(Employee.getName());

		

- or -

		var Employee = {

			name:"Joe P.",

			department:"Accounting",

			getName:function(){return "Mr. " + this.name;}

		};

		

		alert(Employee.name);

		alert(Employee.getName());

		

- or -

	

		var Employee = (function(){         

		return {

			name:"Joe P.",

			department:"Accounting",

			getName:function(){

				return this.name;

			}                    

		}; 

		}());

		

		alert(Employee.name);

		alert(Employee.getName());

		

- or -

	

		var EmployeeConstructor = function(){         

			this.name = "Joe P.";

			this.department = "Accounting";

			this.getName = function(){

				return this.name;

			};

		};

		

		var Employee = new EmployeeConstructor();

		

		alert(Employee.name);

		alert(Employee.getName());

		

Maintaining private properties, getter and setter methods in JavaScript objects

In the examples under "Creating Objects with properties and methods" topic, the properties are public, and that
you can access the property "name" directly instead of accessing it through the method "getName()".

To make the properties more restrictive (private), follow the object creation pattern bellow:

		var EmployeeConstructor = function(){     

			var name = "Joe P.";     

			this.getName = function(){         

				return name;     

			};

			this.setName = function(somename){

				name = somename;

			} 

		}



		var Employee = new EmployeeConstructor();

		

		alert(Employee.name); //undefined -- not accessible because property 'name' is no longer public

		alert(Employee.getName()); //Joe P.

		alert(Employee.setName("Joe P Jr.");

		alert(Employee.getName()); //Joe P Jr.

		

Closure

Golden Statement:

The inner functions get access to the parameters and variables of the functions they are defined within.

- Douglas Crockford (Author of JavaScrirpt: The Good Parts)

The local variables declared within a function cease to exist as soon as the execution of the function is over. But when you
have an exposed inner function in a function and the local variables are some how bind to that inner function, those variables
exist even after the execution of that function. This is called closure.

		function WhatIsDictionary(){

			var whatiswhat = {

								"JSON":"JavaScript Object Notation",

								"ajax":"asynchronous javascript and xml",

								"SOAP":"Simple Object Access Protocol",

								"REST":"Representational State Transfer"

							 };

			this.WhatIs = function(term){

				if (whatiswhat.hasOwnProperty(term)){ //binding the local variable to the inner function

					return (whatiswhat[term]);

				}

				else {

					return "Please try after the Dictionary updates";

				}

			}

		}



		var JoeDictionary = new WhatIsDictionary();

		alert(JoeDictionary.whatiswhat); //undefined

		alert(JoeDictionary.WhatIs("JSON"));

		alert(JoeDictionary.WhatIs("REST"));

		

	

Singleton

Golden Statement:

A Singleton is an object that only has one instance. The easy way to accomplish this in JavaScript
is to start with the Module pattern, then immediately instantiate it by using inline execution.

- http://arguments.callee.info/2009/07/09/javascript-design-patterns-module-singleton/

	var WhatIsDictionary = (function (){

		var whatiswhat = {

							"JSON":"JavaScript Object Notation",

							"ajax":"asynchronous javascript and xml",

							"SOAP":"Simple Object Access Protocol",

							"REST":"Representational State Transfer"

						 };

		this.WhatIs = function(term){

			if (whatiswhat.hasOwnProperty(term)){ //binding the local variable to the inner function

				return (whatiswhat[term]);

			}

			else {

				return "Please try after the Dictionary updates";

			}

		}

		return this;

	}()); //Inline execution of the function



	alert(WhatIsDictionary.WhatIs("JSON"));

	

Prototype Inheritance

Golden Statement:

JavaScript is a prototypal inheritance language. That means that objects can inherit properties directly
from other objects. The language is class-free.

- Douglas Crockford (Author of JavaScrirpt: The Good Parts)

Remember the movie Independence Day? Will Smith captures an alien and the scientists slit open the alien
to find another miniature version of the alien inside!! A JavaScript object contains one more object deep inside
that is known as prototype.

Golden Statement:

When you make a new object, you can select the object that should be its prototype.

- Douglas Crockford (Author of JavaScrirpt: The Good Parts)

		var foo = {one: 1, two: 2};

		var bar = {three: 3};

		bar.__proto__ = foo;

		alert(bar.two);