Explain the different ways the `this` keyword can be bound
TL;DR
The this
keyword in JavaScript can be bound in several ways:
- Default binding: In non-strict mode,
this
refers to the global object (window in browsers). In strict mode,this
isundefined
. - Implicit binding: When a function is called as a method of an object,
this
refers to the object. - Explicit binding: Using
call
,apply
, orbind
methods to explicitly setthis
. - New binding: When a function is used as a constructor with the
new
keyword,this
refers to the newly created object. - Arrow functions: Arrow functions do not have their own
this
and inheritthis
from the surrounding lexical context.
Default binding
In non-strict mode, if a function is called without any context, this
refers to the global object (window in browsers). In strict mode, this
is undefined
.
function showThis() {
console.log(this);
}
showThis(); // In non-strict mode: window, in strict mode: undefined
Implicit binding
When a function is called as a method of an object, this
refers to the object.
const obj = {
name: 'Alice',
greet: function () {
console.log(this.name);
},
};
obj.greet(); // 'Alice'
Explicit binding
Using call
, apply
, or bind
methods, you can explicitly set this
.
Using call
function greet() {
console.log(this.name);
}
const person = { name: 'Bob' };
greet.call(person); // 'Bob'
Using apply
function greet(greeting) {
console.log(greeting + ', ' + this.name);
}
const person = { name: 'Charlie' };
greet.apply(person, ['Hello']); // 'Hello, Charlie'
Using bind
function greet() {
console.log(this.name);
}
const person = { name: 'Dave' };
const boundGreet = greet.bind(person);
boundGreet(); // 'Dave'
New binding
When a function is used as a constructor with the new
keyword, this
refers to the newly created object.
function Person(name) {
this.name = name;
}
const person = new Person('Eve');
console.log(person.name); // 'Eve'
Arrow functions
Arrow functions do not have their own this
and inherit this
from the surrounding lexical context.
const obj = {
name: 'Frank',
greet: () => {
console.log(this.name);
},
};
obj.greet(); // undefined, because `this` is inherited from the global scope