js call方法详细介绍(js 的继承)


Posted in Javascript onNovember 18, 2013

call 方法
请参阅
应用于:Function 对象
要求
版本 5.5
调用一个对象的一个方法,以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

-------------------------------------------------------------------------------------------
乍一看,很容易把人看迷胡,先做一些简单的说明
obj1.method1.call(obj2,argument1,argument2)
如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1..这些做为参数传入.

举一个具体的例子

function add(a,b)
{
    alert(a+b);
}
function sub(a,b)
{
    alert(a-b);
}
add.call(sub,3,1);

这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

看一个稍微复杂一点的例子

function Class1()
{
    this.name = "class1";
    this.showNam = function()
    {
        alert(this.name);
    }
}
function Class2()
{
    this.name = "class2";
}
var c1 = new Class1();
var c2 = new Class2();
c1.showNam.call(c2);

注意,call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2");

怎么样,觉得有意思了吧,可以让a对象来执行b对象的方法,这是java程序员所不敢想的。还有更有趣的,可以用 call 来实现继承

function Class1()
{
    this.showTxt = function(txt)
    {
        alert(txt);
    }
}
function Class2()
{
    Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");

这样 Class2 就继承Class1了,Class1.call(this) 的 意思就是使用 Class1 对象代替this对象,那么 Class2 中不就有Class1 的所有属性和方法了吗,c2 对象就能够直接调用Class1 的方法以及属性了,执行结果就是:alert(“cc”);

对的,就是这样,这就是 javaScript 如何来模拟面向对象中的继承的,还可以实现多重继承。

function Class10()
{
    this.showSub = function(a,b)
    {
        alert(a-b);
    }
}
function Class11()
{
    this.showAdd = function(a,b)
    {
        alert(a+b);
    }
}

function Class2()
{
    Class10.call(this);
    Class11.call(this);
}

很简单,使用两个 call 就实现多重继承了
当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法
说了call ,当然还有 apply,这两个方法基本上是一个意思
区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组
Javascript 相关文章推荐
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 #Javascript
jQuery客户端分页实例代码
Nov 18 #Javascript
javascript验证身份证完全方法具体实现
Nov 18 #Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 #Javascript
YUI模块开发原理详解
Nov 18 #Javascript
深入领悟JavaScript中的面向对象
Nov 18 #Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 #Javascript
You might like
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
使用pandas读取文件的实现
2019/07/31 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
护士的自我鉴定
2014/02/07 职场文书
社会学专业求职信
2014/02/24 职场文书
2015年父亲节寄语
2015/03/23 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android