JavaScript 'this' keyword

The 'this' keyword is one of the most confusing and misunderstood parts of JavaScript. The 'this' keyword behaves differently in JavaScript compared to other language. In Object Oriented languages , the 'this' keyword refers to the current instance of the class. In JavaScript the value of this is determined mostly by the invocation context of function and where it is called. In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called.

Global Scope

When you use 'this' keyword in global context, it is bound to global object (window in browser)

document.write(this); //[object Window]

When you use this inside a function defined in the global context , this is still bound to global object since the function is actually made a method of global context.

function foo(){ return this; } document.write(foo()); //[object Window]

Above foo is made a method of global object.

Calling a Function

The 'this' keyword remains the global object if you're calling a function.

window.meGlobal = "I'm the window object"; function foo() { alert(this.meGlobal); // I'm the window object alert(window === this); // true } foo();

Inside constructor function

When the function is used as a constructor (that is when it is called with new keyword), this inside function body points to the new object being constructed.

var globalVar = "I am Global"; function callMe() { this.globalVar = "inside function"; } var obj1 = new callMe(); //adds globalVar to obj1 document.write(obj1.globalVar); //call me

Next : How Does Function Hoisting Work in JavaScript?

Related Topics