Prototype Function对象 学习
Prototype Function对象 学习
发布时间:2016-12-30 来源:查字典编辑
摘要:这个对象就是对function的一些扩充,最重要的当属bind方法,prototype的帮助文档上特意说了一句话:Prototypetake...

这个对象就是对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(///.*?[rn]|/*(?:.|[rn])*?*//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" />

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!'

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类