Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 27 of 30 – JavaScript This
90%

JavaScript This

The this keyword is one of the most important concepts in JavaScript. It refers to an object and its value depends on how a function is called.

Note: The value of this changes according to the execution context of the function.
What is this Keyword?

The this keyword refers to the object that is executing the current function.

Different calling methods can change the value of this.

Basic Example of this
var myVar = 100;

function WhoIsThis(){
var myVar = 200;
alert(myVar);
alert(this.myVar);
}

Here, myVar refers to the local variable while this.myVar refers to the object property.

Rules of this Keyword

The value of this depends on the following situations:

  • Global Scope
  • Object Method
  • call() and apply()
  • bind()
this in Global Scope

When a function is called directly, this refers to the global object (window object in browsers).

var myVar = 100;

function WhoIsThis(){
alert(this.myVar);
}

WhoIsThis();
Output of Global Scope Example
Output:

100

Because the function is called from the global scope, this points to the window object.

Strict Mode Behavior

In strict mode, the value of this inside a standalone function becomes undefined.

"use strict";

function test(){
alert(this);
}

test();
this in Nested Function

Even inside a nested function, this points to the global object when the function is called normally.

function SomeFunction(){

function WhoIsThis(){
alert(this);
}

WhoIsThis();
}
Important Point
  • Direct function call → window object
  • Strict mode → undefined
  • Nested normal function → window object
  • Object method → object itself
this Inside Object Method

When a function is called as an object's method, the this keyword refers to that object.

var obj = {
myVar:300,

whoIsThis:function(){
alert(this.myVar);
}
};

obj.whoIsThis();
Output of Object Method
Output:

300

Because the method is called using obj.whoIsThis(), the value of this becomes obj.

Using this with Constructor Function

When an object is created using the new keyword, this refers to the newly created object.

function Person(){
this.name="Aman";
}

var p1=new Person();
Creating Multiple Objects
function Person(){
this.name="Unknown";
}

var p1=new Person();
var p2=new Person();

Each object gets its own copy of properties.

call() Method

The call() method allows us to specify which object should become this.

function WhoIsThis(){
alert(this.myVar);
}

var obj1={myVar:200};

WhoIsThis.call(obj1);
Output of call()
Output:

200

Because obj1 is passed to call(), this refers to obj1.

apply() Method

The apply() method works like call() but accepts arguments differently.

function WhoIsThis(){
alert(this.myVar);
}

var obj2={myVar:300};

WhoIsThis.apply(obj2);
Output of apply()
Output:

300

The value of this becomes obj2.

bind() Method

The bind() method creates a new function where the value of this is permanently set to a specified object.

var obj={name:"Aman"};

function showName(){
alert(this.name);
}

var result=showName.bind(obj);
result();
Output of bind()
Output:

Aman

The bind() method permanently attaches the object to the function.

bind() with Callback Function

bind() is commonly used when passing functions as callbacks.

function SomeFunction(callback){
callback();
}

var obj={
myVar:300,
show:function(){
alert(this.myVar);
}
};

SomeFunction(obj.show.bind(obj));
Why bind() is Useful?
  • Maintains object context.
  • Useful in event handling.
  • Useful in callback functions.
  • Prevents losing the value of this.
Precedence of this Keyword

JavaScript follows the following order to determine the value of this:

  1. bind()
  2. call() and apply()
  3. Object Method
  4. Global Scope
Summary Table
Situation Value of this
Global Function window object
Strict Mode Function undefined
Object Method Current Object
Constructor Function New Object
call() / apply() Specified Object
bind() Permanently Bound Object
Advantages of this Keyword
  • Accesses current object properties.
  • Supports object-oriented programming.
  • Useful in constructors.
  • Works with methods and callbacks.
  • Provides dynamic context handling.
Points to Remember
  • The value of this depends on how a function is called.
  • Global functions use the window object.
  • Object methods use the current object.
  • new keyword creates a new object and binds this.
  • call() and apply() explicitly set this.
  • bind() permanently binds this to an object.
  • Strict mode sets this to undefined in normal functions.

🧠 Quick Quiz

Which method permanently binds the value of this to an object?



← Previous Next →