基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
更新时间：2013年05月07日 16:40:33 作者：
本篇文章是对构造函数与原型链混合方式的使用进行了详细的分析介绍。需要的朋友参考下
构造函数、原型实现继承的缺陷
首先来分析构造函数和原型链两种实现继承方式的缺陷：
构造函数（对象冒充）的主要问题是必须使用构造函数方式，且无法继承通过原型定义的方法，这不是最好的选择。不过如果使用原型链，就无法使用带参数的构造函数了。开发者如何选择呢？答案很简单，两者都用。
构造函数+原型混合方式
这种继承方式使用构造函数定义类，并非使用任何原型。创建类的最好方式是用构造函数定义属性，用原型定义方法。这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法。用这两种方式重写前面的例子，代码如下：
复制代码 代码如下:
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.name);
};
在此例子中，继承机制由两行突出显示的蓝色代码实现。在第一行突出显示的代码中，在 ClassB 构造函数中，用对象冒充继承 ClassA 类的 sColor 属性。在第二行突出显示的代码中，用原型链继承 ClassA 类的方法。由于这种混合方式使用了原型链，所以 instanceof 运算符仍能正确运行。
下面的例子测试了这段代码：
复制代码 代码如下:
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //输出 "blue"
objB.sayColor(); //输出 "red"
objB.sayName(); //输出 "John"
相关文章
本文主要介绍了函数四种调用模式以及其中的this指向的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了js实现简单放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
今天小编就为大家分享一篇layer 刷新某个页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了BootStrap tooltip提示框使用小结 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
13个简单的代码优化方法，可以让你的代码在 Chrome 的 V8 JavaScript 引擎编译/运行你的 JavaScript 代码更加快速2012-07-07
这篇文章主要介绍了js多个异步请求 按顺序执行next实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.2011-08-08
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器，这篇文章主要介绍了Json文件格式化方法,需要的朋友可以参考下2023-05-05
本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧2023-12-12
这篇文章主要介绍了javascript对JSON数据排序的3个例子的相关资料2014-04-04
最新评论