首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

回答: [原创]ExtJS 2.3源码分析(2012年02月21日更新)

2012-08-24 
答复: [原创]ExtJS 2.3源码分析(2012年02月21日更新)?临时详解下下面的代码:// 这个函数可以在你执行完原

答复: [原创]ExtJS 2.3源码分析(2012年02月21日更新)

?

临时详解下下面的代码:

    // 这个函数可以在你执行完原函数以后,执行一下自定义的函数。            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;                };            }  
?

?这个代码为什么要这么设计呢?

先看API中关于这个方法的使用方法:

    var sayHi = function(name){    alert('Hi, ' + name);}      sayHi('Fred'); // alerts "Hi, Fred"      var sayGoodbye = sayHi.createSequence(function(name){                                                    alert('Bye, ' + name);                                         });      sayGoodbye('Fred'); // both alerts show

?

最终createSequence需要返回一个function类型的方法所以在方法的定义中return 了一个function。

且根据方法定义,该方法的第一个参数必须是一个function类型的对象,所以在方法的最开始首先判断该方法第一个参数的参数类型若不为function则放弃后续操作并将createSequence方法的调用者返回去。这样类似于var sayGoodbye = sayHi.createSequence({});在执行sayGoodbye();时等价于调用sayHi();

?

这里还有一个待解决的问题那就是如何将sayHi保存起来,因为根据createSequence的定义。该方法需要先调用sayHi()而后调用里面的那个匿名function。

且因为一定要返回一个function所以下面必须renturn function(){。。。。。}这里请注意一点,返回的function中的this和return外面的this并不是同一个对象。

我们看代码:var mathod = this; 返回的function中: var retval = method.apply( this || window , arguments );

这2个this是不一样的,return外面的this表示调用createSequence的对象,根据上面的例子就是sayHi这个function。而return中的this代表调用return的function的那个对象,也就是调用sayHi的那个对象而不是sayHi本身。

所以必须在return function之前先把代表sayHi的function也就是那个this用一个内部变量缓存起来利用闭包供return的function执行时使用。

所以才有了var retval = method.apply( this || window , arguments );的写法。根据上面的DEMO我们重新给方法定义添加一些注释以帮助理解2个不同的this:

    // 这个函数可以在你执行完原函数以后,执行一下自定义的函数。            createSequence : function( fcn , scope ) {                      //这里的fcn就是DEMO中的那个<strong>function</strong>(name){alert(<em>'Bye, '</em> + name);}                              if ( typeof fcn != "function" ) {                    return this;                }                var method = this;//这个this为sayHi (类型为function)                return function() {                    var retval = method.apply( this || window , arguments );//这个this为调用sayHi的对象也就是window                               //上面那一句相当于调用sayHi(/* 这个地方应该是arguments 也就是 'Fred' */);                                 fcn.apply( scope || this || window , arguments );                          //上一句相当于执行function(name){alert('Bye, ' + name);}('Fred')                    return retval;//根据定义返回sayHi执行结果                };            }  

?

热点排行