Enjoy 20% off all plans by following us on social media. Check out other promotions!
测验题

Explain the different ways the `this` keyword can be bound

Topics
JAVASCRIPT
在GitHub上编辑

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 is undefined.
  • Implicit binding: When a function is called as a method of an object, this refers to the object.
  • Explicit binding: Using call, apply, or bind methods to explicitly set this.
  • 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 inherit this 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

Further reading

在GitHub上编辑