JavaScript直接调用函数与call调用的区别实例分析

2023-07-24 08:44:03 64

本文实例讲述了JavaScript直接调用函数与call调用的区别。分享给大家供大家参考，具体如下：

直接调用

直接调用函数是最常见最普通的方式,直接以函数附加的对象作为调用者,在函数后括号内传入参数来调用函数

例如:

window.alert("测试代码");

其中调用者如果是window可以省略,即直接alert("测试代码");

以call()方法调用函数

语法：call([thisObject[,arg1[,arg2[,...,argn]]]]);

新同学看来好像直接调用就够了,其实不然, 直接调用函数方式简单易用但不够灵活, 有些时候调用函数时需要动态地传入一个函数的引用,此时为了动态地调用函数,就需要使用call方法来调用了

举个例子:


vareach=function(array,fn)
{
for(varindexinarray)
{
fn.call(null,index,array[index]);
}
}
each([4,20,3],function(index,ele)
{
document.write("第"+index+"个元素是"+ele+"
");
}

);

乍看可能比较晕,注意fn.call语句,call调用的格式是在参数第一个填调用者,后边按顺序输入参数, 参数形式比较特别,与直接调用不同,调用者不写在前面,而是参数第一项. 格式:fn.call(obj,args);

看到这里大家应该会有疑问, call到底和直接调用有什么区别,区别就在于call调用修改了this指针的指向,如果被调用的函数里压根没用到this也就没有什么区别了

再举一个被调用函数有this指针的例子:

varx="我是全局变量";//定义全局变量x
functiona(){//定义函数类结构a
this.x="我是在函数类结构a中声明的哦";
}
//定义普通函数，弹出当前指针所包含的变量x的值
functionf(){
alert(this.x);
}
//返回值为“我是在函数类结构a中声明的哦”
f.call(newa());

我的理解是，f.call(newa())就是把函数（其实也是对象）f复制到被调用对象“newa()”下面去解析，事实上和下面这段代码的解析结果一样：

functiona(){
this.x="我是在函数类结构a中声明的哦";
alert(this.x);
}
a();

事实上，是在调用f.call()的时候，修改了f()中的this指向。本来，f中的this.a,this.b属性都是自身的，但是通过f.call()调用时，传入了一个新的对象e()（this），这样，将e绑定到了f的this中，本来是给f增加的属性，加到了e中。（e与e(),f与f()都是等价的）有点类似于“继承”，但是这个应该叫JS中对象冒充

以apply()方式调用函数

apply()方法与call()方法的功能节本相似,都可以用来动态地调用函数.apply()与call()的区别如下:

通过call()调用函数时必须在括号中详细地列出每个参数
apply()动态地调用函数时,需要以数组的形式一次性传入所有调用参数

语法：apply([thisObj[,argArray]]);

比如下面的两个语句是相等的:

myfun.call(window,12,13);
myfun.capply(window,[12,13]);

在修改this指针这点上,apply()与call()也保持一致,

大体上来说apply()与call()只在传参形式上有些差别而已.

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript直接调用函数与call调用的区别实例分析

直接调用

以call()方法调用函数

以apply()方式调用函数

热门推荐

随机推荐