与类的创建篇一样,这里先贴出最终代码,再做详细分析:

// 创建一个父类
function SuperType(){
this.company = 'alibaba';
} function SubType(){
SuperType.call(this); // 【1. 调用父类的构造函数】
this.name = 'yunos';
} SubType.prototype = Object.create(SuperType.prototype,{constructor:{value:SubType}}); // 【2. 把父类的原型赋给子类】
var instance = new SubType();
console.log(instance); /*----------------牢记两部关键性的操作,到此为止,已实现理想化的继承------------------------*/ var instance = new SubType();
instance instanceof SubType // true.
instance instanceof SuperType // true.

鉴于部分浏览器尚不支持Object.create, 修正后如下:

// 辅助函数,解决浏览器不支持Object.create的问题,同时正确指向构造函数
function createObject(proto, constructor) {
var newProto;
if (Object.create) {
newProto = Object.create(proto);
} else {
function Empty(){};
Empty.prototype = proto;
newProto = new Empty();
}
newProto.constructor = constructor;
return newProto;
} // 创建一个父类
function SuperType(){
this.company = 'alibaba';
}function SubType(){
SuperType.call(this); // 调用父类的构造函数.
this.name = 'yunos';
}
SubType.prototype = createObject(SuperType.prototype, SubType); // 把父类的原型赋给子类 var instance = new SubType();
instance instanceof SubType // true.
instance instanceof SuperType // true.

Javascript中最常用的继承模式: 原型链 + 借用构造函数 = 组合继承(又称伪经典继承)。

原型链继承:

function SuperType(){
this.company = 'alibaba';
}
SuperType.prototype.getSuperValue = function(){
return this.company;
} function SubType(){
this.name = 'yunos';
}
SubType.prototype = new SuperType(); var instance = new SubType();
console.log(instance);

众所周知,Javascript是通过prototype来实现继承的,在此我们创建父类的实例重写了 SubType.prototype。
换句话说,原来存在于 SuperType 的实例中的所有属性和方法现在也存在于 SubType.prototype中了。
如下所示:

当然,不要忘记最后一环,所有的引用类型默认都继承了Object,这一环也是通过原型链来实现的,所有函数默认的原型 { constructor : '...' }都是Object的实例。

尽管原型链如此强大,可以用它来实现继承,但在实践中我们很少这样做,因为它存在一个严重的问题:父类的属性会成为子类的原型属性,

而当原型属性包含引用类型值时,该原型属性会被类的所有实例共享,在一个实例上进行的修改,会影响到其他实例。

借用构造函数继承:

在解决原型中包含引用类型值多带来问题的过程中,使用一种叫做借用构造函数的技术(有时候也叫做伪造对象或经典继承)。 这种技术思想相当简单,即在子类型构造函数的内部调用父类的构造函数。  —— 函数只不过是在特定环境中执行代码的对象,因此通过使用apply 和 call 方法可以在新创建的对象上执行构造函数,如下所示:

function SuperType(){
this.colors = ["red", "blue", "green"];
} function SubType(){
SuperType.call(this); // 【借调父类的构造函数】
} var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // red, blue, green, black" var instance2 = new SubType();
alert(instance2.colors); // "red, blue, green"

通过借调,我们实际上是在(未来将要)新创建的SubType 实例的环境下调用了 SuperType 构造函数。 这样,就会在新SubType对象上执行 SuperType() 函数中定义的所有对象初始化代码。 然后, SubType的每个实例就都会具有自己的 colors 属性的副本了。

而且它还具有一个很大的优势,即可以在子类构造函数中向父类的构造函数传递参数:

function SuperType(name){
this.name = name;
} function SubType(){
  SuperType.call(this, "yunos");
  this.age = 29;
} var instance = new SubType();
console.log(instance.name); // "yunos";
console.log(instance.age); //

为了确保父类构造函数不会重写子类型的属性,可以在调用父类构造函数后,再添加应该在子类型中定义的属性。

组合继承:

将原型链和借用构造函数的技术组合到一块,从而发挥二者之长,是当前应用最广泛的继承方法:

function SuperType(){
this.company = "alibaba";
}
SuperType.prototype.getSuperValue = function(){
return this.company;
} function SubType(){
  SuperType.call(this); // 【借调父类的构造函数】
  this.name = "yunos";
}
SubType.prototype = new SuperType(); var instance1 = new SubType();
console.log(instance1);

虽然并不完美,但类的功能终于具备了,无明显弊端,使用方法也比较简单,所以被广泛使用。

至此本文应该结束了,但严谨的,偏执的,追求完美的程序员,一直在探求更为完美的实现方式,于是便有了下边的内容:

Javascript中最理想的继承范式: 原型式 —> 寄生式 —> 寄生组合式继承(广泛应用于YUI、KISSY中)—> 最终继承

// 辅助方法,用以正确继承父类原型
function inheritPrototype(subType, superType){
function F(){};
F.prototype = superType.prototype;
var protoObj = new F(); }

Javascript面向对象之继承的更多相关文章

  1. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  2. Javascript 面向对象编程—继承和封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  3. javascript面向对象中继承实现?

    面向对象的基本特征有:封闭.继承.多态. 在javascript中实现继承的方法: 1.原型链(prototype chaining) 2.call()/apply() 3.混合方式(prototyp ...

  4. 【前端学习】javascript面向对象编程(继承和复用)

    前言       继承,代码复用的一种模式.和其它高级程序语言相比,javascript有点点不一样,它是一门纯面向对象的语言,在JS中,没有类的概念,但也可以通过原型(prototype)来模拟对象 ...

  5. javascript 面向对象的继承的实现

    JavaScript 中的面向对象的初步认识 上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解,下面继续研究JS面向对象,实现继承和多态. 之前的学习我了解到了 :构造函数加属性,原型p ...

  6. javascript面向对象:继承、多态

    继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现 ...

  7. javascript面向对象事件继承

    继承:父类有的,子类也有.父类改变,子类也跟着变. 属性继承:      矫正this (window对象,矫正成object对象)     fn .call(this是谁,参数1,参数2...); ...

  8. Javascript 面向对象之继承

    本文参考书籍<<Javascript高级程序设计>> js继承方式:实现继承,主要依靠原型链实现. 原型链:基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 这 ...

  9. javascript 面向对象(实现继承的几种方式)

     1.原型链继承 核心: 将父类的实例作为子类的原型 缺点:  父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了 function Person (name) { this.name ...

随机推荐

  1. 阿里云产品介绍(一):云服务器ECS

    最近天南海北的跑客户,在沟通过程中,发现很多客户对于阿里云众多的产品颇有种挑花了眼不知如何入手的感觉,就想写一个系列来简单的介绍下. 云计算的概念刚出来的时候,吹的牛皮是可以将成千上万台物理服务器连接 ...

  2. ZZmsvcprt.lib(MSVCP90.dll) : error LNK2005:已经在libcpmtd.lib(xmutex.obj) 中定义 .的分析解决办法 (转)

    很久没有写程式设计入门知识的相关文章了,这篇文章要来谈谈程式库 (Library) 连结,以及关于 MSVC 与 CRT 之间的种种恩怨情仇. 如果你使用的作业系统是 Linux.Mac 或其他非 W ...

  3. Zone.js 简介 & 抛砖引玉

    Zone.js是angular团队参照NodeJS的Domain,Dart的Zone,为angular 2开发的核心组件. 一开始,我对Zone.js是拒绝的.我们知道类似的 Domain 模块,主要 ...

  4. 深入剖析 redis 事件驱动

    概述 redis 内部有一个小型的事件驱动,它和 libevent 网络库的事件驱动一样,都是依托 I/O 多路复用技术支撑起来的. 利用 I/O 多路复用技术,监听感兴趣的文件 I/O 事件,例如读 ...

  5. 不同iOS版本做代码适配__IPHONE_OS_VERSION_MAX_ALLOWED 和 __IPHONE_8_0等专业术语

    目前开发只想最低版本支持iOS8了,iOS8以前的就不管了,然后现在iOS9和iOS10出来以后,有些新的API,也有些弃用的API,为了兼容,有时候代码里面需要编写判断不同iOS版本,或者只允许指定 ...

  6. 99 Lisp Problems 二叉树(P54~P69)

    P54A (*) Check whether a given term represents a binary tree Write a predicate istree which returns ...

  7. Spring3系列12- Spring AOP AspectJ

    Spring3系列12- Spring AOP AspectJ 本文讲述使用AspectJ框架实现Spring AOP. 再重复一下Spring AOP中的三个概念, Advice:向程序内部注入的代 ...

  8. 记一次VNC远程连接Linux问题解决记录(5900端口测试、KDE桌面安装)

    最近几天,到一个项目上安装Linux部署环境.由于服务器在机房,而进机房又比较麻烦,于是选择VNC远程连接Linux就显得自然而然了.以前也用过VNC,而且还经常使用,由于各个项目环境不太一样,这次也 ...

  9. [转]Sql Server 给表与字段添加描述

    /* 在SQL语句中通过系统存储过sp_addextendedproperty可为表字段添加上动态的说明(备注)下面是SQL SERVER帮助文档中对sp_addextendedproperty存储过 ...

  10. twisted 学习笔记二:创建一个简单TCP客户端

    #coding=utf-8 from twisted.internet import reactor,protocol class QuickClient(protocol.Protocol): de ...