本文转载自:https://www.cnblogs.com/sarahwang/p/6870072.html  

      https://blog.csdn.net/u012443286/article/details/78823955    ——仅用于学习

构造函数、原型与实例之间的关系

  

  》每创建一个函数,该函数就会自动带有一个 prototype 属性。该属性是个指针,指向了一个对象,我们称之为 原型对象

  》原型对象上默认有一个属性 constructor,该属性也是一个指针,指向其相关联的构造函数。

  》通过调用构造函数产生的实例,都有一个内部属性(__proto__),指向了原型对象。所以实例能够访问原型对象上的所有属性和方法。

  

  所以三者的关系是:  "每个构造函数都有一个原型对象,

               原型对象都包含一个指向构造函数的指针,

               实例都包含一个指向原型对象的内部指针。"

                  ——此段话摘自《JavaScript高级程序设计》

  -----通俗点说就是,实例通过内部指针可以访问到原型对象,原型对象通过constructor指针,又可以找到构造函数。

  =================================================================

  下面结合实例简要分析:

      一、每个构造函数都有一个原型对象

        

          可以看到,每个构造函数本身都是一个对象,它有一个属性叫做prototype,它是一个对象。

      二、原型对象都包含一个指向构造函数的指针

            对于Object:

        

            对于Array:

        

            。。。。。。

            。。。。。。

            可以发现:每个构造函数的prototype属性都是个对象,这个对象都有一个属性constructor,它是个指针,并且指向构造函数本身。

      三、实例都包含一个指向原型对象的内部指针

            对于Object:

        

            对于Array:

         

            。。。。。。

            。。。。。。

          可以看到:实例都有一个属性叫做_proto_,它是个指针,指向原型对象。

    =================================================================

下面看一个例子:

1
2
3
4
5
6
7
8
9
function Dog (name) {
    this.name = name;
    this.type = 'Dog'
}
Dog.prototype.speak = function () {
  alert('wang');
}
var doggie = new Dog('jiwawa');
doggie.speak();  //wang 

  以上代码定义了一个构造函数 Dog(),  Dog.prototype 指向的原型对象,其自带的属性construtor又指回了 Dog,即  Dog.prototype.constructor == Dog. 实例doggie由于其内部指针指向了该原型对象,所以可以访问到 speak方法。

二、原型链

  前面我们说到,所有的实例有一个内部指针,指向它的原型对象,并且可以访问原型对象上的所有属性和方法。doggie实例指向了Dog的原型对象,可以访问Dog原型对象上的所有属性和方法;如果Dog原型对象变成了某一个类的实例 aaa,这个实例又会指向一个新的原型对象 AAA,那么 doggie 此时就能访问 aaa 的实例属性和 AA A原型对象上的所有属性和方法了。同理,新的原型对象AAA碰巧又是另外一个对象的实例bbb,这个实例bbb又会指向新的原型对象 BBB,那么doggie此时就能访问 bbb 的实例属性和 BBB 原型对象上的所有属性和方法了。

  这就是JS通过原型链实现继承的方法了。看下面一个例子:

//定义一个 Animal 构造函数,作为 Dog 的父类
function Animal () {
  this.superType = 'Animal';
}

Animal.prototype.superSpeak = function () {
  alert(this.superType);
}

function Dog (name) {
  this.name = name;
  this.type = 'Dog';
}
//改变Dog的prototype指针,指向一个 Animal 实例
Dog.prototype =  new Animal();
//上面那行就相当于这么写
//var animal = new Animal();
//Dog.prototype = animal;

Dog.prototype.speak = function () {
  alert(this.type);
}
var doggie = new Dog('jiwawa');
doggie.superSpeak(); //Animal

  解释一下。以上代码,首先定义了一个 Animal 构造函数,通过new Animal()得到实例,会包含一个实例属性 superType 和一个原型属性 superSpeak。另外又定义了一个Dog构造函数。然后情况发生变化,代码中加粗那一行,将Dog的原型对象覆盖成了 animal 实例。当 doggie 去访问superSpeak属性时,js会先在doggie的实例属性中查找,发现找不到,然后,js就会去doggie 的原型对象上去找,doggie的原型对象已经被我们改成了一个animal实例,那就是去animal实例上去找。先找animal的实例属性,发现还是没有 superSpeack, 最后去 animal 的原型对象上去找,诶,这才找到。

  

  这就说明,我们可以通过原型链的方式,实现 Dog 继承 Animal 的所有属性和方法。

  总结来说:就是当重写了Dog.prototype指向的原型对象后,实例的内部指针也发生了改变,指向了新的原型对象,然后就能实现类与类之间的继承了。(但是如果在重写原型对象之前,产生的实例,其内部指针指向的还是最初的原型对象。)

转载于:https://www.cnblogs.com/ytraister/p/10520331.html

JS——构造函数、原型与实例之间的关系 及 原型链 的描述相关推荐

  1. JavaScript 进阶 35 -- 构造函数、原型对象、实例之间的关系详解

    说到继承 ,先要弄明白 :构造函数.原型对象.实例之间的关系. 先来了解几个简单的概念: 构造函数:通过 关键字 new 来调用的 函数,var p = new Person():Person就称为构 ...

  2. 服务器类型,服务器名称,数据库,数据库服务实例之间的关系

    在学习数据库过程中,对书中服务器类型,服务器名称,数据库,数据库服务实例之间的关系不甚了解,在网上找了一堆资料,总结如下: 1.服务器类型 sql server提供的服务器类型有:数据库引擎(sql ...

  3. 调了 好几天的问题 treeview 的js 处理复选框之间的关系,选中子框父框自动选中,单独执行 没问题 放到框架页里 就有问题...

    刚开始的js 这么写的 function OnTreeNodeChecked() {var ele = event.srcElement;if (ele.type == 'checkbox') {va ...

  4. 浅谈JS、Ajax、JQuery之间的关系

    在JS中,获取某一元素值,可通过如下方式: var xx = obj._value; 也可以通过jquery的方式 // 通过jquery方式获取元素值 var xx = $(obj).attr('_ ...

  5. 作为前端,你需要了解的js构造函数和原型

    文章目录 1.1 概述 1.2 构造函数 1.3构造函数的问题 1.4 构造函数的原型 prototype 1.5 对象原型__proto__ 1.6 constructor 构造函数 1.7 构造函 ...

  6. python类与类的关系_python 类与类之间的关系

    一.依赖关系(紧密程度最低) (1)简单的定义:就是方法中传递一个对象.此时类与类之间存在依赖关系,此关系比较低. (2)实例植物大战僵尸简易版 题目要求:创建一个植物,创建一个僵尸 1.植物:名字. ...

  7. UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现

    类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中,每个类具有一定的职责,职责指的是类所担任的任务,即类要完成什 ...

  8. 转:UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现

    转:UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 原文:https://www.cnblogs.com/firstcsharp/p/5327659.html 类与类图 1) 类(Clas ...

  9. 信息系统项目管理师必背核心考点(四)UML类与类之间的关系

    科科过<每天一小时 俩月拿证>为您带来软考信息系统项目管理师核心重点考点(四):UML类与类之间的关系,内含思维导图+真题.本资料由科科过整理. [信息系统项目管理师核心考点]UML类与类 ...

最新文章

  1. Scrapy框架CrawlSpider类爬虫实例
  2. Red Hat Enterprise Linux 5.4安装GCC
  3. python下载m3u8地址_python 下载m3u8视频的示例代码
  4. Position(Static, Absolute, Relative, Fixed)
  5. win10诊断启动后联网_小技巧:win10网络共享文件夹出现错误无法访问如何解决?...
  6. 6.6.1最优二叉树(赫夫曼树)
  7. JavaEE实战班第十五天
  8. ieee期刊的科技写作思路曹文平_科技论文写作与发表教程(第六版)
  9. oem718d 基准站设置_诺瓦泰NovAtel OEM718D全系统多频单机测向板卡
  10. es6 modules 和commonjs
  11. android自动点击开红包,自动点击连点器
  12. 在线IDE~快速体验在线编程
  13. java-php-python-ssm抑郁症患者博客交流平台计算机毕业设计
  14. [芦半山]Android native分析工具ASAN和HWASAN原理解析
  15. Android中FlowLayout的使用方法,监控布局大小并设置页面高度
  16. R语言 trim=0.1 tirm=0.2 什么意思呢?
  17. 《熊猫人之谜》属性可能重大改变
  18. Pacemaker+Corosync+Mfs+Iscsi+Fence实现高可用和Fence管理
  19. linux下给文件赋予所有权限
  20. 十六进制颜色和RGB互转

热门文章

  1. python复制文件夹不阻塞_11.python并发入门(part14阻塞I/O与非阻塞I/O,以及引入I/O多路复用)...
  2. navicat mysql 还原_navicat如何给mysql还原数据库
  3. 关于QT中对窗口中某个widget建类
  4. ordfilt2非线性滤波器
  5. android so导致启动慢,谈谈Android NDK中动态链接库(.so文件)的优化
  6. arcgis合并tif影像_ARCGIS多种影像裁剪
  7. yolov5鱼苗检测计数:从数据标注到训练
  8. 重要开源!CNN-RNN-CTC 实现手写汉字识别
  9. 服务器系统更新要多久,请问系统服务器多长时间更新一次
  10. 双显卡单独分辨率_甜点光追显卡—带你实现GAMING梦!!!