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中将具有数字属性名的对象转换为数组
Mar 06 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
js 数组 fill() 填充方法
Nov 02 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统一页面编码避免乱码问题
2015/04/09 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
nodejs模块学习之connect解析
2017/07/05 NodeJs
浅析vue中的MVVM实现原理
2019/03/04 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
程序员岗位职责
2013/11/11 职场文书
给领导的检讨书
2014/02/16 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
4s店活动策划方案
2014/08/25 职场文书
2016教师国培研修感言
2015/12/08 职场文书
使用pytorch实现线性回归
2021/04/11 Python
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
深入理解 Golang 的字符串
2022/05/04 Golang