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表单提交的代码
Sep 13 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
理解javascript模块化
Mar 28 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 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
星际争霸中的热键
2020/03/04 星际争霸
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
关爱残疾人标语
2014/06/25 职场文书
工作收入证明模板
2014/10/10 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL