许多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. LightOJ 1289 LCM from 1 to n(位图标记+素数筛

    https://vjudge.net/contest/324284#problem/B 数学水题,其实就是想写下位图..和状压很像 题意:给n让求lcm(1,2,3,...,n),n<=1e8 ...

  2. springboot+UEditor图片上传

    springboot+UEDitor百度编辑器整合图片上记录于此 1.下载ueditor插件包,解压到static/ueditor目录下 2.在你所需实现编辑器的页面引用三个JS文件 1)  uedi ...

  3. wangeditor 支持上传视频版

    1.关于使用哪个富文本编辑器. 简单的要求,不要求发布出来的文章排版要求很高.  可用wangediter.(简单,体积小,不可修改上传图片的尺寸大小) 转载 来源: https://blog.csd ...

  4. 网络安全专家教你设置史上最安全的WiFi密码

    通过设置强密码可以防止WiFi被蹭网现象的发生,保证WiFi网络安全.那么我们的WiFi密码怎么设置才最安全呢? 提供以下设置建议: 1.WiFi密码设置尽量使用字母.数字和字符组成的密码.这种密码强 ...

  5. 5.xml约束技术--------schema

    1.schema约束 (1)dtd语法:<!ELEMENT 元素名称 约束> (2)schema符合xml的语法,xml语句 (3)一个xml文件中只能有一个dtd,但是可以有多个sche ...

  6. 【leetcode】1039. Minimum Score Triangulation of Polygon

    题目如下: Given N, consider a convex N-sided polygon with vertices labelled A[0], A[i], ..., A[N-1] in c ...

  7. python对象之__call__方法

    先看示例,然后啥都明白了 class Student(): def __call__(self, *args, **kwargs): print('__call__方法被调用', *args) cla ...

  8. Seek the Name, Seek the Fame (poj2752

    Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14561   Ac ...

  9. [hadoop](1) MapReduce:ChainMapper

    前言 本章主要讲述的是对于hadoop生态系统中,MapReduce写的ChainMapper的学习.MapReduce是hadoop集群数据处理的默认框架.而对于数据集中所有的数据必然有一些不友好的 ...

  10. promise以及async、await学习总结

    Promise/async.await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果 ...