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


Posted in Javascript onMay 22, 2020

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

直接调用

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

例如:

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

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

以call() 方法调用函数

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

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

举个例子:

<script type="text/javascript">
var each =function(array,fn)
{
 for(var index in array)
 {
 fn.call(null,index,array[index]);
 }
}
each([4,20,3],function (index,ele)
{
 document.write("第"+index+"个元素是"+ele+"<br/>");
}
 
);
</script>

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

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

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

var x = "我是全局变量";
//定义全局变量x
function a(){



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

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

function a(){
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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 #Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 #Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
Node.js API详解之 readline模块用法详解
May 22 #Javascript
vue+canvas实现移动端手写签名
May 21 #Javascript
基于canvas实现手写签名(vue)
May 21 #Javascript
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
You might like
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP常用数组函数介绍
2014/07/28 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python中threading超线程用法实例分析
2015/05/16 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
教师节促销方案
2014/03/22 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2015年中秋寄语
2015/07/31 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL