首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议59:推荐动态调用函数

关灯直达底部

调用函数更便捷的方式是使用Function对象的call和apply方法。apply与call方法在本质上没有太大区别,只不过它们传递给函数的参数方式不同,apply是以数组形式进行参数传递,而call方法可以同时传递多个值。

如果某个函数仅能够接收多个参数列表,而现在希望把一个数组的所有元素作为参数进行传递,那么使用apply方法就显得非常便利。


function max{

var m=Number.NEGATIVE_INFINITY;//声明一个负无穷大的数值

for(var i=0;i<arguments.length;i++){

if(arguments[i]>m)

m=arguments[i];

}

return m;

}

var a=[23,45,2,46,62,45,56,63];

var m=max.apply(Object,a);

alert(m);//63


在上面的示例中,首先定义一个函数来计算所传递实参的最大值。由于该函数仅能够接收多个数值参数,所以通过apply方法动态调用max函数,然后把它绑定为Object对象的一个方法,并借机把一个数组传递给它,最后返回此函数的运行值。如果没有apply方法,想使用max函数来计算数组中最大元素值,就需要把数组的所有元素读取出来,然后再传递给函数,显然这种做法是费力不讨好的。

实际上,也可以把数组元素通过apply方法传递给系统对象Math的max方法来计算数组的最大元素值。


var a=[23,45,2,46,62,45,56,63];//声明并初始化数组

var m=Math.max.apply(Object,a);//调用系统函数max

alert(m);//63


使用call和apply方法可以把一个函数转换为方法传递给某个对象。这种行为只是临时的,函数最终并没有作为对象的方法而存在,当函数被调用后,该对象方法会自动被注销。下面的示例具体地说明了这种行为。


function f{}

f.call(Object);

Object.f;


call和apply方法能够更改对象的内部指针,即改变对象的this指向的内容,这在面向对象的编程过程中是非常有用的。


var x=/"o/";

function a{

this.x=/"a/";

}

function b{

this.x=/"b/";

}

function c{

alert(x);

}

function f{

alert(this.x);

}

f;//字符o,即全局变量x的值。this此时指向window对象

f.call(window);f.call(new a);//字符a,即函数a内部的局部变量x的值。this此时指向函数a

f.call(new b);//字符b,即函数b内部的局部变量x的值。this此时指向函数b

f.call(c);/*undefined,即函数c内部的局部变量x的值,但是该函数并没有定义x变量,所以返回没有定义。this此时指向函数c*/


通过上面示例的比较,能够很直观地发现,函数f内部的this关键字会随着所绑定的对象不同而指向不同的对象。因此,利用call或apply方法能够改变函数内部指针指向所绑定的对象,从而实现属性或方法继承。


function f{

this.a=/"a/";

this.b=function{

alert(/"b/");

}

}

function e{

f.call(this);

alert(a);

}

e//字符串a


上面的示例说明,如果在函数体内使用call和apply方法动态调用外部函数,并把call和apply方法的第一个参数值设置为关键字this,那么当前函数e将继承函数f的所有成员。使用call和apply方法能够复制调用函数的内部变量给当前函数体,更改了函数f的内部关键字this指向函数e,这样函数e就可以引用函数f的内部成员。

最后,再看一个比较复杂的示例。在这个示例中将演示如何使用apply方法循环更改当前指针,从而实现循环更改函数的结构。


function r(x){

return(x);

}

function f(x){

x[0]=x[0]+/">/";

return x;

}

function o{

var temp=r;

r=function{

return temp.apply(this,f(arguments));

}

}

function a{

o;

alert(r(/"=/"));

}

for(var i=0;i<10;i++){

a;

}


执行上面代码后会看到,提示信息框中的提示信息不断变化。该示例的核心就在于函数o的设计。在这个函数中,首先使用一个临时变量存储函数r。然后修改函数r的结构,在修改的函数r的结构中,通过调用apply方法修改原来函数r的指针指向当前对象,同时执行原函数r,并把执行函数f的值传递给它,从而实现修改函数r的return语句的后半部分信息,即为返回值增加一个前缀字符“=”。这样每次调用函数o时,都会为其增加一个前缀字符“=”,从而形成一种动态的变化效果。

当然,call和apply方法的应用是非常灵活的,在大型JavaScript技术框架中经常会用到它们,利用它们可以实现动态更改对象的指针,从而实现各种复杂的功能。