理解 JavaScript 中的 Function.prototype.bind

Posted 2020-09-07 安慕希

函数绑定(Function binding)很有可能是你在开始使用javascript时最少关注的一点，但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候，你真正需要的其实就是 Function.prototype.bind()，只是你有可能仍然没有意识到这点。

第一次遇到这个问题的时候，你可能倾向于将this设置到一个变量上，这样你可以在改变了上下文之后继续引用到它。很多人选择使用 self, _this 或者 context 作为变量名称(也有人使用 that)。这些方式都是有用的，当然也没有什么问题。但是其实有更好、更专用的方式。

我们真正需要解决的问题是什么？

在下面的例子代码中，我们可以名正言顺地将上下文缓存到一个变量中：

 1 var myObj = {
 2  
 3     specialFunction: function () {
 4  
 5     },
 6  
 7     anotherSpecialFunction: function () {
 8  
 9     },
10  
11     getAsyncData: function (cb) {
12         cb();
13     },
14  
15     render: function () {
16         var that = this;
17         this.getAsyncData(function () {
18             that.specialFunction();
19             that.anotherSpecialFunction();
20         });
21     }
22 };
23  
24 myObj.render();

如果我们简单地使用 this.specialFunction() 来调用方法的话，会发现程序有错误。

我们需要为回调函数的执行保持对 myObj 对象上下文的引用。 调用 that.specialFunction()让我们能够维持作用域上下文并且正确执行我们的函数。

然而使用 Function.prototype.bind() 可以有更加简洁干净的方式：

 1 render: function () {
 2  
 3     this.getAsyncData(function () {
 4  
 5         this.specialFunction();
 6  
 7         this.anotherSpecialFunction();
 8  
 9     }.bind(this));
10  
11 }

我们刚才做了什么？

.bind()创建了一个函数，当这个函数在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。

因此，我们传入想要的上下文，this(其实就是 myObj)，到.bind()函数中。

然后，当回调函数被执行的时候， this 便指向 myObj 对象。

浏览器支持

Browser	Version support
Chrome	7
Firefox (Gecko)	4.0 (2)
Internet Explorer	9
Opera	11.60
Safari	5.1.4

正如你看到的，很不幸，Function.prototype.bind 在IE8及以下的版本中不被支持，所以如果你没有一个备用方案的话，可能在运行时会出现问题。

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }
 
    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };
 
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
 
    return fBound;
  };
}