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 相关文章推荐
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
详细解读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
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
javascript数组的使用
2013/03/28 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
谈谈JS中的!!
2017/12/07 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
学习python的前途 python挣钱
2019/02/27 Python
Python 串口读写的实现方法
2019/06/12 Python
pygame实现非图片按钮效果
2019/10/29 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
综合测评自我鉴定
2013/10/08 职场文书
成人大专自我鉴定范文
2013/10/19 职场文书
一分钟演讲稿
2014/04/30 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
监考失职检讨书
2015/01/26 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
PHP命令行与定时任务
2021/04/01 PHP
CocosCreator入门教程之网络通信
2021/04/16 Javascript
python之基数排序的实现
2021/07/26 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js