一、Function.prototype.bind的作用

其实它就是用来静态绑定函数执行上下文的this属性，并且不随函数的调用方式而变化。示例：

test('Function.prototype.bind', function(){ function orig(){ return this.x; }; var bound = orig.bind({x: 'bind'}); equal(bound(), 'bind', 'invoke directly'); equal(bound.call({x: 'call'}), 'bind', 'invoke by call'); equal(bound.apply({x: 'apply'}), 'bind', 'invoke by apply'); });

二、浏览器支持

Function.prototype.bind是ES5的API，所以坑爹的IE6/7/8均不支持，所以才有了自己实现的需求。

三、实现：

第一阶段

只要在百度搜Function.prototype.bind的实现，一般都能搜到这段代码。

Function.prototype.bind = Function.prototype.bind   || function(){ var fn = this, presetArgs = [].slice.call(arguments); var context = presetArgs.shift(); return function(){ return fn.apply(context, presetArgs.concat([].slice.call(arguments))); }; };

它能恰好的实现Function.prototype.bind的功能定义，但通过看es5-shim源码就会发现这种方式忽略了一些细节。

第二阶段

被忽略的细节1：函数的length属性，用于表示函数的形参。而第一阶段的实现方式，调用bind所返回的函数的length属性只能为0，而实际上应该为fn.length-presetArgs.length才对啊。所以es5-shim里面就通过bound.length=Math.max(fn.length-presetArgs.length, 0)的方式重设length属性。

被忽略的细节2：函数的length属性值是不可重写的，使用现代浏览器执行下面的代码验证吧！
```
test('function.length is not writable', function(){ function doStuff(){} ok(!Object.getOwnPropertyDescriptor(doStuff, 'length').writable, 'function.length is not writable'); });
```
因此es5-shim中的实现方式是无效的。既然不能修改length的属性值，那么在初始化时赋值总可以吧，也就是定义函数的形参个数！于是我们可通过eval和new Function的方式动态定义函数来。

被忽略的细节3：eval和new Function中代码的执行上下文的区别。简单来说在函数体中调用eval，其代码的执行上下文会指向当前函数的执行上下文；而new Function或Function中代码的执行上下文将一直指向全局的执行上下文。举个栗子：

var x = 'global';   void function(){ var x = 'local'; eval('console.log(x);'); // 输出local (new Function('console.log(x);'))(); // 输出global }();

因此这里我们要是用eval来动态定义函数了。具体实现：

Function.prototype.bind = Function.prototype.bind   || function(){ var fn = this, presetArgs = [].slice.call(arguments); var context = presetArgs.shift(); var strOfThis = fn.toString(); // 函数反序列化，用于获取this的形参 var fpsOfThis = /^function[^()]*\((.*?)\)/i.exec(strOfThis)[1].trim().split(',');// 获取this的形参 var lengthOfBound = Math.max(fn.length - presetArgs.length, 0); var boundArgs = lengthOfBound && fpsOfThis.slice(presetArgs.length) || [];// 生成bound的形参 eval('function bound(' + boundArgs.join(',') + '){' + 'return fn.apply(context, presetArgs.concat([].slice.call(arguments)));' + '}'); return bound; };

现在成功设置了函数的length属性了。不过还有些遗漏。

第三阶段

被忽视的细节4：通过Function.prototype.bind生成的构造函数。我在日常工作中没这样用过，不过这种情况确实需要考虑，下面我们先了解原生的Function.prototype.bind生成的构造函数的行为吧！请用现代化浏览器执行下面的代码：

test('ctor produced by native Function.prototype.bind', function(){

var Ctor = function(x, y){

this.x = x;

this.y = y;

};

var scope = {x: 'scopeX', y: 'scopeY'};

var Bound = Ctor.bind(scope);

var ins = new Bound('insX', 'insY');

ok(ins.x === 'insX' && ins.y === 'insY' && scope.x === 'scopeX' && scope.y === 'scopeY', 'no presetArgs');

Bound = Ctor.bind(scope, 'presetX');

ins = new Bound('insY', 'insOther');

ok(ins.x === 'presetX' && ins.y === 'insY' && scope.x === 'scopeX' && scope.y === 'scopeY', 'with presetArgs');

});

行为如下：

this属性不会被绑定

预设实参有效

下面是具体实现

Function.prototype.bind = Function.prototype.bind   || function(){ var fn = this, presetArgs = [].slice.call(arguments); var context = presetArgs.shift(); var strOfThis = fn.toString(); // 函数反序列化，用于获取this的形参 var fpsOfThis = /^function[^()]*\((.*?)\)/i.exec(strOfThis)[1].trim().split(',');// 获取this的形参 var lengthOfBound = Math.max(fn.length - presetArgs.length, 0); var boundArgs = lengthOfBound && fpsOfThis.slice(presetArgs.length) || [];// 生成bound的形参 eval('function bound(' + boundArgs.join(',') + '){' + 'if (this instanceof bound){' + 'var self = new fn();' + 'fn.apply(self, presetArgs.concat([].slice.call(arguments)));' + 'return self;' + '}' + 'return fn.apply(context, presetArgs.concat([].slice.call(arguments)));' + '}'); return bound; };

现在连构造函数作为使用方式都考虑到了，应该算是功德圆满了吧！NO，上面的实现只是基础的实现而已，并且隐藏一些bugs！潜伏的bugs列表：