What Is "this" in JavaScript?
February 13, 2023
As a beginner in JavaScript, understanding the concept of this can be one of the most challenging things. However, being well-versed in the value of this is a critical aspect of the interview process. In this article, we will delve into the topic and provide a comprehensive guide to the five methods of determining the value of this in JavaScript.
It is important to note that the value of this in JavaScript is dynamic, and it depends on the function being called. The time of declaration does not affect the value of this.
Determining the Value of this
1. Function Calls
When a function is called directly and doesn't belong to a method in an object, this will point to the global object. In browsers, this is Window by default. However, in strict mode, this is undefined.
Here's an example:
var name = "John";
function callThis() {
console.log(this);
console.log(this.name);
}
callThis();
// Window
// John
In the example above, this points to the global Window object because the function callThis() is being called directly. The name variable is defined in the global scope, so it's also bound to the Window object.
2. Object Method Calls
When a function is called as a method of an object, this will refer to that object.
Here's an example:
const john = {
name: "john",
callJohn() {
console.log(`hello, ${this.name}`);
},
};
john.callJohn(); // hello, john
In the example above, this refers to the john object when the callJohn() method is called.
3. Constructor Calls
When a function is called with the new keyword, a new object is created before the function is executed, and this will point to that newly created object.
Here's an example:
function Cellphone(brand) {
this.brand = brand;
}
Cellphone.prototype.getBrand = function () {
return this.brand;
};
let newIPhone = new Cellphone("Apple");
let newPixelPhone = new Cellphone("Google");
console.log(newIPhone.getBrand()); // Apple
console.log(newPixelPhone.getBrand()); // Google
In the example above, when the Cellphone constructor is called with new, a new object is created, and this will point to that object. The brand property is set to Apple for the newIPhone object and to Google for the newPixelPhone object.
4. apply(), call(), and bind() Method Calls
The apply(), call(), and bind() methods can be used to specify the object that this will refer to.
apply()takes two parameters. The first is the object to whichthisshould be bound, and the second is an array of parameters to pass to the function. It then executes this new function.call()is similar toapply(), but the second parameter is not an array, but rather a list of arguments passed directly to the function.- The
bind()method creates a new function with this permanently bound to a specific object, and the parameters passed to the function.
function getBrand(prefix) {
console.log(prefix + this.brand);
}
let apple = {
brand: "Apple",
};
let sony = {
brand: "Sony",
};
getBrand.call(apple, "It's a "); // It's a Apple
getBrand.call(sony, "It's an "); // It's an Sony
5. this Value in Arrow Functions
Arrow functions were introduced in ES6 as a new type of function in JavaScript. However, it's important to note that arrow functions do not have their own this value, and the this of the arrow function will be inherited from its parent function. If the parent function is also an arrow function, the search will continue until it reaches the default this value in the global environment.
Here is an example:
let getThis = () => this;
console.log(getThis() === window); // true
In this example, getThis is an arrow function, and its this value is taken from the global environment, which in this case is window. The result of the code will output true.
In conclusion, understanding the value of this in JavaScript is crucial for any front-end developer. The five methods discussed in this article - function call, object method call, constructor call, apply, call, and bind method calls, and arrow functions - provide a comprehensive overview of the different ways to determine the value of this in JavaScript.