|
|
argumentNames
bind
bindAsEventListener
curry
defer
delay
methodize
wrap
復(fù)制代碼 代碼如下:
//通過(guò)Object對(duì)象的extend方法對(duì)Function的prototype進(jìn)行擴(kuò)展
Object.extend(Function.prototype, (function() {
var slice = Array.prototype.slice;
//把a(bǔ)rgs添加到array后面，并返回array，內(nèi)部方法
function update(array, args) {
var arrayLength = array.length, length = args.length;
while (length--) array[arrayLength + length] = args[length];
return array;
}
//基本和update方法一樣，但是不改變傳入?yún)?shù)array，返回一個(gè)新的array
function merge(array, args) {
array = slice.call(array, 0);
return update(array, args);
}
//把函數(shù)的參數(shù)格式化成數(shù)組，并返回
function argumentNames() {
var names = this.toString().match(/^[/s/(]*function[^(]*/(([^)]*)/)/)[1]
.replace(/////.*?[/r/n]|///*(?:.|[/r/n])*?/*///g, '')
.replace(//s+/g, '').split(',');
return names.length == 1 && !names[0] ? [] : names;
}
//把執(zhí)行函數(shù)的上下文綁定到context
function bind(context) {
if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
var __method = this, args = slice.call(arguments, 1);
return function() {
var a = merge(args, arguments);
return __method.apply(context, a);
}
}
//基本和bind差不多，就是保證傳入的第一個(gè)參數(shù)一定是event對(duì)象
function bindAsEventListener(context) {
var __method = this, args = slice.call(arguments, 1);
return function(event) {
var a = update([event || window.event], args);
return __method.apply(context, a);
}
}
//curry是一個(gè)數(shù)學(xué)家的名字，這個(gè)方法的作用就是可以連續(xù)的傳入?yún)?shù)，看下面的具體例子就知道了
function curry() {
if (!arguments.length) return this;
var __method = this, args = slice.call(arguments, 0);
return function() {
var a = merge(args, arguments);
return __method.apply(this, a);
}
}
//window.setTimeout函數(shù)的簡(jiǎn)單封裝
function delay(timeout) {
var __method = this, args = slice.call(arguments, 1);
timeout = timeout * 1000
return window.setTimeout(function() {
return __method.apply(__method, args);
}, timeout);
}
//相當(dāng)于delay(0.01)
function defer() {
var args = update([0.01], arguments);
return this.delay.apply(this, args);
}
//用wrapper包裝將要調(diào)用的函數(shù)，實(shí)現(xiàn)了簡(jiǎn)單的AOP功能
function wrap(wrapper) {
var __method = this;
return function() {
var a = update([__method.bind(this)], arguments);
return wrapper.apply(this, a);
}
}
//把當(dāng)前上下文作為第一個(gè)參數(shù)顯示的傳入調(diào)用的方法
function methodize() {
if (this._methodized) return this._methodized;
var __method = this;
return this._methodized = function() {
var a = update([this], arguments);
return __method.apply(null, a);
};
}
//返回外部可調(diào)用的函數(shù)
return {
argumentNames: argumentNames,
bind: bind,
bindAsEventListener: bindAsEventListener,
curry: curry,
delay: delay,
defer: defer,
wrap: wrap,
methodize: methodize
}
})());
update，merge方法：由于是內(nèi)部方法，就不詳細(xì)說(shuō)了，看源代碼基本上能看懂
argumentNames方法：
基本就是利用正則表達(dá)式提出方法里面的參數(shù)列表，并且刪除空格和一些特殊字符，然后用','進(jìn)行分割，最后返回參數(shù)數(shù)組，我不明白最后返回 names.length == 1 這個(gè)條件有什么用？我試了試，去了也沒(méi)什么影響，知道的告訴我一下。下面看一下示例：
復(fù)制代碼 代碼如下:
var fn = function(foo, bar) { return foo + bar; };
fn.argumentNames(); //-> ['foo', 'bar']
Prototype.emptyFunction.argumentNames(); //-> []
bind方法：
首先判斷傳進(jìn)來(lái)的參數(shù)個(gè)數(shù)，至少要傳進(jìn)來(lái)一個(gè)context參數(shù)，如果直接調(diào)用bind()方法，那么將返回原來(lái)的函數(shù)對(duì)象。就相當(dāng)于沒(méi)調(diào)用一樣。
bind方法的原型是這樣的：bind(thisObj[, arg...]) -> Function，第一個(gè)參數(shù)后面可以跟可選的參數(shù)，在bind方法里面用args變量存儲(chǔ)了除了第一個(gè)參數(shù)之外的所有其它參數(shù)：args = slice.call(arguments, 1);
var __method = this，這句話的意思是把__method變量設(shè)為當(dāng)前的函數(shù)，通過(guò)例子說(shuō)明更清楚些：
復(fù)制代碼 代碼如下:
var obj = {
name: 'A nice demo',
fx: function() { alert(this.name); }
};
window.name = 'I am such a beautiful window!';
function runFx(f) { f(); }
//其中__method就相當(dāng)于obj.fx
var fx2 = obj.fx.bind(obj);
runFx(obj.fx); //I am such a beautiful window!
runFx(fx2); //A nice demo
/*
這里如果我們不在runFx函數(shù)里面調(diào)用f()，而是直接在外面調(diào)用obj.fx()那么得到的結(jié)果將是'A nice demo'。
其實(shí)如果我們這樣寫：var f=obj.fx;f();那也將得到‘I am such a beautiful window!'。
通過(guò)上面的例子，我們應(yīng)該能看出上下文的概念：
obj.fx(); //上下文為：obj
f(); //上下文為：window
可以看出上下文其實(shí)就是最后一個(gè)'.'之前的那個(gè)對(duì)象，如果直接調(diào)用函數(shù)則上下文為window
*/
最后返回一個(gè)應(yīng)用于context上下文的匿名函數(shù)。
注意：var a = merge(args, arguments);這句話里面的arguments和args = slice.call(arguments, 1);里面的arguments是不一樣的。看一下例子：
復(fù)制代碼 代碼如下:
var obj = {
name: 'A nice demo',
fx: function() {
alert(this.name + '/n' + $A(arguments).joi(', '));
}
};
//這里的[1,2,3]就是slice.call(arguments, 1);里面的arguments
var fx2 = obj.fx.bind(obj, 1, 2, 3);
//這里的[4,5]就是merge(args, arguments);里面的arguments
fx2(4, 5);
// Alerts the proper name, then "1, 2, 3, 4, 5"
bindAsEventListener方法：
這個(gè)方法和bind差不多，最主要差別在這句：var a = update([event || window.event], args);總是保證綁定的函數(shù)第一個(gè)參數(shù)為event對(duì)象。看一下示例：
復(fù)制代碼 代碼如下:
var obj = { name: 'A nice demo' };
function handler(e) {
var data = $A(arguments);
data.shift();
alert(this.name + '/nOther args: ' + data.join(', ')); }
handler.bindAsEventListener(obj, 1, 2, 3);
//=======================
<input type="button" value="button" onclick="handle()" />
curry方法：
這個(gè)方法的個(gè)人覺(jué)得幫助文檔上給的例子不好，下面給出另一個(gè)示例，一看就明白了：
復(fù)制代碼 代碼如下:
var F=function(){alert(Array.prototype.slice.call(arguments,0).join(' '))};
F.curry('I').curry('am').curry('never-online').curry('http://www.never-online.NET')();
//I am never-online http://www.never-online.NET
delay和defer方法：
基本就是window.setTimeout的簡(jiǎn)單封裝，時(shí)間單位為秒，看一下示例：
復(fù)制代碼 代碼如下:
// clearing a timeout
var id = Element.hide.delay(5, 'foo');
window.clearTimeout(id);
wrap方法：
Returns a function “wrapped” around the original function.
Function#wrap distills the essence of ASPect-oriented programming into a single method, letting you easily build on existing functions by specifying before and after behavior, transforming the return value, or even preventing the original function from being called.
這句話：var a = update([__method.bind(this)], arguments);的意思就是把被包裝的函數(shù)當(dāng)作第一個(gè)參數(shù)傳入包裝函數(shù)，看一下示例：
復(fù)制代碼 代碼如下:
function wrapped(){
alert('wrapped');
}
//可以在wrapper之前調(diào)用原函數(shù)或者之后調(diào)用，是不是有點(diǎn)AOP的意思了
var wrapper=wrapped.wrap(function(oldFunc,param){
//oldFunc()
alert(param);
oldFunc();
});
//wrapper,wrapped
wrapper("wrapper");
methodize方法：
Takes a function and wraps it in another function that, at call time,
pushes this to the original function as the first argument.
這個(gè)方法先檢查將要被methodize的方法是否已經(jīng)methodize過(guò)了，通過(guò)內(nèi)部的變量this._methodized做檢查，
最后methodize函數(shù)返回的其實(shí)就是this._methodized。
這句話：var a = update([this], arguments);是關(guān)鍵，可以看出把this當(dāng)成第一個(gè)參數(shù)傳到這個(gè)原始函數(shù)中了。看一下示例就明白了：
復(fù)制代碼 代碼如下:
// start off with a simple function that does an operation
// on the target object:
var fn = function(target, foo) { target.value = foo; }; var object = {};
// 原始的方法
fn(object, 'bar');
object.value //-> 'bar'
//調(diào)用methodize之后，可以看出fn函數(shù)第一個(gè)參數(shù)target變成了object
object.fnMethodized = fn.methodize();
object.fnMethodized('boom!');
object.value //-> 'boom!'
JavaScript技術(shù)：Prototype Function對(duì)象 學(xué)習(xí)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
