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日历控件实现方法分享
Mar 07 Javascript
javascript连续赋值问题
Jul 08 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
简单了解JavaScript sort方法
Nov 25 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 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绘图技术
2013/07/03 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
PHP7 标准库修改
2021/03/09 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
canvas绘制多边形
2017/02/24 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
python实现求最长回文子串长度
2018/01/22 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python匿名函数及应用示例
2019/04/09 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
财务会计自荐信范文
2014/02/21 职场文书
股份转让协议书
2014/04/12 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL