前不久写了有关原型链中prototype、__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype、__proto__和constructor的关系。

通过以下最简单的原型链继承(省略了属性和方法)来讨论:

 1 function SuperType(){};
2 function SubType(){};
//继承了SuperType
3 SubType.protoType = new SuperType();
//创建了一个SubType的实例
4 var instance = new SubType();

1)根据原型链中prototype、__proto__和constructor的关系这篇文章的讲解,我们可以很快知道以上代码中第1行和第2行发生如下过程:

     

2)接着,看第3行代码,我们先不管如何继承。第3行代码通过调用构造函数SuperType()创建了一个实例,并把这个实例赋给乐SubType的原型对象SubType.prototype;如果弄懂了原型链,我们可以很快知道这个时候SubType的原型对象的__proto__指针指向SuperType的原型对象:

(此图是错误的,以下将讲解正确的过程及原因)

3)按照之前讲的原型链知识,过程应该如上图所示。但这里有一点要注意,第3行代码实际上是重写了SubType的原型对象,也就是说现在的SubType原型对象和第2行代码中的SubType原型对象不是同一个对象了。那么此SubType的原型对象与SubType之间的联系constructor 属性就断开了,那它没有了自己的constructor属性,它就会从SuperType的原型对象那继承,所以SubType原型对象的constructor属性指向SuperType。过程可表示如下:

最终的结果就是:

console.log(SubType.prototype.constructor === SuperType);//true

4)接着,第4行代码通过调用SubType()构造函数创建了一个实例instance,很自然instance的__proto__就指向了SubType的原型对象,而其constrcutor属性就继承SubType 原型对象的constrcutor属性,SubType 原型对象的constrcutor属性是继承自SuperType,那么instance的constructor就追溯到指向了SuperType。

console.log(SubType.prototype.constructor === SuperType);//true
console.log(instance.constructor === SuperType);//true

原型链继承中的prototype、__proto__和constructor的关系的更多相关文章

  1. JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。

    回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...

  2. javascript中继承(一)-----原型链继承的个人理解

    [寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来, ...

  3. prototype原型链继承

    依旧是恶补js基础,上代码: 1.定义父类及父类方法 function Animal(){ this.name = "动物"; } Animal.prototype.eat = f ...

  4. javascript原型链继承

    一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constru ...

  5. js原型链+继承 浅析

    名称:    prototype--原型对象    __proto__--属性 原型链与继承网上搜索定义,看起来挺绕的 .先说继承: 所有的对象实例都可以共享原型对象包含的属性和方法  例如一个实例A ...

  6. 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  7. js原型链继承的傻瓜式详解

    本文争取用最简单的语言来讲解原型链继承的OOP原理 0.如果对原型继承还没有大致了解,完全一头雾水,请先阅读 <JavaScript高级程序设计>第六章最后部分的寄生组合式继承 或者_廖雪 ...

  8. js原型链理解(2)--原型链继承

    1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...

  9. JavaScript之原型链与原型链继承

    原型链 定义:每个实例对象(object)都有一个私有属性(称之为 __proto__ )指向它的构造函数的原型对象(prototype).该原型对象也有一个自己的原型对象(__proto__),层层 ...

随机推荐

  1. Python3之urllib模块

    简介 urllib是python的一个获取url(Uniform Resource Locators,统一资源定位符),可以用来抓取远程的数据. 常用方法 (1)urlopen urllib.requ ...

  2. 如何在ASP.NET Core 2.0中使用Razor页面

    如何在ASP.NET Core 2.0中使用Razor页面  DotNetCore2017-11-22 14:49 问题 如何在ASP.NET Core 2.0中使用Razor页面 解 创建一个空的项 ...

  3. 对 ArrayList 进行分页.

    /** * 测试分页 */ @Test public void testPage() { int bulkSize = 2; List<Integer> dataList = new Ar ...

  4. python学习,day3:函数式编程,带参数

    # coding=utf-8 # Author: RyAn Bi def test(x,y,z): print(x) print(y) print(z) test(y=2,z =3,x=1) #形参与 ...

  5. Github概念理解备忘录

    总结: add就是用来建立跟踪,添加文件到缓存区: commit就是把文件缓存区的文件正式加到本地库中: push就是把本地库更新到远程库中: git命令的操作要在仓库所在目录下进行才有效: 在Git ...

  6. windows server 2012 valid key

    好吧,网页三剑客. 1, load disc iso 2,check ip settings, 3,net-inst-server-start 4,power Node, F2 4.1 F7 usbc ...

  7. 认识CSS中高级技巧之用户界面样式

    前端之HTML,CSS(九) CSS高级技巧 CSS用户界面样式 用户界面样式指更改用户操作样式,如更改用户的鼠标样式.表单轮廓等. 鼠标样式cursor cursor属性具有属性值有:default ...

  8. js实现瀑布流布局

    window.onload = function () { var d1 = new Waterfall(); d1.init();};//构造函数function Waterfall() { thi ...

  9. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...

  10. 【chrome】设置chrome允许WebGL从本地载入资源

    找到chrome安装路径,然后创建一个快捷方式,右击该快捷方式,在 目标 输入框中加上-allow-file-access-from-files(前面加个空格),通过该快捷方式打开chrome就可以通 ...