实例分析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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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 array_search() 函数使用
2010/04/13 PHP
php简单的会话类代码
2011/08/08 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
python创建进程fork用法
2015/06/04 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
毕业生就业自荐信
2013/12/04 职场文书
2014年加油站工作总结
2014/12/04 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
婚育证明样本
2015/06/16 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers