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 相关文章推荐
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
js实现点赞效果
Mar 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
基于php iconv函数的使用详解
2013/06/09 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
javascript 必知必会之closure
2009/09/21 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jquery选择器简述
2015/08/31 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
简单的Python的curses库使用教程
2015/04/11 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
学习Python列表的基础知识汇总
2020/03/10 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
linux系统都有哪些运行级别
2012/04/15 面试题
制药工程专业职业生涯规划范文
2014/03/10 职场文书
小学学校评估方案
2014/06/08 职场文书
个人授权委托书范文
2014/09/21 职场文书
搞笑婚前保证书
2015/02/28 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库