基于JavaScript实现继承机制之调用call()与apply()的方法详解


Posted in Javascript onMay 07, 2013

call() 方法

call() 方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作 this 的对象。其他参数都直接传递给函数自身。例如:

function sayHello(sPrefix,sSuffix) {
    alert(this.name + ”says“ + sPrefix + sSuffix);
};
var obj = new Object();
obj.name = "Tom";
sayHello.call(obj, "Hello ", "World.");

在这个例子中,函数 sayHello() 在对象外定义,即使它不属于任何对象,也可以引用关键字 this。对象 obj 的 name属性等于 blue。调用 call() 方法时,第一个参数是 obj,说明应该赋予 sayHello() 函数中的 this 关键字值是 obj。第二个和第三个参数是字符串。它们与 sayHello() 函数中的参数 sPrefix 和 sSuffix 匹配,最后生成的消息 "Tom says Hello World." 将被显示出来。

要与继承机制的对象冒充方法一起使用该方法,只需将前三行的赋值、调用和删除代码替换即可:

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.call(this, sColor);
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

这里,我们需要让 ClassA 中的关键字 this 等于新创建的 ClassB 对象,因此 this 是第一个参数。第二个参数 sColor 对两个类来说都是唯一的参数。

apply() 方法

apply() 方法有两个参数,用作 this 的对象和要传递给函数的参数的数组。例如:

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

这个例子与前面的例子相同,只是现在调用的是 apply() 方法。调用 apply() 方法时,第一个参数仍是 obj,说明应该赋予 sayColor() 函数中的 this 关键字值是 obj。第二个参数是由两个字符串构成的数组,与 sayColor() 函数中的参数 sPrefix 和 sSuffix 匹配,最后生成的消息仍是 "The color is blue, a very nice color indeed.",将被显示出来。

该方法也用于替换前三行的赋值、调用和删除新方法的代码:

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, new Array(sColor));
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

同样的,第一个参数仍是 this,第二个参数是只有一个值 color 的数组。可以把 ClassB 的整个 arguments 对象作为第二个参数传递给 apply() 方法:
function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, arguments);
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

当然,只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象。如果不是,就必须创建一个单独的数组,按照正确的顺序放置参数。此外,还可使用 call() 方法。

我们可以看到这两个方法能够很好的代替原始的对象冒充,使写法上变得稍微简单。但是这些方法的弊端是子类不能继承父类在原型链上声明的方法或属性,针对这个问题下一篇文章将会介绍JavaScript中另一种实现继承的方式—原型链继承。

Javascript 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
js图片自动切换效果处理代码
May 07 #Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 #Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 #Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 #Javascript
基于JavaScript 类的使用详解
May 07 #Javascript
解读JavaScript中 For, While与递归的用法
May 07 #Javascript
You might like
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
理解javascript异步编程
2016/01/27 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python解析中国天气网的天气数据
2014/03/21 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
大学生应聘推荐信范文
2013/11/19 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
公司年会策划方案
2014/05/17 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
工程安全生产协议书
2014/11/21 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
网络妈妈观后感
2015/06/08 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS