extJs 2.1学习笔记(Function扩展篇)

ExtJs对JavaScript的内建对象进行了扩展，对什么Object、Date、Array、Function、String的扩展，扩展方法想必诸位都烂熟于心了：用prototype的办法。这一篇讲一讲Function扩展的精妙之处，之所以突然研究这个问题，是因为我在研究 Ext.data.Store的源代码时，看到一行代码：

　　this.reader.onMetaChange = this.onMetaChange.createDelegate(this);

　　当初，我在研究Ext.js中的代码时，对于Function的几个扩展想不透、看不明，今日大悟。且见扩展的源代码：

    createDelegate : function(obj, args, appendArgs){
        var method = this;
        return function() {
            var callArgs = args || arguments;
            if(appendArgs === true){
                callArgs = Array.prototype.slice.call(arguments, 0);
                callArgs = callArgs.concat(args);
            }else if(typeof appendArgs == "number"){
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
                var applyArgs = [appendArgs, 0].concat(args); // create method call params
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
            }
            return method.apply(obj || window, callArgs);
        };
    },

　　createDelegate函数的作用是，为指定函数创建一个回调函数，注意是创建一个新的函数返回，它返回的是一个新函数。我以前一直不明白，为什么要这么做，就像上面红色的那行代码，相信大伙与我一样，都在想，为什么不是写成这样：

　　this.reader.onMetaChange=this.onMetaChange;

　　不是应当这样写的吗？如果用过dotnet，那么委托一定是晓得了，javascript中的函数跟c#的委托一样，有很相近的意义，为什么c#中能这样写，JavaScript中不能这样写呢？

　　一切都因为this，this这个东西见风使舵，像上面onMetaChange这函数，实际调用时是在reader中，那么如果 onMetaChange中使用了this关键字，那么，this是指向reader的，而不是指向onMetaChange的定义环境所对应的 this。而事实上，我们往往想把这个this指向函数的定义环境，这也正是回调的最招人喜欢的地方，然而，因为this的问题，回调就不能像上面那样直接赋值。还得做些手脚，得让函数调用时scope为当前定义环境。

　　改变一个函数执行的scope，熟翻JavaScript的兄弟一定晓得要用：call、apply。至此，createDelegate的产生背景、作用都作了个交代。

　　createDelegate(this)，调用时，一般直接传个this就行了，当真是妙啊。事实上，我上面讲的一通道理清楚了，这个函数的代码就没有秘密可言了。关键就是一个this。我现在感叹，你对JavaScript的造诣与你对this的领悟层次成正比。

　　既然讲了createDelegate，其他几个扩展函数一并讲了。

    createCallback : function(/*args...*/){
        // make args available, in function below
        var args = arguments;
        var method = this;
        return function() {
            return method.apply(window, args);
        };
    }

　　也是创建调用者的回调，不过，回调函数的scope为window。相当于createDelegate(window)。没什么讲的。

    defer : function(millis, obj, args, appendArgs){
        var fn = this.createDelegate(obj, args, appendArgs);
        if(millis){
            return setTimeout(fn, millis);
        }
        fn();
        return 0;
    },

　　此函数调用一次就让函数延迟调用一次。对setTimeout的封装罢了。如果没有定义延时参数，那么就马上执行。这个函数也没有技术性可言。

    createSequence : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            var retval = method.apply(this || window, arguments);
            fcn.apply(scope || this || window, arguments);
            return retval;
        };
    },

　　这个函数就有点意思了，刚开始研究ext.js的时候还没有看明白，它的作用是在返回一个函数，此函数先调用“调用函数”，后调用传递进来的函数。这句话可能还没说清，见示例如下：

　　function A(){alert("第一个执行！");return 1;}

　　function B(){alert("第二个执行！");return 2;}

　　function C(){alert("第三个执行！");return 3;}

　　var D=A.createSequence(B).createSequence(C);

　　var result=D();

　　上面代码产生的效果是：

　　第一弹出框显示：第一个执行！

　　第二弹出框显示：第二个执行！

　　第三弹出框显示：第三个执行！

　　result的值为：3。

　　这下子诸位都明白了吧。用过dotnet的知道，委托变量有这种类似的功能。就是累加执行的效果。

    createInterceptor : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            fcn.target = this;
            fcn.method = method;
            if(fcn.apply(scope || this || window, arguments) === false){
                return;
            }
            return method.apply(this || window, arguments);
        };
    }

　　这个函数也有点意思，有创意，它返回被调用函数的回调，这个回调是条件执行的，执行条件是createInterceptor传入的那个函数返回真。示例代码如下：

　　function A(){}

　　var B=A.createInterceptor(function(i){return i>0;});

　　B(1)，则A被执行，如果调用B(-1)，A则不被执行。B的作用就是如果传入的第一个参数的值大于0时A才被执行，否则不执行。

　　相当于原有函数的功能不变，只是加个执行条件。这个想法着实巧妙。这一招现在想来，也可以用到c#中。