Tutorial: Javascript This Keyword
Tags: javascript, contrast, programming
Published: 2022-01-16 09:17:19

---
title: Tutorial: Javascript This Keyword
published: True
date: 2021-01-10 01:16:04 UTC
tags: ["Javascript", "Contrast", "Programming"]
canonical_url: https://www.devwares.com/blog//javascript-this-keyword
---

## The JavaScript this Keyword

**JavaScript Code:**

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

```


**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.

```javascript
fullName : function() {
  return this.firstName + " " + this.lastName;
}
this 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:**

```javascript
var x = this;

```

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

**JavaScript Code:**

```javascript
'use strict';
var 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:**

```javascript
function myFunction() {
  return this;
}

```

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

```javascript
function myFunction() {
  return this;
}

```

**this in Event Handlers**

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

**JavaScript Code:**

```javascript
<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:**

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

```

**JavaScript Code:**

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

```

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:**

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

```

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

## Resources

You may find the following resources useful:


- [Get Tailwind CSS PRO](https://tailwindui.com/pricing)
- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [Basics of Javascript](https://www.devwares.com/blog/javascript-basics)
- [Tutorial: JavaScript Arrow Functions](https://www.devwares.com/blog/javascript-arrow-functions)
- [Tutorial: JavaScript Arrays](https://www.devwares.com/blog/javascript-arrays)