js---call,apply,bind

原创已于 2024-01-02 17:04:54 修改 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-21 10:28:02 首次发布

本文详细介绍了JavaScript中bind方法的作用，包括如何绑定this值以确保函数调用时的正确上下文，以及如何利用bind预设函数参数，简化调用过程。通过示例展示了bind在实际编程中的应用，帮助理解其核心功能。

https://www.cnblogs.com/lianglanlan/p/14435987.html

https://blog.youkuaiyun.com/Wustfish/article/details/131062872

bind的作用

1. 绑定this值

在 JavaScript 中，函数的 this 值是在运行时确定的，它取决于函数的调用方式。如果不使用 bind 绑定 this 值，那么在函数被调用时，this 值可能会指向意外的对象或者 undefined。而使用 bind 可以在函数定义时就预先绑定好 this 值，确保函数被调用时 this 值始终指向正确的对象。

const obj = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`)
  }
}

// 调用 obj.sayHello()，输出：Hello, my name is Alice.
obj.sayHello();

// 将 obj.sayHello() 绑定到全局对象上
const globalSayHello = obj.sayHello;
globalSayHello(); // 输出：Hello, my name is undefined.

// 使用 bind 将 obj.sayHello() 绑定回 obj 上
const boundSayHello = obj.sayHello.bind(obj);
boundSayHello(); // 输出：Hello, my name is Alice.

在这个例子中，obj.sayHello() 方法定义在 obj 对象上，它的 this 值会指向 obj。但是当将其赋值给一个全局变量并调用时，它的 this 值会指向全局对象，导致输出结果不正确。使用 bind 可以将其重新绑定回 obj 上。

2. 绑定参数

除了绑定 this 值外，bind 还可以绑定函数的参数。这样可以在调用函数时，预先传入一些参数，使得函数的调用更加方便和简洁。

function add(a, b,c) {
  return a + b + c;
}

// 使用 bind 预先绑定 a=1，b=2，这样调用函数时只需要传入一个参数 c
const add3 = add.bind(null, 1, 2);
console.log(add3(3)); // 输出：6

在这个例子中，我们使用 bind 将 add 函数的 this 值绑定为 null，同时预先绑定了 a=1 和 b=2。这样，在调用 add3(3) 时，实际上相当于调用了 add(1, 2, 3)，输出结果为 6。