在开始之前,必须要知道的是:对象具有__proto__、constructor(函数也是对象固也具有以上)属性,而函数独有prototype

在博客园看到一张图分析到位很彻底,这里共享:

刚开始看这图很懵,根本看不懂,但是细品,多品后恍然大悟,然后总结出以下几点,很重要切记

1、切记:对象的内置属性__proto__一定指向的是它构造函数的原型对象

2、切记:对象的内置属性__proto__.__proto__一定指向Object原型对象(Object.prototype)

3、切记:对象的内置属性__proto__.__proto__.__proto__一定最终为null

4、切记:每个函数都具有独有的prototype,这个对象包含了此函数的所有实例共享的属性和方法(函数=》对象)

5、切记:对象的属性__proto__指向的是其构造函数的原型对象(对象=》对象),而对象的属性constructor指向的是其构造函数(对象=》函数)

一定要把上面几句彻底搞懂,然后随便上几个例子

var abc = {};

=====================

var abc1= "111";

=====================

var abc2=123;

=====================

function abc3(){}

=====================

var abc4=new Date();

=====================

function AcFun(){};

var abc5=new AcFun();

=====================

看打印结果:

console.log(abc.__proto__ === Object.prototype);  //true

console.log(abc1.__proto__ === String.prototype); //true

console.log(abc2.__proto__ === Number.prototype); //true

console.log(abc3.__proto__ === Function.prototype); //true

console.log(abc3.prototype.__proto__ === Object.prototype); //true

console.log(abc4.__proto__ === Date.prototype); //true

console.log(abc5.__proto__ === AcFun.prototype); //true

console.log(AcFun.prototype.__proto__ === Object.prototype); //true

console.log(AcFun.__proto__ === Function.prototype); //true

console.log(abc4.__proto__.__proto__ === Object.prototype); //true

console.log(abc4.__proto__.__proto__.__proto__ === null); //true

console.log(abc3.constructor === Function); //true

console.log(abc5.constructor === AcFun); //true

console.log(abc3.constructor.__proto__=== Function.prototype); //true

console.log(abc3.constructor.__proto__.__proto__ === Object.prototype); //true

console.log(abc3.prototype.__proto__.constructor === Object); //true

console.log(AcFun.prototype.constructor === AcFun); //true

console.log(AcFun.__proto__.constructor === Function); //true

最后总结:所有对象都有属性__proto__及constructor(包括函数),只有函数独有prototype,所有对象的__proto__都指向其构造函数的原型(对象),consturctor指向的其构造函数(函数),而函数的prototype则指向其函数原型对象(对象),及f1.__proto__ === Foo.prototype、f1.constructor === Foo

彻底搞懂js __proto__ prototype constructor的更多相关文章

  1. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  2. 彻底搞懂 JS 中 this 机制

    彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

  3. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  4. 一文搞懂 js 中的各种 for 循环的不同之处

    一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...

  5. 彻底搞懂js原型与原型链

    原生的原型链 function fn(){},fn 为 Function的一个实例,原型链为 null -> Object -> Function -> fn: fn.__proto ...

  6. Spirit带你彻底搞懂JS的6种继承方案

    JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){ ...

  7. 一文搞懂js中的typeof用法

    基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好 ...

  8. 通过一张简单的图,让你彻底地搞懂JS的==运算

    大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读ECMAScript规范的基础上,我画了一 ...

  9. 晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?

    晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...

随机推荐

  1. linux 中断softirq tasklet

    硬中断为什么不能休眠--- 中断线程以及软中断解决了什么问题---- 软中断cb函数是否允许相应本地中断,什么时候开启中断关闭中断---- 什么是软中断上下文------- 什么是tasklet 和软 ...

  2. 2种方式(线程间通信/互斥锁)实现两个线程,一个线程打印1-52,另一个线程打印字母A-Z,打印顺序为12A34B56C......5152Z

    //2019/06/13 本周HT面试遇到的问题,答得不是很好,自己重新做一下.面试只需要写出线程间通信的方式,//我当时大致知道思路,因为之前看过马士兵老师的多线程视频,但是代码写出来估计编译都是报 ...

  3. 慢话crush-各种crush组合

    前言 ceph已经是一个比较成熟的开源的分布式存储了,从功能角度上来说,目前的功能基本能够覆盖大部分场景,而社区的工作基本上是在加入企业级的功能和易用性还有性能等方面在发力在,不管你是新手还是老手,都 ...

  4. DB2 建表,添加字段,删除字段,修改字段等常用操作

    转载:http://blog.sina.com.cn/s/blog_67aaf4440100v01p.html,稍作修改. --创建数据库 create database Etp; --连接数据库 c ...

  5. c++11-17 模板核心知识(五)—— 理解模板参数推导规则

    Case 1 : ParamType是一个指针或者引用,但不是universal reference T& const T& T* Case 2 : ParamType是Univers ...

  6. CSS opacity设置不透明度

    1.opacity设置不透明度 opacity会将含有这个属性的子类都变成具有opacity属性,可以改变元素.元素内容.字标签的不透明度.而rgba只会改变设置的那个背景颜色的透明度效果 <! ...

  7. SpringSecurity了解

    在web开发中,安全第一位!!过滤器.拦截器~ 属于非功能性需求. 做网站:安全应该在什么时候考虑?设计之初!! 漏洞,隐私泄露~ 假设架构一旦确定~ shiro和SpringSecurity的区别: ...

  8. CDR魔镜插件是什么,有哪些功能?

    CDR魔镜插件是一款功能强大的CorelDRAW插件,很多CDR用户很早直接就有接触,因其强大的功能性和快速运行的特点被广大用户所喜爱,没有繁琐的选项,无论新人小白,还是制图高手都能够很快的适应,实现 ...

  9. 三 CSS基础入门

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  10. 浅谈树链剖分 F&Q

    这是一篇迟来的博客,由于我懒得写文章,本篇以两个问题阐述笔者对树链剖分的初步理解. Q1:树链剖分解决什么问题? 树链剖分,就是把一棵树剖分成若干连续的链,将这些链里的数据映射在线性数组上维护.比方说 ...