JavaScript Fundamentals Before Learning React/

...

/

The 'this' Keyword & Binding in JavaScript

The 'this' Keyword & Binding in JavaScript

In this lesson, we study how the notorious 'this' keyword works in JavaScript in the context of explicit, implicit, new, and global binding.

We'll cover the following...

What is this?

Almost all beginner JavaScript programmers struggle with the this keyword. The good news is that understanding this is actually much easier than it seems. In a nutshell, the value of this depends on what context it is used in. So, if it is used in a function, it’s value will depend on how that function is invoked, i.e., the call site. Let’s go through the ways that this can be assigned in JavaScript.

Implicit Binding

When the dot notation is used to call a function that is in an object or an object of a class, we say that this was bound implicitly. For example, consider the code sample below:

Javascript (babel-node)
class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
  getName() {
    return `${this.firstname} ${this.lastname}`;
  }
}
var me = new Developer('Robin', 'Wieruch');
console.log(me.getName()); // 'this' is me
var hobbit = new Developer('Frodo', 'Baggins');
console.log(hobbit.getName()); // 'this' is 'hobbit'

Left of the Dot Rule

Whatever is to the left of the dot is what this is. For example, we call ...