彻底搞懂js __proto__ prototype constructor
在开始之前,必须要知道的是:对象具有__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的更多相关文章
- 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...
- 让你彻底搞懂JS中复杂运算符==
让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...
- 一文搞懂 js 中的各种 for 循环的不同之处
一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...
- 彻底搞懂js原型与原型链
原生的原型链 function fn(){},fn 为 Function的一个实例,原型链为 null -> Object -> Function -> fn: fn.__proto ...
- Spirit带你彻底搞懂JS的6种继承方案
JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){ ...
- 一文搞懂js中的typeof用法
基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好 ...
- 通过一张简单的图,让你彻底地搞懂JS的==运算
大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读ECMAScript规范的基础上,我画了一 ...
- 晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?
晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...
随机推荐
- kubernetes存储类与PV与PVC关系及实践
StorageClass & PV & PVC关系图 Volumes是最基础的存储抽象,其支持多种类型,包括本地存储.NFS.FC以及众多的云存储,我们也可以编写自己的存储插件来支持特 ...
- 使用create-react-app 搭建react + ts + antd框架
一.创建项目 使用npx create-react-app (项目名) --template typescript 创建项目 ①如果App.tsx文件有如下报错: (没有报错的请忽略) 需要将tsco ...
- kali ms17_010 内网环境下渗透笔记
一.先用Router Scan 扫描 看清楚了网络拓扑结构. 二.使用MS17-010批量扫描工具 下载:ms17-010Scan.exe (也可以用kali自带的nmap和ms17-10模块扫) ...
- 网站实现微信扫码登录 php
微信开放平台账号一个,必须是商户,不然你也开不了 1.在开放平台创建应用,并设置回调地址(域名即可) 2.生成二维码,前端代码,用户扫码后会给你的回调地址发送code <span id=&quo ...
- 如何使用iMindMap制作更专业的时间计划
时间计划无论是在日常生活中,还是在工作中,都显得极为重要.小到每周的购物时间规划,大到大型项目的时间管理,时间计划都会如影随形.虽然时间计划很重要,但很多人都会忽视这种重要性,可能只会在台本日历上作一 ...
- 用MathType怎么把分数打出来
分数是生活中最常见的数,作为大学生学习高数概率论更是离不开分数.分数是指整体的一部分,或更一般地,任何数量相等的部分.分数是一个整数a和一个正整数b的不等于整数的比. 当在日常用语中说话时,分数描述了 ...
- 利用perspective 和 transform 里面的几个参数来实现旋转照片墙
旋转照片墙 首先,来看下,是什么效果吧,上效果图 ↓ 其实这个东西,很容易制作,先说下思路, 把照片都给叠在一起,然后 rotateY 旋转,给每张图片 旋转不一样的角度能构成一圈, 然后transl ...
- Pytest学习(十一)- 失败重跑插件pytest-rerunfailures的使用
环境依赖 Python 3.5, 最高 3.8, or PyPy3 pytest 5.0或更高版本 插件安装 pip3 install pytest-rerunfailures -i http://p ...
- Let's Do 本地开发智能合约
上篇文章我们发了个币,有人抱怨在线(remix)写代码不爽,好吧,那就来看下怎么在本地开发智能合约? 一.安装开发环境 1.安装Node,Node v8.9.4或更高版本 我安装的是: 2.集成开发框 ...
- 牛客练习赛68 牛牛的无向图 题解(krusal思想)
题目链接 题目大意 要你查询q 次询问,每次询问给出一个 L ,询问\(\sum_{i=1}^n\sum_{j=i+1}^n[d(i,j)<=L]\).其中 [C] 表示当命题 C 为真的时候为 ...