Javascript is a special language with somewhat unusual features. Often you see people struggling with the concept of “this”, “new” and “prototype”. This is my attempt to shed some light on these mysterious concepts. If you are coming from a statically typed language like C# or Java, you will quickly realise that they are not what they seem to be.

This and that

A common mistake is to think that the “this” keyword in Javascript refers to the instance of the object you are in. This is the common use in C# and Java.

You can think of the “this” keyword as an implicit argument to the function. In a browser this implicit parameter will be set to the root object by default, e.g. the window object: 

function foo(){
	return this;
}
	
alert(foo()===window) //true

However, you can pass the “this” reference to the function you are calling by using the call (or apply) function:

	
function foo(){
	return this;
}
	
//calling foo with “this” assigned to the value “hello”
var result = foo.call(“hello”) 

alert(result) //”hello”

As you can see, the “this” keyword depends on the context in which you call the function foo.

The new keyword

To construct objects in Javascript you use the “new” keyword together with a constructor function. Functions that are used as a constructor usually starts with an upper case letter (best practice)

	
function Foo(){
	this.helloWorld = function(){return "Hello world"}
}
	
var obj = new Foo();

alert(obj.helloWorld()) //”Hello world”

When you call a function with the “new” keyword, a new empty object is created and then the constructor function is called with “this” set to the new object. In the example above, this will cause the new object to get the method “helloWorld” assigned to it. The prototype hierarchy is also set up, but I’ll come back to that later.

The following code demonstrates another way to get  the same effect as the new keyword (without the prototype hierarchy)

function foo(){
	this.helloWorld = function(){return "Hello world"}
}

//emulate "new"
var obj = {};
foo.call(obj);

alert(obj.helloWorld()) //"Hello world"

Forgetting the new keyword

If you “forget” to use the new keyword on a function that is meant to be used as a constructor you will get strange behaviour:

	
function Foo(){
	this.helloWorld = function(){return "Hello world"}
}
	
var obj = Foo();

alert(obj.helloWorld()) //fail
alert(window.helloWorld!==undefined) //true

You just assigned the function helloWorld to the window object. Probably not the intention :)

The prototype hierarchy

When you use the new keyword, the prototype hierarchy is set up. This means that the new object will have  the methods in the prototype object of the Foo function:

function Foo(){
	this.helloWorld = function(){return "Hello world"}
}

//define a method on the prototype
Foo.prototype.helloWorld2 = function(){return "Hello world 2"}


var obj = new Foo();

alert(obj.helloWorld()); //"Hello world"
alert(obj.helloWorld2()); //"Hello world 2"

The new object will also have methods defined higher up in the prototype hierarchy.

Well. That’s it for now.

F Share