prototype: 任何函数(箭头函数除外)都具有一个 prototype属性,该属性是一个对象。一般情况下只有声明function的变量才会有(自动生成)prototype这个属性,而function通过在它的名字前加new 可以创建出属于它的实例。是函数所独有的。

__proto__: 引用类型的__proto__属性是浏览器给他们添加的一个自定义属性,属性值也是一个普通对象。引用类型的__proto__属性指向它们的构造函数的prototype属性。对象所独有的。

constructor: 是一个构造函数,是一种特殊的method。在生成prototype时自动生成的属性,其指向函数本身(在申明函数时,js自动创建该函数的peototype属性)。在用new给一个类创建对象的时候会自动调用该类的构造函数。对象所独有的。

let fn = function() {}
let fn2 = new fn()

关系图解:

prototype

任何函数(箭头函数除外)都具有一个 prototype属性

__proto__

一个对象的__proto__指向产生它的类的prototype。function声明的变量的__proto__指向Function的prototype,其它对象的__proto__指向Object的prototype。每个函数的prototype是一个对象,prototype的__proto__指向一定是Object.prototype。

特殊的Function跟Object

Function:

从控制台分别打印Function的prototype跟__proto__,可以明显的看出来Function的__proto__指向了自己的prototype。

Object:

如上图,Object与Function的__proto__的指向是相同的,都是指向了Function的prototype。

如上图,Object的proptotype又有些不同,没有灰色的<prototype>,在控制台中也可以清楚的看到Object的__proto__指向了null,也可以讲Object.prototype看作为一切之源。

Object的prototype称为源型,将图逆推,

所有通过这个源型创造出的都是object,第一步先创造出Function的prototype,因此这个prototype的__proto__指向源型,然后再通过这个prototype造出Function,因此Function的__proto__指向它自己的prototype,然后用Function造出Object,因此Object的__proto__指向Function的prototype。

peototype是原型,__proto__所指向的以及其后的所有peototype称为原型链。

constructor

对象独有的,它是从一个对象指向一个函数,含义就是指向该对象的构造函数。

根据上文逆推的结论:所有函数和对象最终都是由Function构造函数得来,所以constructor属性的终点就是Function这个函数。

当一个对象不具备constructor时会沿着__proto__到原型链中去找。

总结

感谢两篇博文,内容主要参考博文:https://blog.csdn.net/cc18868876837/article/details/81211729#4_constructor_20https://blog.csdn.net/backee/article/details/83378772

prototype,__proto__,constructor理解的更多相关文章

  1. Javascript Prototype __proto__ constructor 三者的关系

    JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...

  2. js in depth: Object & Function & prototype & __proto__ & constructor & classes inherit

    js in depth: Object & Function & prototype & proto & constructor & classes inher ...

  3. 实践一些js中的prototype, __proto__, constructor

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  4. prototype,__proto__,constructor

    proto属性: 所有对象都有此属性.但它不是规范里定义的属性,并不是所有JavaScript运行环境都支持.它指向对象的原型,也就是你说的继承链里的原型.通过Object.getPrototypeO ...

  5. 对于JavaScript对象的prototype和__proto__的理解

    一.Object和Function的关系: 刚学JavaScript的时候,看书上说JavaScript中万物皆对象,而javascript中的其他对象都是从Object继承而来,包括内置对象.瞬间觉 ...

  6. Prototype and Constructor in JavaScript

    The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JA ...

  7. 深入理解JavaScript原型:prototype,__proto__和constructor

    JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...

  8. 再次理解JS的prototype,__proto__和constructor

    个人总结: 下面这篇文章很好的讲解了js原型,原型链,个人的总结是要记住这三个属性 prototype.__proto__和constructor 首先明确,js中一切都是对象object(A). ( ...

  9. javascript中prototype、constructor以及__proto__之间的三角关系

    三者暧昧关系简单整理 在javascript中,prototype.constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备 ...

  10. 关于JS call apply 对象、对象实例、prototype、Constructor、__proto__

    关于call与apply的理解容易让人凌乱,这里有个方法可供参考 tiger.call(fox,arg1,arg2...) tiger.apply(fox,[arg1,arg2...]) 理解为 fo ...

随机推荐

  1. VC 实现程序只运行一个实例,并激活已运行的程序

    转载:http://blog.sina.com.cn/s/blog_4b44e1c00100bh69.html 进程的互斥运行:CreateMutex函数实现只运行一个程序实例 正常情况下,一个进程的 ...

  2. Java中AWT、Swing与SWT三大GUI技术的原理与效率差异

    Java中AWT.Swing与SWT三大GUI技术的原理与效率差异 转 https://blog.csdn.net/weixin_37703598/article/details/81843810   ...

  3. 关闭tslint

    只需要在tslint.config里配置一行 "defaultSeverity": "none",

  4. Python - 排序( 插入, 冒泡, 快速, 二分 )

    插入排序 算法分析 两次循环, 大循环对队列中的每一个元素拿出来作为小循环的裁定对象 小循环对堆当前循环对象在有序队列中寻找插入的位置 性能参数 空间复杂度 O(1) 时间复杂度 O(n^2) 详细代 ...

  5. 让 Nginx 支持 WAF 防护功能实战

    ngx_lua_waf 安装说明文档 作者github地址: https://github.com/loveshell/ngx_lua_waf ———————————————————————————— ...

  6. jenkins配置记录

    jenkins配置记录 http://www.cnblogs.com/kevingrace/p/6022447.html

  7. Linux服务知识点总结

    一.firewalld防火墙 1.firewalld简述 firewalld:防火墙,其实就是一个隔离工具:工作于主机或者网络的边缘.对于进出本主机或者网络的报文根据事先定义好的网络规则做匹配检测,对 ...

  8. char、varchar、nchar、nvarchar四种类型

    char,nchar是定长,如果没达到指定的长度时将自动以英文空格在其后面填充.优势在于速度较高.varchar,nvarchar属于变长,如果没有达到指定的长度时,不会将自动以英文空格在其后面填充. ...

  9. 如何禁止谷歌浏览器隐藏url的www前缀

    若要将Chrome浏览器的设置恢复为隐藏HTTP.HTTPS以及WWW前缀,则只需再次进入此页面: chrome://flags/#omnibox-ui-hide-steady-state-url-s ...

  10. 人渣给我笔记本网络适配器里加的的“bluetooth设备(个人局域网)”,卸载不掉