Just read the title of this free HTML JavaScript tutorial, obviously you will think about the evil, according to the basic nature of the word "dark side". But this is just a title that the author like to name to it, when he started to go deep into JavaScript, jQuery, and realize that many of JavaScript concepts do not make sense the way he understood it. This is summary of JavaScript's dark side: JavaScript doesn't have a class concept, using JavaScript JSON (JavaScript Object notation) we can construct JavaScript objects in many ways, JavaScript functions are JavaScript objects so they can have JavaScript properties, ... Please go to the detailed post for full instructions and JavaScript example codes

More HTML JavaScript tutorials for trying:
- JavaScript Events: Look inside JavaScript Framework Library
- JavaScript: The Good Parts speech
- Theory of the DOM by Douglas Crockford

• Demo
• Enlarge
• Reload
• New window

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

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New