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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
采用call方式实现js继承
May 20 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
下载给定网页上图片的方法
2014/02/18 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python 自动化表单提交实例代码
2017/06/08 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
马云的职业生涯规划之路
2014/01/01 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
促销活动计划书
2014/05/02 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android