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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
js获取 gif 的帧数的代码实例
Sep 10 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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作为Shell脚本语言使用
2006/10/09 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
微信JS接口大全
2016/08/25 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
javascript 数组精简技巧小结
2020/02/26 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
孝敬父母的演讲稿
2014/05/14 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
暖春观后感
2015/06/08 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
MSSQL基本语法操作
2022/04/11 SQL Server