许多OO语言支持两种继承：接口继承和实现继承。ECMAScript只支持实现继承，且继承实现主要依赖原型链实现。

原型链

基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系：每个构造函数均有一个原型对象，原型对象均包含一个指向构造函数的指针，实例均包含一个指向原型对象的内部指针。若让原型对象等于另一个类型的实例，此时原型对象将包含一个指向 另一个原型的指针，相应地，另一个原型中也包含一个指向另一个构造函数的指针。若另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。

原型链基本模式，示例代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>原型链-继承</title>

     <script type="text/javascript">

         function Supertype(){

             this.property=true;//propertype属于Supertype实例属性

         }

         Supertype.prototype.getSuperValue=function(){//getSuperValue()属于原型方法

             return this.property;

         };//至此，Supertype原型包含指向Supertype构造函数的constructor属性和getSuperValue()方法。

         function Subtype(){

             this.subproperty=false;//subproperty属于Subtype实例属性

         }

         //继承了Supertype，重写了原型对象

         Subtype.prototype=new Supertype();

         //添加新方法

         Subtype.prototype.getSubValue=function(){//为Subtype原型添加方法getSubValue()

             return this.subproperty;

         }//至此，Subtype原型模型中包含属性和方法为：内部属性[prototype]、property属性、getSuperValue()方法。作为一个Supertype类型的实例，其内部属性[prototype]指向Supertype原型，实例属性property。

         //重写超类中的方法,因此需要谨慎地定义方法

         Subtype.prototype.getSuperValue=function(){

             return false;

         }



         var instance=new Subtype();//实例内部属性[prototype]指向Subtype原型；且包含实例属性subproperty

         alert(instance.getSuperValue());//在重写超类函数之前返回true；重写了超累函数之后返回false

         //确定原型和实例的关系

         alert(instance instanceof Object);//true

         alert(instance instanceof Supertype);//true

         alert(instance instanceof Subtype);//true

         alert(Object.prototype.isPrototypeOf(instance));//true

         alert(Supertype.prototype.isPrototypeOf(instance));//true

         alert(Subtype.prototype.isPrototypeOf(instance));//true

     </script>

 </head>

 <body>

 </body>

 </html>

原型链的问题：
（1）原型链子类实例共享父类引用类型，同原型模型的问题一样。

（2）在创建子类的实例时，不能在不影响所有对象实例的情况下，向超类型的构造函数传递参数

因此，实践中很少单独使用原型链。

文章内容部分摘自《JavaScript高级程序设计(第3版)》

JS继承——原型链的更多相关文章

  1. 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

    说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...

  2. js 继承 原型链

    这里先说基于原型链实现的继承.那首先就得明白什么是原型链了: 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 那么,假如我们让原型对象等于 ...

  3. 怎么理解js的原型链继承？

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  4. 前端基本知识（二）：JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  5. Javascript 组合继承 原型链继承 寄生继承

    Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...

  6. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  7. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

  8. JS 面向对象之继承 -- 原型链

    ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有 ...

  9. js重点--原型链继承详解

    上篇说过了关于原型链继承的问题,这篇详解一下. 1. function animals(){ this.type = "animals"; } animals.prototype. ...

随机推荐

  1. Photoshop画笔工具的使用

    现在我们按下[B]从工具栏选择画笔工具,如果选中了铅笔就[SHIFT B]切换到画笔.然后按下[D],它的作用是将颜色设置为默认的前景黑色.背景白色.也可以点击工具栏颜色区的默认按钮(下左图红色箭头处 ...

  2. bzoj3991 [SDOI2015]寻宝游戏 树链的并

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3991 题解 貌似这个东西叫做树链的并,以前貌似写过一个类似的用来动态维护虚树. 大概就是最终的 ...

  3. 网络安全意识有多重要？SamSam勒索软件敲诈了近600万美元

    近年来,对于网络犯罪分子来说,勒索软件已成为数百万美元的黑市业务,SamSam就是一个很好的例子. 中国信息安全新研究显示,自2015年12月以来,SamSam勒索软件从受害者手中敲诈了近600万美元 ...

  4. vue+java后台通信报403，cors解决跨域问题（该贴说的不是很清楚，不过大概如此，可再去网上查相关内容）

    前端是vue2.0,网络请求用的是axios,后端是springboot2.0 用axios向后端发送post请求,结果得到一个403无权限的错误,莫名其妙啊,我明明发送的是post请,但在chrom ...

  5. 【HDOJ6614】AND Minimum Spanning Tree（签到）

    题意:给定标号从1到n的n个点,链接两个点x,y的代价为x AND y,求最小生成树总代价与满足代价最小的前提下字典序最小的方案 n<=2e5 思路: #include<bits/stdc ...

  6. IDEA搭建spingboot项目

    1.Springboot2.x是依赖于JDK1.8及以上版本的.因此先在电脑上安装JDK1.8,由于公司的项目用的是JDK1.7,所以要在JDK1.7的基础上在安装JDK1.8,让两者同时存在于电脑上 ...

  7. php面向对象编程(oop)基础知识示例解释

    面向对象并不是一种技术,而是一种思想,是一种解决问题的最基本的思维方式!如何理解使用?OOP:面向对象编程 (直接代码说明) 1.面向对象的基本概念 示例demo: <?php header(& ...

  8. 全国地区sql表

    /** * 中国省市区--地区SQL表 */ CREATE TABLE `rc_district` ( `id` smallint(5) unsigned NOT NULL AUTO_INCREMEN ...

  9. scrapy电影天堂实战(一)创建数据库

    原文链接 这里的排版没微信公众号那么友好,建议查看公众号原文 创建数据库 首先我们需要创建数据库和表等来存储数据 创建mysql.cnf配置文件 oot@ubuntu:/mnt/test_scrapy ...

  10. Jenkins+Gitlab+自动化测试配置持续集成

    Jenkins安装在win7上 GitLab安装在docker上 需求:本地提交自动化测试代码在gitlab上后,jenkins自动构建,拉下新提交的自动化代码,并且运行 参考的链接: https:/ ...