Anay Kamat’s Weblog

Let’s play with inheritance and closures in Javascript. Take a look at the following javascript code:

function BaseClass(){
	var id=200;
	this.Id=function(){
		return id;
	}
}

function ChildClass(){
	var id=500;
}

ChildClass.prototype = new BaseClass();
var childObject=new ChildClass();

In Javascript, inheritance is achieved using prototype. When we try to access any member on Javascript object, it first tries to search for the member within that object. If the member is found, then its accessed otherwise it tries to search for that member in its prototype object.

We make BaseClass the parent class of ChildClass with the following instruction:

ChildClass.prototype = new BaseClass();

Notice that ChildClass does not have a method called ‘Id’. When we make a call to method ‘Id’ on childObject, it will see that ChildClass does not have ‘Id’ method and so will take it from its prototype object which is nothing but the object of BaseClass.

Based on this knowledge, what do you think will be the output of the following instruction?

childObject.Id()

If you think it should be 500, then you are wrong. The correct answer is 200. This happens due to what is known as Closures. According to a tutorial on javascript closures by Morris Johns:

"a closure is the local variables for a function - kept alive after the function has returned"

To understand how this works in our case, let’s try to understand how javascript actually executes a call to the method ‘Id’ on childObject.

As childObject does not have a method called ‘Id’, it takes that method from its prototype and then executes it. You can imagine that Javascript performs the following steps to execute a call to the method ‘Id’ on childObject.

childObject.Id = ChildClass.prototype.Id;
childObject.Id();

But does its mean that in Javascript, it’s not possible to override the values from base class/object at all? Well, It is possible by making a small change to our code. Javascript has a keyword called ‘this’. The ‘this’ keyword points to the object in which the method being called is present. For more information on ‘this’ keyword, refer to the article ‘The this keyword’.

In our current code, we are defining a variable using keyword ‘var’ which makes it local to the function in which it is defined. Due to this, closure comes into picture and call to the method ‘Id’ always prints the value from the BaseClass. To solve this problem, we need to refer to the variable ‘id’ using ‘this’ keyword. This will tell our method to use the value from the object in which the method has been placed. In this way, when the method is placed in ChildClass object, it will print the value of ‘id’ from ChildClass and not from BaseClass. Thus, the modified code which allows overriding is given below:

function BaseClass(){
	this.id=200;
	this.Id=function(){
		return this.id;
	}
}

function ChildClass(){
	this.id=500;
}

ChildClass.prototype = new BaseClass();
var childObject=new ChildClass();

Here’s an oldie but a goodie. Confounded by trying to track down fancy-looking WordPress themes? Check out this Web-

based theme editor that lets you tweak every nook and cranny of a theme then spit it back to your server to go live. You can add columns, change fonts and backgrounds, even throw in a customizable tag cloud–all with no coding experience required. All you need is a little creativity and some working knowledge of drop-down menus.

While some WordPress themes have excellent built-in support for doing this right from the WordPress dashboard,

many more don’t, and trying to figure out all the little things like text color is made far easier with a WYSIWYG editor than with WordPress’ built-in editing tools.

Advanced users can throw in graphics or design elements they’ve hosted elsewhere on their server (as long

as it’s got a URL to link up to), and when all is said and done each bit of the theme can be grabbed as an individual file to whatever theme you’re currently using. This is an easy way to try out new fonts and colors without making a mess out of your existing style.css file.

Bookmark this!

Hide Sites

Source: Web Development

I started my career as a web developer before the dot.com crash. I learnt all about HTML, IIS, ASP, SQL Server and JavaScript. Equipped with the knowledge I built a few dynamic websites and carried my laptop with me to all my interviews and walked out of an interview with a job as a senior web developer. Before .NET existed, creating scalable and maintainable web application was not easy. ASP had a VB scripting engine. It was not scalable and it did its best to glue the web front end design with the backend database access. Most of the middle tier business logic and data access work had to be done using COM. Looking back you couldn’t build an elegant web application without .NET. JavaScript was used a lot in front-end web development mainly for client-side validation, scrolling tickers and special effects. But most developers never took Javascript seriously as a programming language. I know I didn’t but who would have guess that AJAX gave Javascript a more important position in the world of web development. Its power is hidden in the browser!

If you are not a Javascript developer, you will find writing client-side AJAX application in JavaScript a daunting task. That was one of the reasons Microsoft extended Javascript so that the Javascript language more closely resembles .NET languages such as C# and VB.NET. Actually JavaScript is an object-oriented programming language but there are a lot of C# and VB.NET OO type programmers who found coding in JavaScript less palatable.

In fact I read that some argue JavaScript is more object-oriented than C# or VB.NET. In C# and VB.NET, there are objects and classes and an object is an instance of a class but a class does not exist in its own right. In JavaScript, there are no classes. Classes do not exist. Only objects exist in JavaScript. One of the best feature of JavaScript is you can easily extend it. What is your thought on this?

Douglas Crockford shares his knowledge on JavaScript through his article “A Survey of the JavaScript Programming Language” which I think all web developers should read for a more in depth understanding of JavaScript as a programming language.

Here’s what Douglas Crockford say about JavaScript.

1. JavaScript is not Java. Neither is it a subset of Java. JavaScript shares C-family syntax with Java, but at a deeper level it shows greater similarity to the languages Scheme and Self. It is a small language, but it is also a suprisingly powerful and expressive language.

2. It is not a toy language, but a full programming language with many distinctive properties.

3. JavaScript contains a small set of data types. It has the three primitive types boolean, number, and string and the special values null and undefined. Everything else is variations on the object type.

4. Objects can easily be nested inside of other objects, and expressions can reach into the inner objects.

5. Arrays in JavaScript are hashtable objects.

6. Functions in JavaScript look like C functions, except that they are declared with the function keyword instead of a type.

7. Functions which are used to initialize objects are called constructors. The calling sequence for a constructor is slightly different than for ordinary functions.

8. Named variables are defined with the var statement. When used inside of a function, var defines variables with function-scope. The vars are not accessible from outside of the function.

Source: Development