深度解析bind方法连续调用对this的影响，一文彻底讲明白

2023-09-29 17:24:12

bind方法是JavaScript中一个非常有用的函数，它允许您将函数绑定到一个特定的this值。这在许多情况下都非常有用，例如：

当您希望在一个对象的方法中调用另一个对象的方法时。
当您希望创建一个新的函数，该函数具有与另一个函数相同的this值时。
当您希望防止函数中的this值被意外更改时。

bind方法的语法如下：

Function.prototype.bind(thisArg, ...args)

thisArg：要绑定到函数的this值。
...args：要传递给函数的参数。

bind方法返回一个新的函数，该函数具有与原始函数相同的行为，但其this值被绑定到了thisArg。

例如，以下代码创建一个新的函数greet，该函数的this值被绑定到了对象person：

const person = {
  name: 'John Doe'
};

const greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

const boundGreet = greet.bind(person);

boundGreet(); // Hello, my name is John Doe!

现在，当我们调用boundGreet函数时，this将指向对象person。这使得我们可以使用person对象中的属性和方法，就好像它们是boundGreet函数的一部分一样。

bind方法还可以用于创建新的函数，该函数具有与另一个函数相同的this值。例如，以下代码创建一个新的函数setTimeoutWithThis，该函数具有与setTimeout函数相同的this值：

const setTimeoutWithThis = setTimeout.bind(window);

setTimeoutWithThis(() => {
  console.log(this); // Window object
}, 1000);

现在，当我们调用setTimeoutWithThis函数时，this将指向window对象。这使得我们可以使用window对象中的属性和方法，就好像它们是setTimeoutWithThis函数的一部分一样。

bind方法还可以用于防止函数中的this值被意外更改。例如，以下代码创建一个新的函数handleClick，该函数的this值被绑定到了元素button：

const button = document.querySelector('button');

const handleClick = function() {
  console.log(this); // Element button
}.bind(button);

button.addEventListener('click', handleClick);

现在，当我们点击按钮时，this将指向元素button。这使得我们可以使用元素button中的属性和方法，就好像它们是handleClick函数的一部分一样。

当bind方法连续调用两次时，this将指向什么？

当bind方法连续调用两次时，this将指向第一次bind方法调用的this值。例如，以下代码创建一个新的函数greet，该函数的this值被绑定到了对象person：

const person = {
  name: 'John Doe'
};

const greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

const boundGreet = greet.bind(person);

const boundBoundGreet = boundGreet.bind(window);

boundBoundGreet(); // Hello, my name is John Doe!