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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
javascript计时器详解
Feb 28 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
解析Vue.js中的组件
Feb 02 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
js实现直播点击飘心效果
Aug 19 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
php实现的二分查找算法示例
2017/06/20 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python中itertools模块用法详解
2014/09/25 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
简单的命令查看安装的python版本号
2020/08/28 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
金宝贝童装官网:Gymboree
2016/08/31 全球购物
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
会计出纳员的自我评价
2014/01/15 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
村庄环境整治方案
2014/05/15 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL