Common Methods to Change the `this` Binding in JavaScript - 面试题

Common ways to change the this context in JavaScript include the following:

Using the .bind() method

The .bind() method creates a new function where you can pass an object to specify the this context of the original function. The this value of the new function is permanently bound to the first argument provided to .bind().
```
javascript
function greeting() {
  return `Hello, I'm ${this.name}`;
}

const person = { name: 'Alice' };
const boundGreeting = greeting.bind(person);

console.log(boundGreeting()); // Output: "Hello, I'm Alice"
```

Using the .call() and .apply() methods

The .call() and .apply() methods invoke a function with a specific this context, allowing you to directly specify the this value. The difference lies in how arguments are passed: .call() accepts a list of arguments, while .apply() accepts an array of arguments.

javascript
function introduction(name, profession) {
  console.log(`My name is ${name} and I am a ${profession}.`);
}

introduction.call(person, 'Alice', 'Engineer'); // Output: "My name is Alice and I am a Engineer."
introduction.apply(person, ['Alice', 'Engineer']); // Output: "My name is Alice and I am a Engineer."

Arrow Functions

Arrow functions do not create their own this context, so their this value is inherited from the parent scope chain. This is commonly used when writing callback functions or closures.

javascript
function Team(name) {
  this.name = name;
  this.members = [];
}

Team.prototype.addMember = function(name) {
  this.members.push(name);
  setTimeout(() => {
    console.log(`${name} has been added to the ${this.name} team.`);
  }, 1000);
};

const team = new Team('Super Squad');
team.addMember('Hero'); // Output: "Hero has been added to the Super Squad team." after 1 second

Using a local variable to save this in callback functions

Before ES6, since the this value of a function is determined at runtime, a common pattern is to save a reference to the outer this using a variable (typically self or that) within a closure.

javascript
function Team(name) {
  this.name = name;
  this.members = [];
  var that = this;
  this.addMember = function(name) {
    that.members.push(name);
    setTimeout(function() {
      console.log(name + ' has been added to ' + that.name + ' team.');
    }, 1000);
  };
}

var team = new Team('Super Squad');
team.addMember('Hero'); // Output: "Hero has been added to Super Squad team." after 1 second

Using features provided by libraries or frameworks

Some JavaScript libraries and frameworks provide their own methods to bind or define the this context, such as using .bind()-like methods in React component event handling.

Using arrow functions to define methods in classes

In ES6 classes, you can define methods using arrow functions to ensure that the this inside the method is bound to the class instance.

javascript
class Button {
  constructor(label) {
    this.label = label;
  }
  handleClick = () => {
    console.log(`Clicked on: ${this.label}`);
  }
}

const button = new Button('Save');
const btnElement = document.createElement('button');
btnElement.textContent = button.label;
btnElement.addEventListener('click', button.handleClick);
// Clicking the button will correctly print "Clicked on: Save"

These are the main ways to change the this context in JavaScript.