ECMA262 Edition5. Function.prototype.bind

ECMA262 Edition5

ECMA262 Edition5. Function.prototype.bind

ECMA262 Edition5. 严格模式(Strict Mode)

ECMA262 Edition5 Object,Object的属性和方法,Object.prototype的方法.

ECMA262 Edition5. 属性描述符和属性标识符(Property Descriptor,Property Identifier)

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,设置为globa l(同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 的部分.