基于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的链式调用之each函数
Dec 03 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
简单了解微信小程序的目录结构
Jul 01 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
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
协议书样本
2014/04/23 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书