当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Prototype Function对象 学习

Javascript
JS 文件本身编码转换 图文教程
jQuery Ajax之$.get()方法和$.post()方法
jQuery Ajax之load()方法
JavaScript 核心参考教程 内置对象
JavaScript 核心参考教程 RegExp对象
javascript hashtable实现代码
百度留言本js 大家可以参考下
javascript 判断某年某月有多少天的实现代码 推荐
让iframe子窗体取父窗体地址栏参数(querystring)
jquery pagination插件实现无刷新分页代码
jQuery与javascript对照学习 获取父子前后元素 实现代码
通用javascript脚本函数库 方便开发
JQuery 绑定事件时传递参数的实现方法
支持IE,Firefox的javascript 日历控件
javascript 变速加数功能实现代码
extjs 学习笔记（一） 一些基础知识
extjs 学习笔记（二） Ext.Element类
Jquery 学习笔记（一）
一些技巧性实用js代码小结
jquery 常用操作整理 基础入门篇

No. « 260 261 262 263 »

技术文章搜索

关键字

Javascript 中的 Prototype Function对象 学习

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 248 ::
收藏到网摘: n/a

这个对象就是对function的一些扩充，最重要的当属bind方法，其中wrap方法也很重要，在类继承机制里面就是利用wrap方法来调用父类的同名方法。 这个对象就是对function的一些扩充，最重要的当属bind方法，prototype的帮助文档上特意说了一句话：Prototype takes issue with only one aspect of functions: binding.其中wrap方法也很重要，在类继承机制里面就是利用wrap方法来调用父类的同名方法。
argumentNames
bind
bindAsEventListener
curry
defer
delay
methodize
wrap
复制代码 代码如下:

//通过Object对象的extend方法对Function的prototype进行扩展
Object.extend(Function.prototype, (function() {
var slice = Array.prototype.slice;
//把args添加到array后面，并返回array，内部方法
function update(array, args) {
var arrayLength = array.length, length = args.length;
while (length--) array[arrayLength + length] = args[length];
return array;
}
//基本和update方法一样，但是不改变传入参数array，返回一个新的array
function merge(array, args) {
array = slice.call(array, 0);
return update(array, args);
}
//把函数的参数格式化成数组，并返回
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;
}
//把执行函数的上下文绑定到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差不多，就是保证传入的第一个参数一定是event对象
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是一个数学家的名字，这个方法的作用就是可以连续的传入参数，看下面的具体例子就知道了
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函数的简单封装
function delay(timeout) {
var __method = this, args = slice.call(arguments, 1);
timeout = timeout * 1000
return window.setTimeout(function() {
return __method.apply(__method, args);
}, timeout);
}
//相当于delay(0.01)
function defer() {
var args = update([0.01], arguments);
return this.delay.apply(this, args);
}
//用wrapper包装将要调用的函数，实现了简单的AOP功能
function wrap(wrapper) {
var __method = this;
return function() {
var a = update([__method.bind(this)], arguments);
return wrapper.apply(this, a);
}
}
//把当前上下文作为第一个参数显示的传入调用的方法
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);
};
}
//返回外部可调用的函数
return {
argumentNames: argumentNames,
bind: bind,
bindAsEventListener: bindAsEventListener,
curry: curry,
delay: delay,
defer: defer,
wrap: wrap,
methodize: methodize
}
})());

update，merge方法：由于是内部方法，就不详细说了，看源代码基本上能看懂
argumentNames方法：
基本就是利用正则表达式提出方法里面的参数列表，并且删除空格和一些特殊字符，然后用','进行分割，最后返回参数数组，我不明白最后返回 names.length == 1 这个条件有什么用？我试了试，去了也没什么影响，知道的告诉我一下。下面看一下示例：
复制代码 代码如下:

var fn = function(foo, bar) { return foo + bar; };
fn.argumentNames(); //-> ['foo', 'bar']
Prototype.emptyFunction.argumentNames(); //-> []

bind方法：
首先判断传进来的参数个数，至少要传进来一个context参数，如果直接调用bind()方法，那么将返回原来的函数对象。就相当于没调用一样。
bind方法的原型是这样的：bind(thisObj[, arg...]) -> Function，第一个参数后面可以跟可选的参数，在bind方法里面用args变量存储了除了第一个参数之外的所有其它参数：args = slice.call(arguments, 1);
var __method = this，这句话的意思是把__method变量设为当前的函数，通过例子说明更清楚些：
复制代码 代码如下:

var obj = {
name: 'A nice demo',
fx: function() { alert(this.name); }
};
window.name = 'I am such a beautiful window!';
function runFx(f) { f(); }
//其中__method就相当于obj.fx
var fx2 = obj.fx.bind(obj);
runFx(obj.fx); //I am such a beautiful window!
runFx(fx2); //A nice demo
/*
这里如果我们不在runFx函数里面调用f()，而是直接在外面调用obj.fx()那么得到的结果将是'A nice demo'。
其实如果我们这样写：var f=obj.fx;f();那也将得到‘I am such a beautiful window!'。
通过上面的例子，我们应该能看出上下文的概念：
obj.fx(); //上下文为：obj
f(); //上下文为：window
可以看出上下文其实就是最后一个'.'之前的那个对象，如果直接调用函数则上下文为window
*/

最后返回一个应用于context上下文的匿名函数。
注意：var a = merge(args, arguments);这句话里面的arguments和args = slice.call(arguments, 1);里面的arguments是不一样的。看一下例子：
复制代码 代码如下:

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方法：
这个方法和bind差不多，最主要差别在这句：var a = update([event || window.event], args);总是保证绑定的函数第一个参数为event对象。看一下示例：
复制代码 代码如下:

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方法：
这个方法的个人觉得帮助文档上给的例子不好，下面给出另一个示例，一看就明白了：
复制代码 代码如下:

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的简单封装，时间单位为秒，看一下示例：
复制代码 代码如下:

// 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);的意思就是把被包装的函数当作第一个参数传入包装函数，看一下示例：
复制代码 代码如下:

function wrapped(){
alert('wrapped');
}
//可以在wrapper之前调用原函数或者之后调用，是不是有点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.
这个方法先检查将要被methodize的方法是否已经methodize过了，通过内部的变量this._methodized做检查，
最后methodize函数返回的其实就是this._methodized。
这句话：var a = update([this], arguments);是关键，可以看出把this当成第一个参数传到这个原始函数中了。看一下示例就明白了：
复制代码 代码如下:

// 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'
//调用methodize之后，可以看出fn函数第一个参数target变成了object
object.fnMethodized = fn.methodize();
object.fnMethodized('boom!');
object.value //-> 'boom!'