通俗易懂！手写实现 bind、call、apply，不再傻傻分不清！

2023-10-25 19:41:49

JavaScript中的bind、call和apply：揭开函数调用之谜

在JavaScript编程中，bind、call和apply是三个强大而有用的函数，它们允许你动态地控制函数的调用行为。本文将深入探讨这三个方法，包括它们的用法、区别和实际应用。

1. 介绍

bind、call和apply都是Function原型链上的方法。这意味着它们可以应用于任何函数，无论它是通过function声明的还是通过箭头函数定义的。

2. bind()

bind()方法 创建一个新的函数，它与原始函数具有相同的代码体，但其this值被固定为bind()调用时传入的第一个参数。其他参数作为新函数的参数传递。

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

const boundGreet = greet.bind({ name: 'Alice' });

boundGreet(); // 输出："Hello, Alice!"

3. call()

call()方法 立即执行一个函数，并将其this值设置为call()调用时传入的第一个参数。与bind()类似，其他参数作为函数的参数传递。

function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

greet.call({ name: 'Bob' }, 'Good morning'); // 输出："Good morning, Bob!"

4. apply()

apply()方法 与call()方法非常相似，但它有一个关键的区别。apply()的第二个参数是一个数组，包含要作为函数参数传递的参数，而call()的第二个参数是一个逗号分隔的参数列表。

function sum(a, b) {
  return a + b;
}

sum.apply(null, [10, 20]); // 输出：30

5. 手动实现

为了更好地理解这些方法，让我们手动实现它们：

bind()：

Function.prototype.myBind = function (context) {
  const fn = this;
  const args = [...arguments].slice(1);
  return function () {
    fn.apply(context, [...args, ...arguments]);
  };
};

call()：

Function.prototype.myCall = function (context) {
  const fn = this;
  const args = [...arguments].slice(1);
  context.fn = fn;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

apply()：

Function.prototype.myApply = function (context, args) {
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};