Javascript深入__proto__和prototype的区别和联系
有一个一个装逼的同事,写了一段代码
function a(){}
a.__proto__.__proto__.__proto__
然后问我,下面这个玩意a.__proto__.__proto__.__proto__
是啥,然后我一脸懵逼,prototype还知道一点,这个__proto__
,还来三个,是个什么鬼。于是我一直不能放下这个问题,虽然我很懒,很不喜欢费脑子,但是这个坎还是过不去,最近两天研究了大半天,就有了这篇文章。
我先说出答案, 上面的值为 null。我还很负责的告诉你,下面的_a.__proto__.__proto__.__proto__
也是null
function a(){}
var _a = new a();
_a.__proto__.__proto__.__proto__
先来一张非常经典的图,真的是非常经典,你看懂他,你就懂了整个世界,然后整个世界就等着你去拯救整个世界。)
正文之前,__proto__和prototype
都谁有的问题
typeof === object的有__proto__
, null和undefined都没有
typeof === function的有__proto__
和prototype
__proto__ 是什么__proto__
一般情况指向的是该对象的构造函数的prototype,一般情况,因为还有很二般的情况。
先来看个简单的例子, 下面的输出是true
function a(){}
var _a = new a()
console.log(_a.__proto__ === a.prototype)
那我问_a.__proto__.__proto__
为什么呢,你会这么推导么,
依据上面_a.__proto__ === a.prototype
,那么_a.__proto__.__proto__
就等同a.prototype.__proto__
, 那么我们就再推到等于 a.prototype.constructor.prototype
,然后你去一比,结果是false。
_a.__proto__.__proto__ === a.prototype.constructor.prototype
// false
几条规则
这个先不纠结, 我们先看看上图,我们先得知道或者记住这几个规则
Object.prototype.__proto__ === null
不要纠结,铁律Object.__proto__ === Function.prototype
Object,Number, Error等等这些函数都是Function创建的,下面就说明
这些的constructor就是Function,这里比较有意思的就是 Function.constructor也是Function。
那就有Object.__proto__ === Function.prototype === Function.__proto__
Object.constructor.prototype === Function.prototype
// true
Function.constructor === Function
// trueFunction.prototype.__proto__ === Object.prototype
这个就是这样的设计,Function.prototype.constructor === Object
// false进入正题
有这几个基本东西,我们就可以来推导了。
先看下面的代码,
js 我们来推到 aaa.__proto__.__proto__.__proto__
function aaa(){}
var _aaa = new aaa()
aaa.__proto__
aaa构造函数是Functionaaa.constructor === Function
aaa.__proto__ === Function.prototype
aaa.__proto__.__proto__
aaa.__proto__.__proto__ === Function.prototype.__proto__
依据Function.prototype.__proto__ === Object.prototype
aaa.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype
aaa.__proto__.__proto__.__proto__
aaa.__proto__.__proto__.__proto__ === Object.prototype.__proto__
依据Object.prototype.__proto__ === null
aaa.__proto__.__proto__.__proto__ === null
还是上面代码,我们接着推导_aaa.__proto__.__proto__.__proto__
_aaa.__proto__
_aaa的构造函数是 aaa_aaa.constructor === aaa
_aaa.__proto__ === _aaa.constructor.prototype
_aaa.__proto__ === aaa.prototype
_aaa.__proto__.__proto__
_aaa.__proto__.__proto__ === aaa.prototype.__proto__
参考图,Foo.prototype.__proto__ === Object.prototype
_aaa.__proto__.__proto__ === aaa.prototype.__proto__ === Object.protype
_aaa.__proto__.__proto__.__proto__
_aaa.__proto__.__proto__.__proto__ === Object.protype.__proto__
依据Object.prototype.__proto__ === null
_aaa.__proto__.__proto__ === null
正文延伸, 加上继承关系
我们再来看看,带继承关系的
function aaa(){}
function bbb(){}
bbb.prototype = new aaa()
var _bbb = new bbb();
bbb.__proto__.__proto__.__proto__ === null
这个没啥好说,
关键来看看 bbb.prototype.__proto__.__proto__.__proto__
bbb.prototype.__proto__
bbb.prototype.__proto__ === bbb.prototype.constructor.prototype
bbb.prototype的原型是 aaa的实例, bbb原型的构造函数就是aaa,所以bbb.prototype.__proto__ === aaa.prototype
bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ === aaa.prototype.__proto__
参考图,Foo.prototype.__proto__ === Object.prototype
bbb.prototype.__proto__.__proto__ === Object.prototype
bbb.prototype.__proto__.__proto__
bbb.prototype.__proto__.__proto__ .__proto__=== Object.prototype.__proto__ === null
再来看看_bbb.__proto__.__proto__.__proto__ .__proto__
_bbb.__proto__
_bbb.__proto__ === bbb.prototype
- _bbb.proto.proto
_bbb.__proto__.__proto__ === bbb.prototype._proto__ === bbb.prototype.constructor.prototype === aaa.prototype
- _bbb.proto.proto.proto
_bbb.__proto__.__proto__.__proto__ === aaa.prototype.__proto__
参考图Foo.prototype.__proto__ === Object.prototype
_bbb.__proto__.__proto__.__proto__ === aaa.prototype.__proto__ === Object.prototype
_bbb.__proto__.__proto__.__proto__.__proto__
_bbb.__proto__.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null
正文 再加量
看看如下代码
function aaa(){}
var _aaa = new aaa()
function bbb(){}
bbb.prototype = new aaa();
var _bbb = new bbb();
function ccc(){}
ccc.prototype = new bbb()
var _ccc = new ccc()
我们再来分析_ccc的prototype
和__proto__
,你们会说,你有完没完
,那我就不分析了,我来推断:
推断:
任何自定义的function本身,三次
__proto__
必然是null,也就是往上找三代
包括Function,Object, Error等等
Fucntion.proto 看图,依据Object.__proto__ === Function.prototype === Function.__proto__
我们来推导Function.__proto__.__proto__ .__proto__
第一步:Function.__proto__ === Function.prototype
第二步:Function.__proto__.__proto__ === Function.prototype.__proto__ === Object.protetype
第三步:Function.__proto__.__proto__ .__proto__ === Object.protetype.__proto__ === null
都是Function构造出来的
我们来测试一下cccccc.__proto__.__proto__.__proto__ === null // true
继承关系的function fn,假设继承次数为n,
_fn = new fn();
那么_fn.__protot__[3 + n] === null
_ccc应该是3+2就是5次_ccc.__proto__.__proto__.__proto__.__proto__.__proto__ === null // true
继承关系的function fn,假设继承次数为n
推到fn.prototype.__proto__[3+n-1]
ccc应该是 4次__proto__
ccc.prototype.__proto__.__proto__.__proto__.__proto__ === null // true
当然上面关联的关系,就自己慢慢看吧
正文之外, class
下面的代码也是遵守规则,至于为什么,问自己喽。
class aaa {}
class bbb extends aaa{}
class ccc extends bbb{};
var _ccc = new ccc()
关于Number,Boolen, String,Function, Date, Array, RegExp等的__proto_
_和
prototype.proto`
__proto__
因为这些都是Function创建出来的函数,__proto__
在函数上时就是表示构造函数的prototype,所以.__proto__ === .constrcutor.prototype === Function.prototype
.prototype.__proto__
这些老骨头不遵循__proto__
为构造函数的prototype
在上面提到过了,Function.prototype.__proto__ === Object.prototype
,
类推,这些内置的老骨头的.prototype.__proto__ === Object.prototype
## 总结
总结, 特别需要记忆的:
Object.prototype.__proto__ === null
Function.prototype.__proto__ === Object.prototype
内置Number,Boolen, String,Function, Date, Array, RegExp等一样Object.__proto__ === Function.prototype === Function.__proto__
联系2,这些东西都是Function创建出来的Math, JSON的__ptoto__是 Object.prototype
typeof 可以看出来这两个是object,而不是Function- function a(){} 这样创建出来,没有继承关系的函数
a.prototype.__proto__ === Object.prototype
- 有继承关系的function看上面的推断
- 对象字面量和new Object() 比如, var a ={}, b = new Object(), c = [];
a.__proto__ === a.constructor.prototype === Object.protype
a.__proto__.__proto__ === Object.protype.__proto__ === null
- 基本数据类型string,number,boolean,比如 var a = '', b=10, c= false,
b.__proto__ === b.constructor.prototype === Number.prototype
b.__proto__.__proto__ === Number.prototype.__proto__ === Object.prototype
b.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null
- null和undefined没有__proto__
最终
- 看图
- 浏览器输入
xx.__proto__
或者xx.prototype自己看去
Javascript深入__proto__和prototype的区别和联系的更多相关文章
- 【JavaScript】__proto__和prototype的区别和联系【整理】
var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } Chrome运行结果: 提示找不 ...
- 谈谈__proto__和prototype的区别
我想javascript中的原型链一直想很多初学javascript的同学感到非常的困惑,今天看了一些文章,结合自己的理解,把原型链这个东西从新来整理一下,如有不对之处,望大家帮忙指出. 首先,我们应 ...
- js中__proto__和prototype的区别和关系? 这样好理解多了
原型的概念 真正理解什么是原型是学习原型理论的关键.很多人在此产生了混淆,没有真正理解,自然后续疑惑更多. 首先,我们明确原型是一个对象,其次,最重要的是, Every function has a ...
- JavaScript中__proto__与prototype的关系
一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...
- js中__proto__和prototype的区别和关系?
_proto__(隐式原型)与prototype(显式原型)1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性 ...
- 再说javascript 的__proto__ 和prototype 属性
过了一段时间,没写 原生的 javascript 的了,感觉天天在用框架写代码,框架写代码完全限定死了你所需要思考的东西,只是在处理一些业务逻辑,真正的代码 都感觉不会写了. 突然发现,框架用的不熟悉 ...
- JavaScript的__proto__、prototype和继承
JavaScript也是可以“继承”的! 各位看官或是好奇,或是一知半解.什么是prototype,__proto__,constructor.哪种继承方式好.今天就在这交流交流. 什么是protot ...
- JavaScript中__proto__与prototype的关系(转)
一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...
- 深入__proto__和prototype的区别和联系
前话 有一个一个装逼的同事,写了一段代码 function a(){} a.__proto__.__proto__.__proto__ 然后问我,下面这个玩意a.__proto__.__proto__ ...
随机推荐
- 【luogu P1955 [NOI2015]程序自动分析】 题解
题目链接:https://www.luogu.org/problemnew/show/P1955 并查集操作,1e9要离散化,数组要开大一些,操作前先执行合并操作 样例好毒啊(全是排好序的) #inc ...
- trunc()
select to_char(sysdate, 'yyyy-mm-dd hh24:mi:ss'), to_char(trunc(sysdate), 'yyyy-mm-dd hh24:mi:ss') f ...
- Oracle11gR2(ASM,UDEV)的RAC搭建安装
基本信息: 1) 安装包: 操作系统:rhel-server-6.7-x86_64-dvd.iso rac安装包: Oracle11gR2:linux.x64_11gR2_database_1of2. ...
- Ansible常用功能
Ansible 是近几年十分流行的DevOps工具架构什么的我就不在这里赘述了,网上一找一堆 这里写点我在ansible常用功能 1.命令串 #copy文件 #ansible host文件中的主机组 ...
- MySQL学习【第十三篇日志管理】
一.MySQL日志类型 日志文件 选项 文件名/表名称 程序 错误日志 --log-error host_name.err N/A 常规日志 --general_log host_name. ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- 转 Linux会话浅析(写得极好,表述清楚语言不硬)
说起会话,我们经常登录到linux系统,执行各种各样的程序,这都牵涉到会话.但是,一般情况下我们又很少会去关注到会话的存在,很少会去了解它的来龙去脉.本文就对linux会话相关的信息做一些整理,看看隐 ...
- Redis 4.0.X版本reshard出现错误的解决办法
原文链接:https://my.oschina.net/juluking/blog/1606222 原作者的版本是Redis 4.0.6,我的版本是4.0.8,所以猜测是否所有4.0.x版本都有此问题 ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
- C语言实现选择排序算法
新人新气象,我又来了,C语言实现选择排序.很基础的东西,原理什么的就不扯了. #include <stdio.h> #include <stdlib.h> #include & ...