前不久写了有关原型链中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. Carte上面的作业1、2天就会丢失的问题

    发现Carte上面的作业莫名其妙就会没有,问了客户的维护人员说也没删除. 对象时间也是No Limit,但还是隔1.2天就不见了. 那说明之前配置这里还是无效 <slave_config> ...

  3. jinja url_for js 参数

    在JavaScript中,也就是客户端,向flask路由服务器端使用post请求并在url_for中传递参数,服务器端获取不到该参数, Jinja不能使用Javascript变量,如下所示: var ...

  4. python科学计算与可视化

    一.Numpy 库 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. 引用: import ...

  5. chainWebpack 和 htmlWebpackPlugin搭配使用

    const HtmlWebpackPlugin = require('html-webpack-plugin'); ... chainWebpack: config => { config .p ...

  6. Mac 10.12安装PDF浏览工具Foxit Reader

    说明:永久没费的跨平台PDF浏览工具. 下载: (链接: https://pan.baidu.com/s/1pLEAoXH密码: is5j)

  7. Mac无法将自定义图标添加到Launchpad的替代方案(桌面双击Shell运行)

    截止在几天之前的Mac OS版本都无法实现将自定义图标添加到Launchpad.我使用的是10.12. 替代的思路就是在桌面新建一个Shell文件,然后使软件在后台运行,最后就是双击Shell文件能自 ...

  8. linux主机名莫名其妙变成了bogon,并解决修改为localhost

    起因:公司网络接口做了接口认证,虚拟机桥接至物理网卡无法完成认证进行网络访问,无奈之下只能讲虚拟机网络模式更改为NAT模式,更改完成之后进行ssh登录,发现主机名发生了变化. 更改NAT模式之前 [r ...

  9. phpqrcode实现二维码(含图片)

    ---恢复内容开始--- 1,http://phpqrcode.sourceforge.net/ 下载 2,解压以后只需要一个文件 3,原生php测试: <?php include 'phpqr ...

  10. 使用 Go 的 struct tag 来解析版本号字符串

    各类软件的版本号定义虽然都不尽相同,但是其基本原理基本上还是相通的:通过特写的字符对字符串进行分割.我们把这一规则稍作整理,放到 struct tag 中,告诉解析器如何解析,下面就以 semver ...