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 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php array的学习笔记
2012/05/16 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
python 发送get请求接口详解
2020/11/17 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
数学专业推荐信范文
2013/11/21 职场文书
关于保护环境的标语
2014/06/09 职场文书
化工专业求职信
2014/07/01 职场文书
物理学专业求职信
2014/07/04 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
采购部年度工作总结
2015/08/13 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
python3操作redis实现List列表实例
2021/08/04 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS