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利用div背景,做一个竖线的效果。
Nov 22 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
JavaScript创建对象方法实例小结
Sep 03 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 字符转义 注意事项
2009/05/27 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php验证手机号码
2015/11/11 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript引导程序
2008/10/26 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python 调用Java实例详解
2017/06/02 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
python 如何将office文件转换为PDF
2020/09/22 Python
python中random模块详解
2021/03/01 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
食品销售计划书
2014/04/26 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
优秀班组事迹材料
2014/12/24 职场文书
教师岗位职责范本
2015/04/02 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS