JS前端面试题详解之手写bind

各位好，我是前端西瓜哥，本期我们将利用 JavaScript 原生实现 bind 函数。

bind 方法的使用场景

在动手编码前，首先梳理 Function.prototype.bind 的标准用法。

function.bind(thisArg[, arg1[, arg2[, ...]]])

bind 属于函数对象的方法，旨在生成一个 this 指向固定的新函数。

其接收参数结构如下。

• 首个参数 thisArg：指定新的 this 绑定对象，一旦设定即不可变更。
• arg1, arg2, ...：后续参数为可选预置参数，将在调用返回的新函数时，作为前置参数传入。

this 指向机制解析

开发过程中常遇到 JS 中 this 指向丢失的现象。

此处通过一个具体案例进行说明。

const person = {
  nickname: '前端西瓜哥',
  eatWatermelon() {
    console.log(this.nickname + ' 吃西瓜');
  }
};

person.eatWatermelon();

上述代码中，调用 person.eatWatermelon 时，this 指向 person 对象，控制台输出结果为：前端西瓜哥 吃西瓜。

接着执行以下代码片段。

const eatWatermelon = person.eatWatermelon;
eatWatermelon();

此时输出结果令人困惑，显示为：undefined 吃西瓜。

原因在于 this 指向了 eatWatermelon() 执行上下文中的 this，在浏览器 script 顶层作用域中，该值为全局对象 window（严格模式下则为 undefined）。

因此，eatWatermelon() 执行期间访问 this.nickname 等同于访问 window.nickname，因未定义该属性，故返回 undefined。

若需避免 this 丢失，应如何处理？

此时引入 bind 方法，它能永久锁定 this 指向且不可再次修改。

const eatWatermelon = person.eatWatermelon.bind(person);
eatWatermelon();

如此操作后，eatWatermelon 函数的 this 将始终指向 person，从而输出预期的：前端西瓜哥 吃西瓜。

综上所述，函数的 this 指向由执行环境决定：

• 若函数由 bind 生成，其 this 永久绑定至调用 bind 时传入的 thisArg；
• 若函数作为对象方法调用，this 指向该对象；
• 若函数独立调用且无对象前缀，this 指向当前所在作用域（函数作用域或全局作用域）。

另一种控制 this 指向的方式是使用箭头函数，尤其适用于函数内部调用其他函数的场景，因篇幅限制此处暂不展开。

参数预置技巧

除固定 this 指向外，bind 较少被提及的用途：预设函数参数。

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

const addSix = add.bind(null, 6);
const addSixThenAddFour = addSix.bind(null, 4);
addSixThenAddFour(5)
// 15

addSixThenAddFour(7)
// 17

bind 方法的具体实现

接下来进入核心实现环节。

Function.prototype.myBind = function(thisArg, ...prefixArgs) {
  const fn = this;
  return function(...args) {
    return fn.call(thisArg, ...prefixArgs, ...args);
  }
}

核心思路依赖于闭包机制。

确保返回的新函数能够访问以下三个私有属性：

• fn（原始函数引用）
• thisArg（需永久绑定的 this 目标）
• prefixArgs（预置参数数组）

当调用该新函数时，执行 fn 函数，通过 call 方法将 this 强制指定为 thisArg，并将预置参数与新函数接收的参数按顺序拼接后传入。

务必返回执行结果，因为新函数封装了原函数，其返回值需与原函数保持一致。

总结

bind 的实现逻辑并不复杂，关键在于熟练掌握其用法。

如同处理业务需求，若需求理解不清，极易引发 bug，

因此需具备闭包知识，掌握私有变量保存及函数封装技巧（注意 return 原函数返回值）。

至此，关于 JS 前端面试题详解之手写 bind 的文章介绍完毕，更多相关 JS 手写 bind 内容请搜索本站历史文章或继续浏览后续文章，希望大家日后多多支持本站！