许多OO语言都支持两种继承方式,接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于在ECMAScript中,函数没有签名,无法实现接口继承,只支持实现继承,而且其实现继承主要是通过原型链来实现的。

一. 原型链模式

利用原型让引用类型继承另一个引用类型的属性和方法。

原型、构造函数和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针, 而实例包含一个指向原型对象的内部指针。

假如让原型对象等于另一个类型的实例,结果会如何?显然,此时的原型对象包好一个指向另一个原型的指针,相应地,另一个原型中也包含着指向另一个函数的指针。假如另一个原型又是另一个类型的实例,上述关系依然成立,如此层层递进,构成了实例与原型的链条。这就是所谓原型链的基本概念。

function SuperType() {
    this.superProperty = true;
}
SuperType.prototype.getSuperProperty = function() {
    console.log(this.superProperty);
};
function SubType() {
    this.subProperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubProperty = function() {
    console.log(this.subProperty);
};
var instance = new SubType();
instance.getSuperProperty();               //true

原型链模式的缺点:通过原型链实现继承时,原型实际上为另一个类型的实例,于是,原先的实例属性也变成了原型属性。而包含引用类型值的原型属性会被所有实例共享。

function SuperType() {
    this.superProperty = true;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.getSuperProperty = function() {
    console.log(this.superProperty);
};
function SubType() {
    this.subProperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubProperty = function() {
    console.log(this.subProperty);
};
var instance1 = new SubType();
instance1.colors.push("purple");
console.log(instance1.colors);            //["red", "blue", "green", "purple"]  var instance2 = new SubType();
console.log(instance2.colors);            //["red", "blue", "green", "purple"] 

为了解决原型链模式引用类型属性继承的问题,接下来讨论借用构造函数模式。

二. 借用构造函数模式

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("purple");
console.log(instance1.colors);      //["red", "blue", "green", "purple"]
var instance2 = new SubType();
console.log(instance2.colors);      //["red", "blue", "green"] 
相对于原型链,借用构造函数模式中,子类型的构造函数能够向父类型的构造函数传递参数。
function SuberType(name) {
    this.name = name;
}
function SubType(age) {
    SuberType.call(this,"Mars");
    this.age = age;
}
var instance = new SubType(27);
console.log(instance.name);            //Mars
console.log(instance.age);             //

借用构造函数模式的缺点:仅是借用构造函数,无法避免构造函数模式存在的问题——方法都在构造函数中定义,函数复用无从谈起。为解决这个问题,接下来讨论组合继承模式。

三. 组合继承

组合继承:原型链模式+借用构造函数模式,原型链模式实现对原型属性和方法的继承,借用构造函数模式实现对实例属性的继承。

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
};
function SubType(name,age) {
    SuperType.call(this,name);
    this.age = age;
}
SubType.prototype = new SuperType();
var instance1 = new SubType("Brittany",23);
instance1.colors.push("black");
console.log(instance1.colors);                  //["red", "blue", "green", "black"]
console.log(instance1.sayName());               //Brittany
var instance2 = new SubType("Closure",24);
console.log(instance2.colors);                  //["red", "blue", "green"]
console.log(instance2.sayName());               //Closure console.log(instance1 instanceof SubType);      //true
console.log(instance1 instanceof SuperType);    //true
console.log(SubType.prototype.isPrototypeOf(instance1));   //true
console.log(SuperType.prototype.isPrototypeOf(instance1)); //true

时间:2014-10-22

地点:合肥

引用:《JavaScript高级程序设计》

JavaScript 继承的更多相关文章

  1. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  2. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  3. 【读书笔记】javascript 继承

    在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...

  4. 图解JavaScript 继承

    JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...

  5. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  6. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  7. javascript继承(六)—实现多继承

    在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...

  8. javascript继承(五)—prototype最优两种继承(空函数和循环拷贝)

    一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  9. javascript继承(四)—prototype属性介绍

    js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向 ...

  10. 【JavaScript】重温Javascript继承机制

    上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...

随机推荐

  1. [转]SpringMVC拦截器简单教程

    亲测有用,地址: http://blog.csdn.net/tjcyjd/article/details/7498236

  2. 集​群​t​o​m​c​a​t​+​a​p​a​c​h​e​配​置​文​档

    http://wenku.baidu.com/link?url=M_Lt07e-9KTIHucYgJUCNSxkjWThUuQ2P8axn8q6YmY_yQw7NmijQoDA2wKmi_FQUxwO ...

  3. 执行Hadoop job提示SequenceFile doesn't work with GzipCodec without native-hadoop code的解决过程记录

    参照Hadoop.The.Definitive.Guide.4th的例子,执行SortDataPreprocessor作业时失败,输出的错误信息 SequenceFile doesn't work w ...

  4. 实验一 认识DOS

    #include<stdio.h> #include<string.h> void main() {       char cmd[20][20]={"dir&quo ...

  5. iOS UIWebView重定向Cookie

    // 1. 取出当前的cookies NSArray<NSHTTPCookie *> *cookies = [NSHTTPCookieStorage sharedHTTPCookieSto ...

  6. Oracle Data Guard的配置

    概述 Oracle Data Guard 是针对企业数据库的最有效和最全面的数据可用性.数据保护和灾难恢复解决方案.它提供管理.监视和自动化软件基础架构来创建和维护一个或多个同步备用数据库,从而保护数 ...

  7. 2017年1月1日 java学习第二天复习

    今天是新年的第一天,以前学习没有总结习惯,学习效率和成果都很不好.  学习的过程就是反复的复习和不断学习的过程,开始今天的学习总结   学习java的第二天. 今天学习了java最基础的一些内容,照着 ...

  8. appml的安装与使用

    来自w3cshool的中文文档:http://www.w3cschool.cc/appml/appml-tutorial.html 我们要做的是完整的例子,所以从这里http://www.w3csch ...

  9. 读取中文目录(python)

    前言:需要对某目录下的文件进行分类,目录是中文名字就会报错,偶尔会手动修改文件名字,不太方便 解决办法:使用unicode()对路径进行处理 举例: 未进行处理前,该目录下的文件中文名称也是乱码显示的 ...

  10. JAVA类与对象

    Employee类: public class EmployeeTest { public static void main(String[] args) { // fill the staff ar ...