"This" Keyword in JS

The "this" keyword is a fundamental concept in JavaScript. The value of "this" is dynamically determined at runtime based on how it's called. In this article, we'll explore some key concepts related to the "this" keyword in JavaScript.

The Global Object and the "this" Keyword

In JavaScript, the global object is the object that all global variables and functions are defined on. When the "this" keyword is used in the global scope, it refers to the global object. "this" also refers to the global object when it is used in a function that is called in the global scope.

console.log(this === window); // Output: true

function exampleFunction() {
  console.log(this === window); 
}

exampleFunction(); // Output: true

Implicit Binding

Implicit binding is a common way to determine the value of the "this" keyword in JavaScript. Implicit binding is invoked when the "this" keyword is used in an object's method. In those cases, "this" refers to the object that is immediately to the left of the dot when a function is called.

const obj = {
  method() {
    console.log(this);
  }
};

obj.method(); // Output: obj

Explicit Binding

Explicit binding is another way to assign the value of the "this" keyword in JavaScript. It involves using methods such as call(), apply(), or bind() to explicitly set the value of "this" to a particular object.

The call() and apply() methods are used to invoke a function with a specified "this" value and a set of arguments. They take the "this" value as its first argument, and any additional arguments as subsequent arguments.

var person = {
  firstName: "Johny",
  greeting: function(message) {
    return message + this.firstName + ".";
  }
};

var person2 = {
  firstName: "Sally",
};

var welcome = person.greeting.call(person2, "Hello ");

console.log(welcome); // Output: "Hello Sally."

The bind() method returns a new function that is bound to a specific "this" value, which means that when the new function is called, the "this" value will be the value that was passed to bind().

var person = {
  firstName: "Johny",
  greeting: function(message) {
    console.log(message + this.firstName + ".");
  }
};

var person2 = {
  firstName: "Sally",
};

var boundFunction = person.greeting.bind(person2, "Hello ");

boundFunction(); // Output: "Hello Sally."

Constructor Functions

Constructor functions are a way to create new instances of formulaic objects. When a constructor function is called with the "new" keyword, a new object is created and the "this" keyword is bound to that new object. The new object is then returned by the constructor function.

function constructorObj(arg) {
  this.prop = arg;
  this.method = function() {
    console.log(this.prop);
  };
}

const exampleObject = new constructorObj('example');
exampleObject.method(); // Output: 'example'

Conclusion:

The "this" keyword is a fundamental concept in JavaScript programming. The global object, implicit and explicit binding, and constructor functions are concepts that developers should be familiar with when working with the "this" keyword in JavaScript.

DEV Community