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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
用PHP实现小型站点广告管理
2006/10/09 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python调用.NET库的方法步骤
2019/12/27 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
安全生产演讲稿
2014/05/09 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年教研组工作总结
2014/11/26 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL