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 的 trim 函数的代码
Aug 13 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
详细解读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中的字符串函数
2006/10/09 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php查询whois信息的方法
2015/06/08 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
两道JAVA笔试题
2016/09/14 面试题
高中化学教学反思
2014/01/13 职场文书
高三生物教学反思
2014/01/25 职场文书
服务员岗位职责
2014/01/29 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书