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;
    }

秒客网