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

OEC小胖胖

于 2024-09-05 08:47:24 发布

阅读量922

点赞数 24

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 web

本文链接：https://blog.csdn.net/2301_79858914/article/details/141911311

版权

JavaScript 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

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