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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
浅谈Web Storage API的使用
Jun 23 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 array_merge_recursive 数组合并
2016/10/26 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
r.js来合并压缩css文件的示例
2018/04/26 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python实现两张图片的像素融合
2019/02/23 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
函授本科自我鉴定
2013/11/03 职场文书
群众路线剖析材料
2014/09/30 职场文书
工厂标语大全
2014/10/06 职场文书
反腐倡廉观后感
2015/06/08 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
python关于集合的知识案例详解
2021/05/30 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android