DEV Community

Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: Javascript This Keyword

The JavaScript this Keyword

JavaScript Code:

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

Enter fullscreen mode Exit fullscreen mode

What is this?

This Keyword in JavaScript refers to object that it belongs to. it has different values based on where it is used:

  • When This is used in method, it refers to the owner object.

  • This refers to the global object when used alone.

-This refers to the global object in a function.

  • when used in strict mode, this keyword is undefined in a function.

  • This is the element that got the event in an event.

Any object can be referenced using methods like call() and apply().

this in a Method

This refers to the method's "owner" in an object method. This refers to the person object in the code at the top of the page. The fullName method belongs to the person object.

fullName : function() {
  return this.firstName + " " + this.lastName;
}
this Alone

Enter fullscreen mode Exit fullscreen mode

The Global object is the owner when used alone, hence this refers to the Global object. The Global object in a browser window is [object Window]:

JavaScript Code:

var x = this;

Enter fullscreen mode Exit fullscreen mode

This also relates to the Global object [object Window] in strict mode when used alone:

JavaScript Code:

'use strict';
var x = this;

Enter fullscreen mode Exit fullscreen mode

this in a Function (Default)

In a JavaScript function, the function's owner is the default binding for this keyword. The Global object [object Window] in a function is referred to when using this keyword.

JavaScript Code:

function myFunction() {
  return this;
}

Enter fullscreen mode Exit fullscreen mode

this in a Function (Strict)

The strict mode of JavaScript prevents default binding. As a result, when used in strict mode in a function, this is undefined. "Make use of strict";

function myFunction() {
  return this;
}

Enter fullscreen mode Exit fullscreen mode

this in Event Handlers

This is the HTML element that received the event in HTML event handlers:

JavaScript Code:

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

Enter fullscreen mode Exit fullscreen mode

Object Method Binding

This is the person object in this code (the person object is the "owner" of the function): JavaScript Code:

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

Enter fullscreen mode Exit fullscreen mode

JavaScript Code:

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

Enter fullscreen mode Exit fullscreen mode

To put it another way: this.firstName means the firstName property of this (person) object.

Explicit Function Binding

The call() and apply() methods are JavaScript methods that are predefined. They can both be used to invoke an object method with an argument of another object. Later in this course, you'll learn more about call() and apply(). When invoking person1.fullName with the argument person2, even though it is a method of person1, it will refer to person2:

JavaScript Code:

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

Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Resources

You may find the following resources useful:

Discussion (0)