JS中【bind】详解以及与【apply】和【call】的区别

bind 是 JavaScript 中用于函数的方法，它的主要作用是创建一个新的函数，并将该函数内部的 this 值绑定到指定的对象，还可以在新函数中预置一些参数。通过使用 bind，我们可以更灵活地控制函数调用时的上下文环境和参数传递。下面是关于 bind 的全面讲解。

1. bind 的基本语法

functionName.bind(thisArg[, arg1[, arg2[, ...]]])复制

• functionName: 要绑定 this 值的函数。
• thisArg: 绑定给 functionName 的 this 值。
• arg1, arg2, ...: 可选的参数列表，这些参数会在调用新函数时传递给原函数。

2. bind 的核心概念

2.1 this 绑定

bind 方法的主要用途是将函数内部的 this 绑定到指定的对象上。默认情况下，JavaScript 中函数内部的 this 值是根据调用时的上下文确定的。但是，通过 bind，我们可以在函数创建时就锁定 this 的值。

const person = {
  name: 'Alice',
};
 
function greet() {
  console.log(`Hello, my name is ${this.name}`);
}
 
const boundGreet = greet.bind(person);
boundGreet(); // 输出: Hello, my name is Alice复制

在这个例子中，我们将 greet 函数的 this 绑定到 person 对象，因此当 boundGreet 被调用时，它的 this 始终指向 person 对象。

2.2 参数预置

bind 方法不仅可以绑定 this，还可以预置一些参数。预置的参数会在调用新函数时自动传递给原函数。

function add(a, b) {
  return a + b;
}
 
const addFive = add.bind(null, 5);
console.log(addFive(10)); // 输出: 15复制

在这个例子中，我们使用 bind 创建了一个新函数 addFive，它将 add 函数的第一个参数固定为 5，因此调用 addFive(10) 实际上相当于调用 add(5, 10)。

3. bind 的应用场景

3.1 在回调函数中绑定 this

在许多情况下，回调函数中的 this 会失去原有的上下文（比如在事件处理函数中）。bind 方法可以确保回调函数中的 this 保持正确的上下文。

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};
 
const button = document.querySelector('button');
button.addEventListener('click', person.greet.bind(person));复制

在这个例子中，如果不使用 bind，greet 函数中的 this 在事件触发时会指向 button 元素，而不是 person 对象。通过 bind，我们确保了 this 始终指向 person
（补充：当一个事件处理函数绑定到 DOM 元素时，JavaScript 引擎会将这个处理函数与对应的事件关联起来。当事件被触发时，浏览器会调用这个处理函数。在调用时，浏览器会将触发事件的 DOM 元素作为上下文传递给处理函数）。

3.2 函数柯里化

函数柯里化是一种技术，通过 bind，我们可以创建一个部分应用函数，提前传递部分参数。

function multiply(x, y) {
  return x * y;
}
 
const double = multiply.bind(null, 2);
console.log(double(5)); // 输出: 10复制

这里 double 函数是 multiply 函数的柯里化版本，其中第一个参数已经被预置为 2。

4. bind 的实现原理（模拟实现）

理解 bind 的工作原理，我们可以自己模拟实现一个简单的 bind 方法：

Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...newArgs) {
    return fn.apply(context, args.concat(newArgs));
  };
};
 
const person = {
  name: 'Alice',
};
 
function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}
 
const boundGreet = greet.myBind(person, 'Hello');
boundGreet(); // 输出: Hello, my name is Alice复制

4.1 this 的绑定

myBind 方法使用了 apply 方法来确保函数的 this 值是绑定的 context。apply 方法允许我们指定 this 值，并将参数以数组的形式传递。

4.2 参数的传递

myBind 方法通过闭包的方式保存了预置的参数 args，并在实际调用时将新的参数 newArgs 追加到原有参数之后。

5. bind 与其他函数调用方法的对比

5.1 call 和 apply

call 和 apply 方法都可以用来调用函数，并显式地指定 this 的值，但它们与 bind 不同之处在于，它们是立即调用函数，而 bind 返回的是一个新的函数，需要手动调用。

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}
 
const person = { name: 'Alice' };
 
greet.call(person, 'Hello'); // 立即调用，输出: Hello, my name is Alice
greet.apply(person, ['Hi']); // 立即调用，输出: Hi, my name is Alice
 
const boundGreet = greet.bind(person, 'Hey');
boundGreet(); // 需要手动调用，输出: Hey, my name is Alice复制

5.2 bind 的不可逆性

一旦函数的 this 被 bind 绑定了，再次 bind 该函数是不会改变 this 指向的。

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
 
function greet() {
  console.log(`Hello, my name is ${this.name}`);
}
 
const boundGreet = greet.bind(person1);
const reBoundGreet = boundGreet.bind(person2);
reBoundGreet(); // 输出: Hello, my name is Alice复制

在这个例子中，尽管 reBoundGreet 试图将 this 绑定到 person2，但由于 boundGreet 已经绑定了 person1，this 不会再被改变。

6. bind 与箭头函数

箭头函数中的 this 是在定义时确定的，并且是不可改变的，因此箭头函数不适合与 bind 一起使用。

const person = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};
 
const boundGreet = person.greet.bind(person);
boundGreet(); // 输出: Hello, my name is undefined复制

由于箭头函数没有自己的 this，而是继承自定义时的上下文环境，所以 bind 对箭头函数不起作用。

7. 注意事项与性能

• 性能问题: 使用 bind 会创建一个新的函数，因此在性能敏感的场景中需要谨慎使用，尤其是在高频率调用时。
• 兼容性问题: bind 方法在较老版本的 JavaScript 引擎中可能不受支持，不过现代浏览器和环境基本都支持 bind。

8. 总结

bind 方法是 JavaScript 中非常强大且常用的工具，它能够灵活地绑定函数的 this 值，并且可以预置参数来实现函数柯里化。在了解 bind 的工作原理和应用场景后，你可以更好地控制函数的执行上下文和参数传递，使代码更加灵活和可维护。