JavaScript this Keyword

Learn everything about the JavaScript this keyword and its value in object methods, function, events, special methods such as call, apply, and bind, etc.

Table of Contents 📖

• What is the this Keyword?
• This By Itself
• This in an Object Method
• This in an Arrow Function
• This in a Function Declaration
• This in a Function Declaration in Strict Mode
• This in Event Handlers
• This and bind()
• This and call()
• This and apply()
• This and Classes
• This and Derived Classes

What is the this Keyword?

This is a keyword, not a variable, that refers to an object. However, the object it refers to depends on how it is used. For example, this in a method is different than this in an event.

This By Itself

By itself, this refers to the global object. In other words, when this is in the global scope, it refers to the global object. In JavaScript, the global object is the window object.

console.log(this); // Window {window: Window...}

In strict mode, this still refers to the global object. We can place JavaScript in strict mode by placing the string "use strict" at the top of the page.

"use strict"; console.log(this); // Window {window: Window...}

This in an Object Method

The this keyword in an object method refers to the object.

const person = { firstName: 'Witt', lastName: 'Code', printFullName: function() { console.log(${this.firstName} ${this.lastName}); } }

person.printFullName(); // Witt Code

In this case, this refers to the person object. The person object has three properties, firstName, lastName, and printFullName. Therefore, within the printFullName method we can access the firstName and lastName properties with the this keyword.

This in an Arrow Function

Arrow functions don't have their own binding to this, instead they inherit it from the parent scope. This means that arrow function expressions are best suited for non-method functions. A non-method function is a function that doesn't belong to an object.

const myArrow = () => { console.log(this) // Window {window: Window...} }

Even in strict mode arrow functions will inherit from the parent scope.

"use strict"; const myArrow = () => { console.log(this) // Window {window: Window...} }

As arrow functions inherit this from the parent scope, using them in methods (functions belonging to an object) can cause unexpected results.

const person = { firstName: 'Witt', lastName: 'Code', printFullName: () => { console.log(${this.firstName} ${this.lastName}); }, printWindow: () => { console.log(this); } }

person.printFullName(); // undefined undefined person.printWindow(); // Window {window: Window...}

Here, printFullName and printWindow are methods (not non-methods) as they belong to the person object. However, they are created with arrow functions which don't have their own binding. Therefore, this.firstName and this.lastName will be undefined as this refers to the global object.

This in a Function Declaration

Function declarations start with the word function, similar to how variable declarations start with either var, let, or const.

function myFunctionDeclaration() { }

Within a function declaration, the this keyword refers to the global object. In a browser, the window is the global object.

function myFunctionDeclaration() { console.log(this); // Window {window: Window ...} }

The this keyword still refers to the global window object inside nested functions.

function myFunctionDeclaration() { function nested() { console.log(this); // Window {window: Window ...} } nested(); }

This type of binding is known as default binding. Default binding is what happens if we don't specify any other kind of binding.

This in a Function Declaration in Strict Mode

JavaScript's strict mode does not allow default binding. Therefore, this inside a function declaration is undefined.

"use strict"; function strictFunction() { console.log(this); // undefined }

This in Event Handlers

Event handlers are JavaScript code that handles events such as user input, actions, browser actions, etc. In event handlers, this refers to the HTML element that received the event.

Click Me!

Here, this refers to the HTML element. Specifically, we use the style property of the button to manipulate its appearance.

This and bind()

We can explicitly set the value of this by using some JavaScript methods. One of these is bind. The bind method returns a new function that, when invoked, gets its this set to a specific value. A method such as bind is great for preserving this. For example, when you pass a method as an object to another function as a callback, this is lost.

const person = { firstName: 'Witt', lastName: 'Code', printFullName: function() { console.log(${this.firstName} ${this.lastName}); } }

setTimeout(person.printFullName, 2000); // prints undefined

Here, we are calling the printFullName function of the person object after 2 seconds. However, the person's first and last names are not printed, but instead undefined is. This is because the setTimeout method received the person.getName function without the person object. We can fix this by using the bind method.

setTimeout(person.printFullName.bind(person), 2000); // prints undefined

Now the person.getName method is bound to the person object so this is preserved. Specifically, the bind method is called on a function and takes an argument for this as the first argument, it then returns the method it was called on with the new this context.

This and call()

Another JavaScript method that can mess with the this value is call. The call method does the exact same thing as the bind method but it calls the function instead of returning the function.

const person = { firstName: 'Witt', lastName: 'Code', printFullName: function() { console.log(${this.firstName} ${this.lastName}); } }

const person2 = { firstName: 'Greg', lastName: 'Wake', }

person.printFullName.call(person2); // Greg Wake

So now, instead of returning the function like with bind, the function is called immediately. The bind and call methods also take extra parameters for functions with arguments.

const person = { firstName: 'Witt', lastName: 'Code', printFullName: function(age) { console.log(${this.firstName} ${this.lastName} and my age is ${age}.); } }

const person2 = { firstName: 'Greg', lastName: 'Wake', }

person.printFullName.call(person2, 27); // Greg Wake and my age is 27.

This and apply()

Another method is apply. This method is the exact same as call except that it takes arguments as an array.

const person = { firstName: 'Witt', lastName: 'Code', printFullName: function(age) { console.log(${this.firstName} ${this.lastName} and my age is ${age}.); } }

const person2 = { firstName: 'Greg', lastName: 'Wake', }

person.printFullName.call(person2, [27]); // Greg Wake and my age is 27.

This and Classes

When it comes to this and classes, it is actually very similar to functions because classes are functions under the hood. Within a class constructor, this is a regular object meaning it will inherit all non-static methods.

class Person { constructor() { const proto = Object.getPrototypeOf(this); console.log(Object.getOwnPropertyNames(proto)); } printName() {} printAge() {} }

new Person(); // ['constructor', 'printName', 'printAge']

Here, this is an instance of the Person class. The property names of an instance of the Person class are the non-static methods and constructor.

This and Derived Classes

When it comes to this and derived classes, or subclasses, calling super() creates a this binding within the constructor. The super keyword calls the constructor of the superclass. So, if we call this in the derived class before calling super we will get a reference error.

class Person { constructor() { this.name = 'WittCode'; this.age = 27; } printName() {} printAge() {} }

class Student extends Person { constructor() { this.studying = true; // ReferenceError super(); } study() {} } new Student();

Here, Student is a derived class of Person. Therefore, we need to call the super method. Calling this after super will cause no issues.

class Person { constructor() { this.name = 'WittCode'; this.age = 27; } printName() {} printAge() {} }

class Student extends Person { constructor() { super(); this.studying = true; // No ReferenceError } study() {} } new Student();