基于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和jQuery的片段分享
Aug 23 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
javascript动态加载二
Aug 22 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
犀利的js 函数集合
2009/06/11 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
range 标准化之获取
2011/08/28 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
layui表格分页 记录勾选的实例
2019/09/02 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
当当网软件测试笔试题
2015/11/24 面试题
校运会广播稿100字
2014/01/27 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技