基于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 form表单提交插件asp.net后台中文解码
Jun 12 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
vue生命周期实例小结
Aug 15 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php基础教程
2015/08/26 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
纯JS实现动态时间显示代码
2014/02/08 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python2.7安装图文教程
2018/03/13 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python换行与不换行的输出实例
2020/02/19 Python
python如何代码集体右移
2020/07/20 Python
用python绘制樱花树
2020/10/09 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
竞选团支书演讲稿
2014/04/28 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL