实例分析javascript中的call()和apply()方法


Posted in Javascript onNovember 28, 2014

1、方法定义

call方法:
语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

2、常用实例

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
还有 callee,caller..

总结:

简单的说:相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

Javascript 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
jquery实现手风琴案例
May 04 jQuery
javascript+Canvas实现画板功能
Jun 23 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
You might like
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP安全上传图片的方法
2015/03/21 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
代码分析Python地图坐标转换
2018/02/08 Python
python增加图像对比度的方法
2019/07/12 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
士力架广告词
2014/03/20 职场文书
大学生实训报告总结
2014/11/05 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis