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 相关文章推荐
工作需要写的一个js拖拽组件
Jul 28 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 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递归调用的小技巧讲解
2013/02/19 PHP
php5.3 注意事项说明
2013/07/01 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
讲解Python中的标识运算符
2015/05/14 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
顶撞领导检讨书
2014/01/29 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技