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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 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
一个odbc连mssql分页的类
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
js压缩利器
2007/02/20 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python动态性强类型用法实例
2015/05/09 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python中无限循环需要什么条件
2020/05/27 Python
使用django自带的user做外键的方法
2020/11/30 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
.NET面试问题集
2015/12/08 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
在求职信中如何凸显个人优势
2013/10/30 职场文书
服装促销活动方案
2014/02/23 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
综合测评自我评价
2015/03/06 职场文书
人与自然观后感
2015/06/16 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书