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玩转继承(三)
May 08 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JavaScript DOM基础
Apr 13 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue实现简单学生信息管理
May 30 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
PHP数据类型之布尔型的介绍
2013/04/28 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP常用的三种设计模式
2017/02/17 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python实现图片彩色转化为素描
2019/01/15 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python正则表达式如何匹配中文
2020/05/27 Python
css3 transform属性详解
2014/09/30 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
房地产还款计划书
2014/01/10 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
生日赠语
2015/06/23 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
python单向链表实例详解
2022/05/25 Python