JavaScript中的call方法和apply方法使用对比


Posted in Javascript onAugust 12, 2015

方法定义
call方法:
语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
 
常用实例
a、

function add(a,b) 
{ 
 alert(a+b); 
} 
function sub(a,b) 
{ 
 alert(a-b); 
} 
 
add.call(sub,3,1);

 这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
 
b、

function Animal(){ 
 this.name = "Animal"; 
 this.showName = function(){ 
  alert(this.name); 
 } 
} 
 
function Cat(){ 
 this.name = "Cat"; 
} 
 
var animal = new Animal(); 
var cat = new Cat(); 
 
//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。 
//输入结果为"Cat" 
animal.showName.call(cat,","); 
//animal.showName.apply(cat,[]);

 call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat
 
c、实现继承

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.showName();

 Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.
 
d、多重继承

function Class10() 
{ 
 this.showSub = function(a,b) 
 { 
  alert(a-b); 
 } 
} 
 
function Class11() 
{ 
 this.showAdd = function(a,b) 
 { 
  alert(a+b); 
 } 
} 
 
function Class2() 
{ 
 Class10.call(this); 
 Class11.call(this); 
}

 很简单,使用两个 call 就实现多重继承了
当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments

JavaScript 中的call和apply方法主要用来改变函数对象的上下文,即函数中this所指向的内容。

调用方法如下:

fun.call(obj1, arg1, arg2, ...);
fun.apply(obj2, [arrs]);

具体示例:

var Obj1 = {
 name: 'Object1',
 say: function(p1, p2) {
  console.log(this.name + ' says ' + p1 + ' ' + p2);
 }
};

// logs 'Object1 says Good morning'
Obj1.say('Good', 'morning');

var Obj2 = {
 name: 'Object2'
};

// logs 'Object2 says Good afternoon'
Obj1.say.call(Obj2, 'Good', 'afternoon');

// logs 'Object2 says Good afternoon again'
Obj1.say.apply(Obj2, ['Good', 'afternoon again']);

通过示例可以看出,通过常规方式调用say的时候,方法中的this指向Obj1,而通过call和apply调用的时候,this却指向了Obj2。

通过示例可以看出,call和apply的作用是完全相同的,其调用方法的区别也只是参数列表不同罢了。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
vue双向绑定及观察者模式详解
Mar 19 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 #Javascript
基于jQuery实现动态数字展示效果
Aug 12 #Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 #Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 #Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 #Javascript
javascript表单验证大全
Aug 12 #Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP中文汉字验证码
2007/04/08 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
node 版本切换的实现
2020/02/02 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python 字典的打印实现
2019/09/26 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
师范生自荐信模板
2014/05/28 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
小学教育见习总结
2015/06/23 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python