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. Win10设置文件夹权限报错-(提示:无法枚举容器中的对象 访问被拒绝)

    一.右击文件 选择“属性”-“安全”-“高级”,如下图 二.查看哪个用户的权限是:“完全控制”,我这里是“SYSTEM”用户. 三.选择顶部的 “更改-“高级”-“立即查找”,然后选择管理员账户“SY ...

  2. Python的并行求和例子

    先上一个例子,这段代码是为了评估一个预测模型写的,详细评价说明在 https://www.kaggle.com/c/how-much-did-it-rain/details/evaluation, 它 ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_5-07 断路器dashboard监控仪表

    笔记 7.断路器Dashboard监控仪表盘实战     简介:讲解断路器Dashboard基础使用和查看     1.加入依赖          <dependency>         ...

  4. Spring+Ibatis开发

    Spring+Ibatis开发:1.首先回忆Spring+Hibernate开发:那么时候我们是先加入的Spring,然后在加入Hibernate支持包的,而此时我们Spring+Ibatis开发,原 ...

  5. Java 实现判断 主机是否能 ping 通

    Java 实现判断 主机是否能 ping 通 代码实现如下: import java.io.IOException; import java.net.InetAddress; import java. ...

  6. vi/vim命令使用

    首先讲一些vim和vi的区别: 它们都是多模式编辑器,不同的是vim是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面.vim的这些优势主要体现在以下几个方面:1.多级撤消我们知道 ...

  7. vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输

    在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

  8. python字典操作+文件操作+函数

    师从百测besttest今天老牛教了些函数调用的知识,布置了个作业如下: # 1.写一个商品管理的小程序# 2.商品存在文件里面# 1.添加商品# 输入产品名称.颜色.价格# 要校验商品是否存在,价格 ...

  9. SDF:Software-Defined Flash for Web-Scale Internet Storage System

    一.参考 http://www.csdn.net/article/a/2013-12-18/309280 http://gtstorageworld.blog.51cto.com/908359/126 ...

  10. 什么是JWT(Json Web Token)

    什么是 JWT (Json Web Token) 用户认证是计算机安全领域一个永恒的热点话题. JWT 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519). 该to ...