基于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 相关文章推荐
改变状态栏文字的js代码
Jun 13 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
canvas绘制的直线动画
Jan 23 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
详解使用React进行组件库开发
Feb 06 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 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
网站当前的在线人数
2006/10/09 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Pytorch之contiguous的用法
2019/12/31 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
python TCP包注入方式
2020/05/05 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
满月酒答谢词
2014/01/14 职场文书
迎元旦广播稿
2014/02/22 职场文书
大学开学计划书
2014/04/30 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
单位在职证明书
2014/09/11 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
推广普通话的宣传语
2015/07/13 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers