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 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
Javascript之文件操作
2007/03/07 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue观察模式浅析
2018/09/25 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python中xrange用法分析
2015/04/15 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python numpy格式化打印的实例
2018/05/14 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python tornado上传文件的功能
2020/03/26 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
数字漫画:comiXology
2020/06/13 全球购物
技校学生个人职业生涯规划范文
2014/03/03 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
python 批量压缩图片的脚本
2021/06/02 Python