JavaScript中函数(Function)的apply与call理解


Posted in Javascript onJuly 08, 2015

JavaScript函数调用分为4中模式:

1. 方法调用模式:即对象包含方法属性,Obj.methodName()或者Obj[methodName]()。
2. 函数调用模式:即methodName()。
3. 构造器调用模式:即new MethodName()。
4. apply和call调用模式:即ObjA.apply(ObjB,args[])或者ObjA.call(ObjB,arg1,arg2...)。

函数调用时,除了接收形式参数外,还会接收this和arguments。其中this为函数对象上下文,arguments为实际参数。
apply和call实现同样的功能,即切换函数对象的上下文(this指向的引用),区别在于形式参数不一样。apply为arguments或者数组,call为以逗号隔开多个单独形式参数。

function add(c) 
{ 
  alert(this.a+this.b+c); 
} 
var test={a:1,b:2} 
add.call(test,3);

在执行add.call(test,3); 之前add和test都属于window下,此时this指向window。add.call(test,3); 执行时,进入add方法体,此时this由window切换为test,此时this.a=test.a,this.b=test.b,c为形式参数传入的值,即alert()的结果为1+2+3=6。apply也是一样的功能。
 
通过apply和call实现扩展和继承:

function Animal(name){   
   this.name = name;   
   this.showName = function(){   
     alert(this.name);   
   }   
 }   
   
 function Cat(name){  
   Animal.call(this, name); 
 }   
   
 var cat = new Cat("Black Cat");//执行时,Cat函数体的this由window切换为Cat{}, 
// Animal函数体的this.name通过形式参数传入即为Black Cat,最终cat 
 //得到的结果为cat=Cat{name:"Black Cat",showName: function(){ alert(this.name);}, 
 cat.showName();//执行时this由window切换为 
 //Cat{name:"Black Cat",showName: function(){ alert(this.name);} 此时this.name 
 //为this.name=Cat.name,因此为Black Cat。
Javascript 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
syntaxhighlighter 使用方法
Jul 02 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
深入理解node.js之path模块
May 03 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 #Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 #Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 #Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 #Javascript
浅谈jQuery中setInterval()方法
Jul 07 #Javascript
javascript数组排序汇总
Jul 07 #Javascript
javascript编写贪吃蛇游戏
Jul 07 #Javascript
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
基于python实现聊天室程序
2018/07/27 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
元旦活动感言
2014/03/08 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
司机岗位职责说明书
2014/07/29 职场文书
工作失误检讨书
2015/01/26 职场文书
环保主题班会教案
2015/08/13 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript