基于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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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 CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python基础知识小结之集合
2015/11/25 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
大整数数相乘的问题
2012/07/22 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
请假条标准格式规范
2014/04/10 职场文书
端午节活动总结
2014/08/26 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书