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表单验证代码
Aug 02 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
js中url对象化管理分析
Dec 29 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
appium+python adb常用命令分享
2020/03/06 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
初中校园广播稿
2014/02/02 职场文书
工作求职信
2014/07/04 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
投诉信范文
2015/07/02 职场文书
Python 全局空间和局部空间
2022/04/06 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL