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事件绑定.on()简要概述及应用
Feb 07 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
用 JSON 处理缓存
2007/04/27 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python抓取文件夹的所有文件
2018/02/27 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python实现大转盘抽奖效果
2019/01/22 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
《生命 生命》教学反思
2014/04/19 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
python分分钟绘制精美地图海报
2022/02/15 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS