实例分析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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jQuery 研究心得 取得属性的值
Nov 30 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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简洁函数小结
2011/08/12 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python生成lmdb格式的文件实例
2018/11/08 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python的faker库用法
2019/11/28 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
大学生求职推荐信
2013/11/27 职场文书
村干部任职承诺书
2015/01/21 职场文书
导游词开场白
2015/01/31 职场文书