Javascript this keyword – What is ‘this’?

The JavaScript “this” keyword refers to the object it belongs to.

It has different values depending on where it is used:
1. In a method, “this” refers to the owner object.
2. Alone, “this” refers to the global object.
3. In a function, “this” refers to the global object.
4. In a function, in strict mode, “this” is “undefined”.
5. In an event, “this” refers to the element that received the event.
6. Methods like “call()”, and “apply()” can refer “this” to any object.

Example :

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

1. this in a Method

In an object method, this refers to the “owner” of the method.

In the example on the top of this page, this refers to the person object.

The person object is the owner of the fullName method.

2. this Alone

When used alone, the owner is the Global object, so “this” refers to the Global object.

In a browser window the Global object is “[object Window]”:
var x = this; //[object Window]

In strict mode, when used alone, this also refers to the Global object “[object Window]”:

“use strict”;
var x = this; //[object Window]

3. this in a Function (Default) :

In a JavaScript function, the owner of the function is the default binding for this.

function myFunction() {
  return this;
}
//[object Window]

4. this in a Function (Strict)
JavaScript strict mode does not allow default binding.
So, when used in a function, in strict mode, “this” is “undefined”.

“use strict”;
function myFunction() {
return this;
}

5. this in Event Handlers
In HTML event handlers, “this” refers to the HTML element that received the event:

<button onclick=”this.style.display=’none'”>
Click to Remove Me!
<button>

6. Object Method Binding
In these examples, “this” is the person object (The person object is the “owner” of the function):

var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
  myFunction : function() {
    return this;
  }
};
person.myFunction(); //[object Object]
person.fullName(); // John Doe

In other words: “this.firstName” means the “firstName” property of “this” (person) object.

7. Explicit Function Binding

The “call()” and “apply()” methods are predefined JavaScript methods.

They can both be used to call an object method with another object as argument.

In the example below, when calling person1.fullName with person2 as argument, this will refer to person2, even if it is a method of person1:

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // Will return "John Doe"