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. 【SR汇总】效果对比

    算法时间效率 -见 https://www.cnblogs.com/wxl845235800/p/10826957.html 1.SRCNN <Learning a Deep Convoluti ...

  2. json-server搭建使用

    项目中前端和后端通常是并行开发,为了减少等待后端接口开发的时间,我们经常需要在本地模拟后端接口用来测试前端效果.这种做法称之为构建前端Mock. 本地启动一个静态服务,将所需要的接口写成json文件, ...

  3. openstack基于卷快照恢复卷

    openstack基于卷快照恢复卷 基于P版本,对卷基于快照进行恢复的源码分析 1.特性描述 在pike版本中,openstack官网增加了一个新特性,Cinder volume revert to ...

  4. curl获取远程页面

    // 创建一个新cURL资源$ch = curl_init(); // 设置URL和相应的选项$options = array(CURLOPT_URL => 'http://www.w3csch ...

  5. JAVA 基础编程练习题6 【程序 6 求最大公约数及最小公倍数】

    6 [程序 6 求最大公约数及最小公倍数] 题目:输入两个正整数 m 和 n,求其最大公约数和最小公倍数. 程序分析:利用辗除法. package cskaoyan; public class csk ...

  6. 【笔记】Docker部署Odoo

    一,制作一个自己的odoo镜像odoo:yto 1,下载一个odoo10的镜像 docker pull odoo:10.0 2,按照自己的意愿修改里面的内容 docker run -it -u roo ...

  7. 前台请求响应json

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. Linux Swap的那些事

    swap是干嘛的? 在Linux下,SWAP的作用类似Windows系统下的“虚拟内存”.当物理内存不足时,拿出部分硬盘空间当SWAP分区(虚拟成内存)使用,从而解决内存容量不足的情况. SWAP意思 ...

  9. C#大文件流式压缩加解密

    * * , CancellationToken token=default) { try { FileStream zipStream = new FileStream(writeFile, File ...

  10. python基础知识(字典)

    创建字典 变量名 = {key:value,.....} zip()    转换为zip对象 空字典 变量名 = {} 变量名 = dict(key = value,....) 创建只有键的字典 fr ...