解释 `Function.prototype.bind`

bind()方法创建了一个新的函数，在被调用时，它有this关键字设置为提供的值。 具有在调用新函数时所提供的任何参数之前的特定序列。

资料来源：Function.prototype.bind() - JavaScript | MDN

bind() 对于在要传递给其他函数的类的方法中绑定 this 的值非常有用。 这通常是在 React 类组件方法中做的，而这些方法没有使用箭头函数来定义。

const john = {
  age: 42,
  getAge: function () {
    return this.age;
  },
};

console.log(john.getAge()); // 42

const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined

const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42

const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

在上面的例子中，当getAge方法被调用时没有一个调用对象（如unboundGetAge）， 值为 undefined ，因为getAge() 里的 this 值变成了全局对象。 boundGetAge() 将其this 绑定到john，因此它能够获得john的age。

我们甚至可以在另一个不是john的对象上使用 getAge! boundGetAgeMary 返回 mary 的age 。

练习

在 GreatFrontEnd 尝试实现你自己的 Function.prototype.bind() 方法。

参考资料

• Function.prototype.bind() - JavaScript | MDN