基于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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php防止sql注入代码实例
2013/12/18 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
计算机专业毕业生求职信
2014/04/30 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis