浅谈用原生 js 实现函数的 bind 方法

Posted 2020-09-30 自然的呼吸

bind的作用是让目标函数执行时候的 this 改为指定的上下文。

一般情况下，this 取决于调用者，谁调用函数 this 就是谁（自执行函数、定时器……之类的特殊情况除外）。

有那么一句话，在 javascript 中，万物皆对象。

 1 var want = function want() {
 2     console.log(this);
 3 }
 4 
 5 var good = function good() {
 6     console.log(\'https://www.cnblogs.com/xwant\')
 7 }
 8 
 9 good.go = want;
10 
11 good.go();
12 
13 // 控制台打印出good这个函数

函数也是一个对象，以对象调用函数的方式执行这个函数，这个函数的指向就变为了这个调用者。

那么现在将这个方式封装成一个方法。

1 Function.prototype._bind = function _bind(context) {
2      if(typeof context === \'function\') return this;
3      context.fuc = this;
4      return function () {
5          context.fuc(...arguments)
6      }
7 };

在这里利用 JavaScript 的这个特性，将这个函数，写到了指定上下文的一个属性下。

由于直接返回 context.fun 的话，返回的其实是 context.fun 代表的这个函数体。

所以在调用这个方法的时候，方法中 this 还是指向的 window ，于是这里套用了一个匿名函数来解决这个问题。

由于不知道要修改 this 的函数是否有形参，所以在执行的时候把匿名函数中的 arguments 拉下来，在函数执行时，将 arguments 以 ES6 的新特性解构赋值的方式传进去，由此，函数的参数问题也解决了（只测试了简单的传参没有深入测试）。

当然，这里只论方法暂且就不说性能方面的问题。

通过 .call 或者 .apply 的方式也可以实现 bind 方法，这里不多讨论。

把上面的代码改巴改巴， .call 和 .apply 也就实现了。