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 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 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 分库分表hash算法
2009/11/12 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php session的应用详细介绍
2017/03/22 PHP
Array对象方法参考
2006/10/03 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
js+html制作简单验证码
2017/02/16 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python数据类型详解(二)列表
2016/05/08 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
大学军训感言400字
2014/03/11 职场文书
教育教学读书笔记
2015/07/02 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
Nginx的gzip相关介绍
2022/05/11 Servers