用你的理解，手写出一个 JavaScript bind 方法，助力你成为前端界的文豪

2023-12-02 07:49:50

每年一度的春招季如期而至，前端江湖又将迎来一场场激烈的 "手写代码" 角逐。在众多的面试考察点中，JavaScript 的 bind 函数可谓是经久不衰的宠儿。

bind 函数的意义

bind 函数是 JavaScript 中一个非常有用的方法，它允许我们为一个函数创建一个新的函数，这个新函数拥有不同的 this 值和传递给它的参数。这在许多场景中都非常有用，例如：

改变函数的 this 值
创建偏函数（部分应用函数）
实现事件监听器

手写 bind 函数

现在，让我们从头开始一步步手写一个 bind 函数。

Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...args2) {
    fn.apply(context, args.concat(args2));
  };
};

函数详解

this ：指向调用 bind 函数的函数。
context ：要为新函数设置的 this 值。
...args ：传递给 bind 函数的参数。

新函数的行为

新创建的函数与原始函数的行为类似，但具有以下不同点：

this ：指向 context 参数。
参数：将 bind 函数的参数和新函数的参数连接起来传递给原始函数。

实际应用

让我们通过一个示例来看看如何使用我们的手写 bind 函数：

const person = {
  name: '张三',
  greet: function() {
    console.log(`我是 ${this.name}`);
  }
};

const greetFn = person.greet.myBind(person);
greetFn(); // 输出: 我是张三