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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php 判断数组是几维数组
2013/03/20 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
态度决定一切演讲稿
2014/05/20 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
单位接收证明格式
2015/06/18 职场文书