bind 和 call 的区别

bind 和 call 是用于改变函数执行上下文（this 值）的两种方法，它们在用法和效果上有几个重要的区别：

1. 返回值类型

• bind 方法：返回一个新的函数，不会立即执行原函数。返回的新函数永久地绑定了指定的 this 值，无论它被如何调用。
• call 方法：立即调用原函数，并且可以传递参数列表。返回的是原函数调用的结果（函数执行的返回值）。

2. 执行时机

• bind 方法：不会立即执行原函数，而是返回一个绑定了指定 this 值的新函数。当调用返回的新函数时，它会以绑定的 this 值执行原函数，并且可以传递额外的参数。
• call 方法：立即执行原函数，并且可以设置函数执行时的 this 值。调用 call 方法时，除了第一个参数设置 this 值外，后续参数会直接作为原函数的参数传递。

3. 参数传递

• bind 方法：可以在绑定 this 值的同时，预先传递一部分参数。返回的新函数被调用时，传递的参数会与预先传递的参数合并，按顺序传递给原函数。
• call 方法：第一个参数是设置函数执行时的 this 值。后续参数直接作为原函数的参数列表，传递给原函数。

示例比较

let person = {
  firstName: 'John',
  lastName: 'Doe'
};

function greet(message) {
  console.log(message + ', ' + this.firstName + ' ' + this.lastName);
}

// 使用 call
greet.call(person, 'Hello'); // 输出: Hello, John Doe

// 使用 bind
let boundGreet = greet.bind(person, 'Hi');
boundGreet(); // 输出: Hi, John Doe

在上面的示例中：

• greet.call(person, 'Hello') 立即调用了 greet 函数，并将 person 对象作为 this 值传递进去，同时传递了 'Hello' 作为函数的参数。
• greet.bind(person, 'Hi') 创建了一个新函数 boundGreet，它永久地将 this 值绑定到 person 对象，并且预先传递了 'Hi' 参数。调用 boundGreet() 时，输出的结果与直接调用 greet 方法相同。

因此，主要区别在于 bind 返回一个新函数并且不立即执行，而 call 立即执行原函数并设置 this 值。