基于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数组排序函数sort()介绍
Jun 08 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
JavaScript实现优先级队列
Dec 06 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
python 爬取小说并下载的示例
2020/12/07 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
经典的毕业生自荐信范文
2014/04/14 职场文书
代办社保委托书范文
2014/10/06 职场文书
小学生作文评语集锦
2014/12/25 职场文书
青涩记忆观后感
2015/06/18 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸