Javascript中call的两种用法实例


Posted in Javascript onDecember 13, 2013

用法一(常见用法):

表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法。先看示例:

function Class1(){
    this.name = "class1";
    this.showName = function(){
        alert(this.name);
    }
}
function Class2(){
    this.name = "class2";
}
var c1 = new Class1();
var c2 = new Class2(); 
c1.showName.call(c2);
c2.showName();        //不能执行

我们先分别定义了两个function,分别是Class1和Class2,它们的主要区别是Class2比Class1多了一个showName()方法。接着定义了与Class1、Class2对应的对象c1和c2,这时候我们清醒的知道,c1有showName()方法而c2没有。但是奇迹出现了,当我们执行 c1.shoName.call(c2) 时,会弹出c2的name值,即"class2"。其实,我们执行的任然是c1的方法,只不过临时起意地把对象c2偷换成对象c1,执行完毕后,它们任然是定义时的样子,c2并没有因此多了些什么方法。为了检测c2有没有多了方法,示例加了行 c2.showNmae(); 它是不能被执行的,浏览器会报出 Object #<Class2> has no method 'showName' 的错误。

为什么要这么做?前面说了,这是一种临时起意的使用方法,我们就是利用其高效的编程而已。但这并不是没有限制的,假设用c1和c2表示被替换的对象和替换对象,用fun1表示c1固有的方法。1、当fun1不需要参数,且不用到父函数中的任意局部变量时,其实c1.fun1.call(c2) 和 c1.fun1() 没什么区别;2、当fun1不需要参数但是用到父函数中的变量,那么就要求生成c1和c2的function有相同名称的那些个被fun1使用的变量;3、当fun1需要参数时,形式要改写成c1.fun1.call(c2, 参数1, 参数2, ...参数n),这个时候生成c1的function中的变量名就不必和生成c2的function的变量名同名了,只需对应即可。其实,我们在用到call的这种用法时,c2和c1往往在结构和功能上已经有很大的相似性了,所以上述三点很容易避免。

用法二:

在function的定义过程中使用,表现形式:另一个已存在函数.call(this),它可以将另一个已存在函数的变量、方法统统克隆到自己的函数中,实现一种类似于继承的功能。看个例子:

function Animal(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    }
};
var animal = new Animal("small_animal");
animal.showName();    //alert("small_animal")
function Cat(name){
    Animal.call(this, name);
};
//var Animal = null;    //取消注释试一试
var cat = new Cat("black_cat");
cat.showName();     //alert("black_cat")
Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 #Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 #Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 #Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 #Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 #Javascript
js获取html页面节点方法(递归方式)
Dec 13 #Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 #Javascript
You might like
php巧获服务器端信息
2006/12/06 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP对象相关知识总结
2017/04/09 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
英文简历中的自我评价
2013/10/06 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
吴仁宝观后感
2015/06/09 职场文书
厉行节约工作总结
2015/08/12 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis