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 dom追加内容实现示例
Sep 21 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
vue-cli常用设置总结
Feb 24 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
Javascript Math对象
2009/08/13 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
wxPython事件驱动实例详解
2014/09/28 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
校园达人秀策划书
2014/01/12 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
工会主席事迹材料
2014/06/03 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android
Ruby处理YAML和json数据
2022/04/18 Ruby