基于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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
jquery maxlength使用说明
Sep 09 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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
php生成EXCEL的东东
2006/10/09 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python 代码调试技巧示例代码
2020/08/11 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
shell变量的作用空间是什么
2013/08/17 面试题
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
销售顾问工作计划书
2014/08/15 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python