What is ‘this’ in JavaScript?
19 January, 2023
2
2
0
Contributors
In JavaScript, the this keyword refers to the current object the code is being executed. The value of this can change depending on how the function is called.
Here is an example of how the value of this can change in different contexts:
const obj = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
obj.sayHello(); // Output: "Hello, my name is John"
const greeting = obj.sayHello;
greeting(); // Output: "Hello, my name is undefined"In the first call to sayHello, this refers to obj because the function is called as a method on obj.
In the second call to sayHello, the function is assigned to the variable greeting, and is called as a regular function. So, in this case, this refers to the global object (in the browser, this is the window object). As there is no name variable id declared at the global level, it resolves to undefined.
What is Binding?
In JavaScript, binding refers to the process of setting the value of the this keyword. When a function is called, the value of this within that function is determined by how the function is called.
Don't confusebindingwith thebind()method that we will discuss in a while!
What are the different types of bindings?
There are 4 types of bindings:
- Implicit Binding
- Explicit Binding
- Global Binding
- No Binding(The Arrow Function)
Implicit Binding
In JavaScript, implicit binding refers to the way the value of the this keyword is determined when a function is called. If a function is called as a method on an object, the value of this is set to the object within the function. This is known as "implicit binding" because the value of this is determined implicitly (automatically) based on the context in which the function is called.
Here is an example of implicit binding:
const obj = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
obj.sayHello(); // Output: "Hello, my name is John"In the example above, the sayHello function is called as a method on obj, so the value of this within the function is set to obj. When the function is executed, it outputs "Hello, my name is John" because this.name is equivalent to obj.name, which is "John".
Explicit Binding
In JavaScript, explicit binding refers to the process of setting the value of the this keyword explicitly (manually) using the bind, call, or apply methods.
The bind method creates a new function with the same body and parameters as the original function, but the value of this is permanently set to the first argument passed to bind.
Here is an example of using the bind method to create a new function with an explicit value for this:
const obj = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
const greeting = obj.sayHello.bind(obj);
greeting(); // Output: "Hello, my name is John"The call and apply methods work similarly to bind, but they immediately call the function with the specified value of this, rather than returning a new function.
Here is an example of using the call method to call a function with an explicit value for this:
const obj = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
obj.sayHello.call(obj); // Output: "Hello, my name is John"The apply method is the same as call but with a small difference. While the call method accepts the arguments as comma-separated-values, the applycomma-separated-values method accepts them as an array.
Global Binding
In JavaScript, the value of the this keyword is determined by the context in which a function is called. In the global execution context (i.e., outside of any function), the value of this is set to the global object.
In the browser, the global object is the window object, so the value of this in the global execution context is the window object.
Here is an example of how the value of this is set to the global object in the global execution context:
console.log(this); // Output: Window {...}
function sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
sayHello(); // Output: "Hello, my name is undefined"In the example above, this is set to the global object (the window object) in the global execution context. When the sayHello function is called, the value of this within the function is also set to the global object, because the function is called as a standalone function (not as a method on an object).
Note that in strict mode (when the "use strict" directive is used at the top of a script or function), the value ofthisin the global execution context isundefinedrather than the global object.
No Binding: The Arrow function and the this keyword
In JavaScript, arrow functions (also known as "fat arrow functions") are a concise way to write function expressions. Unlike regular functions, arrow functions do not have their own this value. Instead, they inherit the this value of the surrounding context.
Here is an example of an arrow function that uses the this keyword:
const obj = {
name: 'John',
sayHello: () => {
console.log(`Hello, my name is ${this.name}`);
}
};
obj.sayHello(); // Output: "Hello, my name is undefined"In the example above, the sayHello function is an arrow function that uses the this keyword to access the name property of the obj object. However, when the function is called, it outputs "Hello, my name is undefined" because the value of this within the function is not set to obj as expected.
This is because arrow functions do not have their own this value; they inherit the this value of the surrounding context. In this case, the this value within the arrow function is the global object (in the browser, the window object), because the arrow function is not called as a method on an object.
If you want to use the this keyword within an arrow function and have it refer to the object the function is defined on, you can use an arrow function inside a regular function, or use the bind method to set the value of this explicitly.
Here is an example of using an arrow function inside a regular function to access the this value of the surrounding context:
const obj = {
name: 'John',
sayHello: function() {
const sayName = () => {
console.log(`Hello, my name is ${this.name}`);
};
sayName(); // Output: "Hello, my name is John"
}
};
obj.sayHello();In the example above, the sayName arrow function is defined inside the sayHello function, so it has access to the this value of the sayHello function, which is obj. When the sayName function is called, it outputs "Hello, my name is John" because the value of this.name is obj.name, which is "John".
Further Reading
- Understand the ‘this’ keyword from MDN.
- The ‘this’ keyword and the object methods.
