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 setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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
我常用的几个类
2006/10/09 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php-fpm配置详解
2014/02/12 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaScript错误处理
2015/02/03 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Scrapy的简单使用教程
2017/10/24 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
介绍一下linux文件系统分配策略
2013/02/25 面试题
八年级英语教学反思
2014/01/09 职场文书
个人优缺点自我评价
2014/01/27 职场文书
经管应届生求职信范文
2014/05/18 职场文书
租房安全协议书
2014/08/20 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
写给医院的感谢信
2015/01/22 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫