临时详解下下面的代码:
// 这个函数可以在你执行完原函数以后,执行一下自定义的函数。 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执行结果 }; }