postImage

Tutorial: Javascript This Keyword

blogImage

By Emmanuel Chinonso

Web Developer

The JavaScript this Keyword

JavaScript Code:

1var person = {
2 firstName: 'John',
3 lastName: 'Doe',
4 id: 5566,
5 fullName: function() {
6 return this.firstName + ' ' + this.lastName;
7 },
8};

Contrast Bootstrap UI Kit

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.

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

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:

1var x = this;

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

JavaScript Code:

1'use strict';
2var x = this;

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:

1function myFunction() {
2 return this;
3}

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";

1function myFunction() {
2 return this;
3}

this in Event Handlers

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

JavaScript Code:

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

Object Method Binding

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

1var person = {
2 firstName: 'John',
3 lastName: 'Doe',
4 id: 5566,
5 myFunction: function() {
6 return this;
7 },
8};

JavaScript Code:

1var person = {
2 firstName: 'John',
3 lastName: 'Doe',
4 id: 5566,
5 fullName: function() {
6 return this.firstName + ' ' + this.lastName;
7 },
8};

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:

1var person1 = {
2 fullName: function() {
3 return this.firstName + ' ' + this.lastName;
4 },
5};
6var person2 = {
7 firstName: 'John',
8 lastName: 'Doe',
9};
10person1.fullName.call(person2); // Will return "John Doe"

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...