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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
php查询内存信息操作示例
2019/05/09 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
javascript实用方法总结
2015/02/06 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
JavaScript十大取整方法实例教程
2020/12/03 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python基于opencv实现人脸识别
2021/01/04 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
Java模拟试题
2014/11/10 面试题
童装店创业计划书
2014/01/09 职场文书
小学教研工作制度
2014/01/15 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年维稳工作总结
2014/11/18 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书