7.12 JS this Keyword

this Alone

• When used alone, this refers to the global object.
• Because this is running in the global scope.
• In a browser window the global object is [object Window]:

Example 2: JS this Keyword [object Window]

let x = this;

In strict mode, when used alone, this also refers to the global object

Example 3: JS this Keyword - window object

"use strict";
let x = this;

this in a Function (Default)

• In a function, the global object is the default binding for this.
• In a browser window the global object is [object Window]:

Example 4: JS this Keyword [object Window] part 2

function myFunction() {
  return this;
}

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.

Example 5: JS this Keyword - Function

"use strict";
function myFunction() {
  return this;
}

this in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event:

Example 6: JS this Keyword - Event Handler

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

Object Method Binding

In these examples, this is the person object:

Example 7: JS this Keyword - person object part 1

const person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

Example 8: JS this Keyword - person object part 2

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

i.e. this.firstName is the firstName property of this (the person object).

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.
• The example below calls person1.fullName with person2 as an argument, this refers to person2, even if fullName is a method of person1:

Example 9: JS this Keyword - Explicit Function Binding

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName:"John",
  lastName: "Doe",
}

// Return "John Doe":
person1.fullName.call(person2);

Function Borrowing

• With the bind() method, an object can borrow a method from another object.
• This example creates 2 objects (person and member).
• The member object borrows the fullname method from the person object:

Example 10: JS this Keyword - Function bind()

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);