Object Oriented JavaScript (Basic)

Hi all, few days ago, I picked up a book called "Dojo: The Definitive Guide" and realized that this book isn't really good for javascript beginners or those who have experienced only event-based javascript. Not only does using Dojo require understanding deeply on JavaScript, but also other JavaScript toolkits. To dive into Javascript programming from a beginner to a deeper js programmer, a few keys that need to be understood. Javascript closures, anonymous functions and objects. (These are not required for people who want to learn JavaScript and design a website, but without these skills, the websites you design or develop do not belong to the modern world)

The way I learnt these was actually by reading books. The main book I used is called "Object-Oriented JavaScript" by Stoyan Stefanov. This is actually the only book I completed reading without jumping into web resources. Other books are also good on this topic such as "Pro JavaScript Design Patterns" by Ross Harmes and Dustin Diaz. I didn't use this book much since I have known OO design patterns from my java and c++ experiences.

Before going to the three topics mentioned above, there are still something you need to know about javascript. Javascript is a dynamic language, therefore, it does not have static types; which means you can assign any value to a variable without declaring its type.

var str = "this is a string"; will assign the whole string into the variable without having to declare a 'String' type like what you did in Java or C++. As I said, you can assign anything to a variable, even a function; therefore, passing a function into the parameter list in a function is totally valid in JavaScript. JavaScript doesn't have curly bracket scope, but it has function scope (want more info? refer to the books I mentioned above). Also, in JavaScript, Arrays, Functions and custom defined objects are all objects and JavaScript Objects are passed by reference (Refer to the books I mentioned above for more and clearer info).

Closures:

It is a very powerful feature in JavaScript and it is important for a JavaScript beginners because without understanding of js closures, the behaviours from your code maybe different from what you expected. I will give some simple explanations about this term here. Let's take a look at the code below:


function myFunc(){

var myVar = 5;

var myF = function(){ console.log(myVar); };
return myF;

}

var f = myFunc();

f();

//what will the line above output on the firebug console?


You can test this code in the firebug console. The output is '5'. The point of this is when a function returns another local function to a variable outside the function itself. This variable holds the reference to the returned function. As I mentioned above, JavaScript has function scope. Supposedly, variables defined in a function are not accessible by variables or functions defined outside the function; but closures break this rule.

Anonymous Functions

This is easy, and it was already seen from the example above, but I will still explain a little here:


// The regular way to create a function
function myFunc(){

// behaviors

}





// Use anonymous function

// then assign the anonymous function to a variable

var myFunc = function(){ // behaviors here };



Objects

Object Oriented JavaScript is different from other Object Oriented Programming language like java and c++. JavaScript does not allow you to create classes. While other OO languages use class to define objects, JavaScript uses objects only. There are two ways of creating a JavaScript object:

//Object Literal Notation:
var myObj = {
member: 5,
method: function(){}
}

//Constructor function
function myObjFunc() {
this.member = 5;
this.method = function(){};
}
var myObj = new myObjFunc();


Prototype is another feature of object oriented Javascript. Each function has a prototype. Prototype acts like an object. In each object created by using constructor function, there is a pointer linker pointing to the prototype of the constructor which created the object. By using prototype, we could establish the inheritance feature of Object Oriented JavaScript.