实例分析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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
Vue.js动态组件解析
Sep 09 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php设计模式小结
2013/02/15 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
js同源策略详解
2015/05/21 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
社区服务活动报告
2015/02/05 职场文书
教师求职简历自我评价
2015/03/10 职场文书
休假证明书
2015/06/24 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle