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实现模仿微博发布效果实例代码
Dec 16 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JS实现轮播图效果
Jan 11 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 采集程序中常用的函数
2009/12/09 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
js数组去重的hash方法
2016/12/22 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Django 视图层(view)的使用
2018/11/09 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
公路施工安全责任书
2015/05/08 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书