基于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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
jquery键盘事件介绍
Jan 31 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
js只执行1次的函数示例
Jul 20 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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&&mysql)五
2006/10/09 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
浅谈PHP中的
2016/04/23 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
window.location.hash 使用说明
2010/11/08 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python入门篇之面向对象
2014/10/20 Python
python中使用print输出中文的方法
2018/07/16 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python 如何快速复制序列
2020/09/07 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
期末总结的个人自我评价
2013/11/02 职场文书
项目建议书模板
2014/05/12 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年政工师工作总结
2014/12/18 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
婚姻出轨保证书
2015/05/08 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers