ECMA262 Edition5. Function.prototype.bind
ES5新增 API .
15.3.4.5.Function.prototype.bind (实现:IE9+,Chrome?懒得去确定版本了,Firefox4+,可惜Safari5没有实现此接口.不过这个完全不是问题.)
(产生一个特殊的函数对象，并以第一个参数作为this值去调用被bind的函数,同时把bind时的参数列表与,bind产生的函数对象被调用时的参数列表连接.作为新的参数列表.)
bind方法,以一个或多个参数, thisArg以及(可选的)arg1,arg2等等..根据下面的步骤,返回一个新的 函数对象:
1. 令Target 为 this的值.
2. 如果 isCallable(Target)是false, 抛出一个 TypeError异常.
3. 令 A为(也许是空的) 按顺序,包含所有实参(thisArg除外)的List内部对象.
4. 令 F为一个新的原生ECMAScript对象.(注1)
5. 把8.12章节中定义的那些个内部方法中,除[[Get]]以外，通通给F添加上.(注2)
6. 给F添加一个 15.3.5.4中定义的内部方法[[Get]].(注3)
7. 把F的内部属性[[TargetFunction]](注4),设置为Target.
8. 把F的内部属性[[BoundThis]](注5),设置成thisArg的值.
9. 把F的内部属性[[BoundArgs]](注6)设置成 A.
10. 把F的内部属性[[Class]]设置成 'Function'.
11. 把F的内部属性[[Prototype]] 设置成内置对象 Function.prototype.(参见15.3.3.1)
12. 把F的内部属性[[Call]]设置为 15.3.4.5.1中描述的那个样子(注7)
13. 把F的内部属性[[Construct]]设置为 15.3.4.5.2中描述的那个样子
14. 把F的内部属性[[HasInstance]]设置为 15.3.4.5.3描述的那样子
15. 如果 Target的内部属性[[Class]],是'Function',则
a. 令L为 Target.length 减去 A.length的计算结果.
b. 把F.的自身独占属性 length ,设置为 0和L中更大的那个.
16. 否则 把F的自身独占属性 length,设置为0.
17. 把F的自身独占属性 length的特性集,设置成 15.3.5.1定义的那样.({writable:false,enumerable:false,configurable:false})
18. 把F的内部属性[[Extensible]]设置为true.
19. 令thrower 为 内部函数对象[[ThrowTypeError]](参见13.2.3)
20. 以'caller', 属性描述符{[[Get]]:thrower,[[Set]]:thrower,[[Enumerable]]:false,[[Configurable]]:false}, false 为参数,调用F的内部方法[[DefineOwnProperty]].
21. 以'arguments', 属性描述符{[[Get]]:thrower,[[Set]]:thrower,[[Enumerable]]:false,[[Configurable]]:false}, false 为参数,调用F的内部方法[[DefineOwnProperty]].
22. 返回F.
bind方法的形参个数是1个,所以bind.length是1.
注意: 由Function.prototype.bind,创建的函数对象.不具备 prototype属性(注8),以及[[Code]],[[FormalParameters]].[[Scope]] 内部属性.
15.3.4.5.1.[[Call]] - 见注释3.
15.3.4.5.2 [[Construct]]()
当(P128)
注1: 原生/本地(native)对象指:
由 ECMAScript 提供实现,并独立于宿主环境的任何对象。标准原生对象由ECMAScript标准定义.有些原生对象也是内置对象(内置对象指,在 ECMAScript 程序刚开始执行时就出现的原生对象.如Global、Math String Number Function Object Array 等等...),某些原生对象是在某个ECMAScript程序执行过程中构造出来的.
好吧,这些是官方概念. 这里其实他是指创建一个干净的原生对象.用于为他进行装饰.以实现，某种不可告人的目的.
注2: 指每一个ECMAScript原生对象所需要具备的内部方法:
[[GetOwnProperty]], [[GetProperty]], [[Get]], [[CanPut]],[[Put]], [[HasProperty]], [[Delete]], [[DefaultValue]], [[DefineOwnProperty]]. 这些8.10中所定义的内部方法中.除了[[Get]].都要添加给指定的那个原生对象F.
注3: 函数对象所使用的[[Get]](P)方法: (这个方法主要就是为了处理严格模式下,调用函数对象的caller属性时,抛出异常的.其他同默认的[[Get]].)
函数对象所用的[[Get]]方法,和其他ECMAScript原生对象,所用的(8.12.3那个版本)的,有所区别.
假设F是一个函数对象,那么当以属性名P为参数,调用F的内部方法[[Get]]时,就按下面的步骤进行操作:
1. 令v为 以 P为属性名参数,在F上调用默认的,8.12.3所定义的内部方法[[Get]]的执行结果.
2. 如果 P 的值是'caller', 并且 v是一个严格模式的函数对象,则抛出一个 TypeError异常(即严格模式下,不允许调用function对象的caller属性了).
3. 返回 v.
注4: [[TargetFunction]],此内部属性,是个专有属性,只有通过Function.prototype.bind,所创建的那个函数对象,才会具备这个内部属性.
好吧,其实这玩意就是,在具备这个属性的那个函数对象调用[[Call]]时,真正去执行的那个函数...这东西所以被设计出来,就是为了避免一个函数去包裹另一个函数实现.bind的功能.
注5: [[BoundThis]],此内部属性也是个专有属性,只有通过Function.prototype.bind,所创建的那个函数对象,才会具备这个内部属性.
这玩意,也是在具备这个属性的那个函数对象调用[[Call]]时,会把这个东西作为调用[[TargetFunction]].[[Call]]时,的this值.
this值为undefined,或null的时候.就要参考 10.4.3章节.关于进入function code阶段. 如果是严格模式,就保持不变(这并不意味着,一定要抛出一个异常,但是chrome,Firefox都抛出了异常,这是我无法理解的.除非你在函数内部调用了 this.xxx.这样抛出异常才合理.又或者ES5有严格要求,说bind方法thisArg在严格模式是不能为null或undefined.但是显然,ES5,并没有交代这个问题.但我个人认为抛出异常是合理的,用于提醒我们,this不指定,调用bind,还有什么意义?).如果非严格模式,就把this,设置为global(同es3一样).其他原始类型,则做ToObject操作.
注6: [[BoundArgs]](这货，可能应该叫[[BoundArguments]]. 老道在前面起了名字，然后在用的时候把名字记错了.)这个也是个专有属性.只有通过Function.prototype.bind,所创建的那个函数对象,才会具备这个内部属性.
这玩意也是在具备此属性的对象在调用其内部方法[[Call]]的时候,会把这个作为调用其[[TargetFunction]]时候参数列表.传进去.
注7: [[Call]](15.3.4.5.1), 当某个函数对象 F(这个对象，一定是由Function.prototype.bind所产生的)的内部方法[[Call]]，以一个this值和一个参数列表 ExtraArgs作为参数,被调用时,就:
1. 令 boundArgs为 F的内部属性[[BoundArgs]].
2. 令 boundThis 为 F的内部属性[[BoundThis]].
3. 令 target 为 F的内部属性[[TargetFunction]]
4. 令 args 为一个,包含boundArgs列表对象的参数列表，以及紧随其后的ExtraArgs列表对象,并遵守其原始顺序和参数的,新的列表对象.
(连接bind调用时的参数列表和,bind产生的函数对象,被调用时的参数列表.)
5. 以 boundThis 作为this的值, args作为参数列表,去调用 target的内部方法[[Call]].
ps: 这就是bind,真正的实现目的和原理了.全靠这个特殊的call啊.
注8: Chrome15,才开始遵守此标准. Chrome14之前的版本.则仍然存在prototype属性. 其他如IE9,Firefox4+ 都ok.
模拟实现的思考.
demo :
| //'use strict'; if(!Function.prototype.bind){ // 模拟实现, 其中因函数的length属性为只读.所以此处不给力. Function.prototype.bind = function (boundThis) { var targetFunction = this, boundArgs = [].slice.call(arguments, 1), //A = [].slice.call(arguments, 1), //L = targetFunction.length, F = function () { targetFunction.apply(boundThis, boundArgs.concat([].slice.call(arguments))); }; //F.length = Math.max(L - A.length, 0); F.prototype = undefined; //此处有风险. 在于 一个普通的函数对象,如果没有prototype.则 ,其作为instanceof 运算符的右运算元时,会因为检查不到prototype属性而被抛出异常 return F; }; } var obj = { name:'franky' }, fn = function(a, b, c, d, e){ alert([this.name, a, b, c, d, e]); }.bind(obj, 1, 2, 3) fn(4,5); // franky,1,2,3,4,5 F.prototype = undefined; 此处有风险. 在于 一个普通的函数对象,如果没有prototype.则 ,其作为instanceof 运算符的右运算元时,会因为检查不到prototype属性而被抛出异常. 而 原生bind之所以没有这个问题是因为 ,原生bind所产生的函数对象.的内部方法[[Construct]].实质上会去调用该函数对象的[[TargetFunction]].作为真正的构造器使用,同样,instanceof运算符 导致调用 函数对象的内部方法[[HasInstance]],该方法也易于一般函数对象.实际也是去调用[[TargetFunction]]的内部方法[[HasInstance]]. 也就是说. bind产生函数对象的部分方法.都是对 [[TargetFunction]]的对应方法的包裹. |
demo2:
| if(!Function.prototype.bind){ Function.prototype.bind = function (boundThis) {//模拟版本2 .增加 bind产生的函数对象,作为构造器使用的情况. var _slice = [].slice, targetFunction = this, boundArgs = _slice.call(arguments, 1), //A = [].slice.call(arguments, 1), //L = targetFunction.length, F = function () { if(this instanceof F){// F.F = F; 就是悲剧. 无法分辨 new F.F(), 还是 F.F() var obj, ret, temp = function () {}; temp.prototype = targetFunction.prototype; obj = new temp; ret = targetFunction.apply(obj, boundArgs.concat(_slice.call(arguments))); return typeof ret == 'object' && ret !== null ? ret : obj; } return targetFunction.apply(boundThis, boundArgs.concat(_slice.call(arguments))); }; //F.length = Math.max(L - A.length, 0); //F.prototype = undefined; return F; }; } var obj = { name:'franky' }, f = function(a, b, c, d, e){ alert([this.name, a, b, c, d, e]); return 'aaa'; }, fn = f.bind(obj, 1, 2, 3) var obj2 = new fn(); ok 现在所有浏览器在这个 测试用例中,行为是一致的了. 但是显然 ，为了简单的检查是否是作为构造器调用.我们必须舍弃 其prototype = undefined 的部分. |
