bind函数源码解析

bind函数

ES5中原生bind函数是用于绑定this指向的

   var obj = {      x: 1   }   function show(){       console.log(this.x);   }   var newShow = show.bind(obj);   newShow();    // 1

bind方法会创建一个新函数。当这个新函数被调用时，bind的第一个参数将作为它运行时的this，之后的一序列参数将会在传递的实参前传入作为它的参数。
bind返回的绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数

初级实现

我们来实现一个初级的bind函数Polyfill:

   Function.prototype.bind = function(context){      //that为调用bind函数的对象      var that = this;      //bind函数可能入其他参数，先将参数类数组转化为数组      var argsArray = Array.prototype.slice.call(arguments);      return function(){          // slice只传一个参数，返回从参数开始到数组末尾的元素          // slice(1)之后为其他参数          return that.call(context, argsArray.slice(1))      }   }

译者注：如果对这个函数有所不理解，我们可以先看一下不改变this的改造

   function a(){ console.log(1) };   Function.prototype.bind = function(){      return this;   }   var b = a.bind();   b();   // 1

进行嗅探增加程序健壮性

其实是一个典型的“Monkey patching(猴子补丁)”，即“给内置对象扩展方法”。所以，如果能进行一下“嗅探”，进行兼容处理，就是锦上添花了。

   Function.prototype.bind = Function.prototype.bind || function(context){      //...   }

柯里化（curring）实现

我们返回的参数列表里包含：atgsArray.slice(1)，他的问题在于存在函数的参数丢失的现象。

   Function.prototype.bind = Function.prototype.bind || function (context) {       var that = this;       //通过bind预先传入的参数       var args = Array.prototype.slice.call(arguments, 1);       return function () {           //函数调用时传入的参数            var innerArgs = Array.prototype.slice.call(arguments);            var finalArgs = args.concat(innerArgs);            return that.apply(context, finalArgs);        }   }

但是，我们注意在上边bind方法介绍的第三条提到：bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们的绑定this就需要“被忽略”

构造函数场景下的兼容

直接上代码

    Function.prototype.bind = Function.prototype.bind || function (context) {        var that = this;        var args = Array.prototype.slice.call(arguments, 1);        var F = function () {};        F.prototype = this.prototype;        var bound = function () {            var innerArgs = Array.prototype.slice.call(arguments);            var finalArgs = args.concat(innerArgs);            return that.apply(this instanceof F ? this : context || this, finalArgs);        }        //把新函数的原型清空        bound.prototype = new F();        return bound;    }

更严谨的做法

我们需要调用bind方法的一定要是一个函数，所以可以在函数体内做一个判断：

    if (typeof this !== "function") {      //使用类型错误      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");    }

一切还没完

es5-shim源码如下所示

   bind: function bind(that) {        var target = this;        if (!isCallable(target)) {            throw new TypeError('Function.prototype.bind called on incompatible ' + target);        }        var args = array_slice.call(arguments, 1);        var bound;        var binder = function () {            if (this instanceof bound) {                var result = target.apply(                    this,                    array_concat.call(args, array_slice.call(arguments))                );                if ($Object(result) === result) {                    return result;                }                return this;            } else {                return target.apply(                    that,                    array_concat.call(args, array_slice.call(arguments))                );            }        };        var boundLength = max(0, target.length - args.length);        var boundArgs = [];        for (var i = 0; i < boundLength; i++) {            array_push.call(boundArgs, '$' + i);        }        bound = Function('binder', 'return function (' + boundArgs.join(',') + '){ return binder.apply(this, arguments); }')(binder);        if (target.prototype) {            Empty.prototype = target.prototype;            bound.prototype = new Empty();            Empty.prototype = null;        }        return bound;    }