The Dark side of JavaScript

When I started to go deep into jQuery, I started to realize that many of JavaScript concepts doesn't make sense the way I understood it. So I started my journey into the dark side of JavaScript and here is a summary of what I learned:

-JS is a Prototype based language which means that In JS there is no class concept, we can't define classes and instantiate objects of those classes,This means that to instantiate an object we have to use the build in object type Object or the other build in object type Function (more about this later)

-A JS object is an unordered collection of properties (a JS object is like an Hash Map in other programming languages)

-The following code show how to create and manipulate an object in different ways

// Create object
var emp = new Object();

// assign properties to the object

// we can use dot operator
emp.name = "John"
// or we can use general reference operator
emp["address"] = "somewhere on earth";
// we can only use general reference operator with non valid JS identifiers

emp["flat number"] = 3;

-Using JSON (JavaScript Object notation) we can construct JS objects , the following code construct the above object

var emp = {name:"John" , address:"somewhere on earth" , "flat number":3};

-Top level variables defined outside the scope of any function or variables declared without the var keyword are properties of the pre-defined JS window object

var foo = "foo"; // same as window.foo

function doSomething() {
    bar = "bar"; // same as window.bar           
}

-In JS Functions are considered objects this means functions can be assigned to variables and have properties, actually a function name is not really the name of the function but the name of the reference that points to the instance a function object

function doSomething() {
}


// this is equivalent to

var doSomething2 =function() {
}

// this will diplay "function"
alert(typeof(doSomething));

-Since functions are objects so they can have properties

var doSomething =function() {
}
doSomething.foo = "foo";
doSomething["bar"] = bar;

-functions can also be assigned to properties of an object

function doSomething() {
}


var emp = new Object();
emp.name = "John"
emp["address"] = "somewhere on earth";
// here we are referencing an anonymous function
emp.computeSalary = function() {};

// here we are referencing an existing functions
emp.otherFunction = doSomething;

// calling those functions           
emp.computeSalary();
emp.otherFunction();

in this articles we will examine mainly the this keyword, lets have a look at the following piece of code

at line 8 what the keyword this actually refers too?

In other programming languages like Java or C#, this refers to the instance of the class within which the method has been declared.so if this is also true for JS this.msg will refer to the showMsg.msg property at line 10 since a function is an object in JS but this is not true.

In JavaScript, where functions are objects and aren't declared as part of anything, the object referenced by this is called the function context and is determined by how the function is invoked not by how its declared.This means that the same function can have different contexts depending on which object calls it.

Top level functions that are not assigned to any object will have the built in window object as the function context, so the above code at line 11 alert(showMsg()); will display window.msg property 'I am window object' as defined in line 5.

lets look at the rest of the code

At line 1 we assigned the showMsg function to object o1, so in line 2 function showMsg is invoked and o1 is passed to it as its function context. in line 3 and 4 We can set the function context to whatever we want by invoking a function via the Function methods call() or apply(). since functions are object they too can have functions. The call function invokes the function specifying, as its first parameter, the function context, while the remaining parameters become the parameters of the called function i.e. the second parameter to call becomes the first argument of the called function and so on. The apply method works in a similar fashion except that its second parameter is an array of objects that become the arguments to the called function.

now lets take a look at how to use a function as a constructor to an object

At line 4 we are constructing a JS object using MyObject as a constructor to this object , this code is equivalent to the following code