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

2024-04-02 19:04:59 151人浏览薄情痞子

摘要

目录bind 的用法this 的指向问题积累参数实现一个 bind结尾大家好，我是前端西瓜哥，今天我们用 js 来实现内置的 bind 方法。 bind 的用法在实现之前，我们先学

bind 的用法

在实现之前，我们先学习一下 Function.prototype.bind 的用法。

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

bind 是函数特有的一个方法，可以创建一个绑定了 this 的新函数。

接受的参数为如下。

第 1 个参数 thisArg：用于修改 this 指向，且 this 一旦修改后将无法再改变。
arg1, arg2, ...：剩余的是可选的参数项，会在 bind 返回的新函数调用时，会作为函数的前几个参数去调用。

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（严格模式下，全局对象 this 会变成 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 指向的写法是使用 箭头函数，尤其适合在函数中调用另一个函数的情况，因为篇幅原因这里不展开讲。

积累参数

bind 除了常用于强绑 this 外，另一个用的比较少的作用：预置函数参数。

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

下面进入正题，实现一个 bind。

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

要点是利用闭包。

让返回的新函数可以访问到三个私有属性：