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. 【Linux命令】find命令

    [find命令] 说明:find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查 ...

  2. TelephonyUtils

    <uses-permission android:name="android.permission.CALL_PHONE"/> import java.util.Arr ...

  3. Centos7.4.1708搭建syslog服务

    系统:centos7.4.1708环境:无互联网环境syslog使用端口为 UDP 514 将/etc/yum.repos.d目录下除CentOS-Media.repo文件所有文件重命名cd /etc ...

  4. set_multicycle_path语法说明【转载】

    (转载) (其实多看手册就知道原因了) Q:多周期路径中的检查保持时间时刻,为什么默认是在建立时间检查的前一个cycle?请大家谈谈自己的理解. 如:Set_multicycle_path -setu ...

  5. js 生成树以及关键字搜索生成树

    function main(keywords,data){ function fn(arr){ var flag = false; for(var i = 0;i <arr.length;i++ ...

  6. iptable和tcpdump的先后顺序

    tcpdump是一个用来抓取linux网络数据包的工具,而iptables是linux上的防火墙工具,两者之间的顺序是: Wire -> NIC -> tcpdump -> netf ...

  7. SpringCloud学习(SPRINGCLOUD微服务实战)一

    SpringCloud学习(SPRINGCLOUD微服务实战) springboot入门 1.配置文件 1.1可以自定义参数并在程序中使用 注解@component @value 例如 若配置文件为a ...

  8. 【VS开发】【编程开发】【C/C++开发】结构体中的数组与指针的内存分配情况说明

    [VS开发][编程开发][C/C++开发]结构体中的数组与指针的内存分配情况说明 标签:[VS开发] [编程开发] 主要是疑惑在结构体定义的数组的内存空间与指针动态分配的内存空间,在地址上连续性.以及 ...

  9. 论文阅读及复现 | Effective Neural Solution for Multi-Criteria Word Segmentation

    主要思想 这篇文章主要是利用多个标准进行中文分词,和之前复旦的那篇文章比,它的方法更简洁,不需要复杂的结构,但比之前的方法更有效. 方法 堆叠的LSTM,最上层是CRF. 最底层是字符集的Bi-LST ...

  10. canal原理&部署

    原理: https://www.jianshu.com/p/87944efe1005 部署: https://www.cnblogs.com/janes/p/9318576.html https:// ...