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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
认识并使用PHP超级全局变量
2010/01/26 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
小程序实现密码输入框
2020/11/16 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
介绍Java的内部类
2012/10/27 面试题
自荐信需注意事项
2014/01/25 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
会议主持词结束语
2015/07/03 职场文书
如何使用pdb进行Python调试
2021/06/30 Python