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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 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 json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
美发活动策划书
2014/01/14 职场文书
2014年情人节活动方案
2014/02/16 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
小学生期末评语大全
2014/04/21 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014年路政工作总结
2014/12/10 职场文书
优秀高中学生评语
2014/12/30 职场文书
同学会邀请函模板
2015/01/30 职场文书
美容院员工规章制度
2015/08/05 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书