基于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"
相关文章
这篇文章主要为大家详细介绍了JavaScript如何动态监听DOM元素高度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-07-07
本文介绍的方法基于javascript，css和myFunction结合可实现页面展示转换，下面有个示例，大家可以参考下2014-07-07
最近发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug。所以这篇文章主要给大家介绍了关于js中this的指向问题的相关资料，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了原生javascript实现简单的datagrid数据表格的方法，效果十分棒,需要的朋友可以参考下2015-01-01
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
让文本框内的最后一个文字的后面获得焦点，在应用中很常见，接下来提供解决方案，按兴趣的朋友可以了解下2013-01-01
创建文件的方法有很多，在本文为大家详细介绍下js中时如何实现的，感兴趣的朋友不要错过了2013-09-09
这篇文章主要为大家介绍了JS中var let声明范围区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
写一个字符串转成驼峰的方法，使用js代码实现，具体如下，感兴趣的朋友可以了解下哈2013-06-06
这篇文章主要介绍了webpack 动态批量加载文件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次2015-10-10
最新评论