原型链中的prototype、__proto__和constructor的关系
先来看一张图,这张图可以说是围绕以下代码完整的描述了各对象之间的关系。接下来我们来看看如何一步步画出这张图。
function Foo(){};
var foo = new Foo();
首先,明确几点概念(现在不懂没关系),后面会不断提到:
过程1:只要创建一个函数Foo,就会为该函数创建一个prototype属性,这个属性指向函数的原型对象;
过程2:原型对象会默认去取得constructor属性,指向构造函数。
过程3:当调用构造函数创建一个新实例foo后,该实例的内部将包含一个指针__proto__,指向构造函数的原型对象。
以上两点,出现了3种对象:构造函数、构造函数的原型、构造函数创建的实例;出现了3种属性:constructor、prototype、__proto__。接下来,我们就围绕这3个对象和3个属性展开讨论。
原型对象
1)先来看看第一行代码发生了什么:
function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true
第一行代码定义了一个函数,此时就发生了过程1和过程2,如图:
(这里的Foo的原型对象一般表示为Foo.prototype,但为了更清晰理解,我们就称之为Foo的原型对象)
2)再来看看第二行代码
function Foo(){};
var foo = new Foo();
console.log(foo.__proto__ === Foo.prototype);//true
第二行代码创建了一个实例,发生了过程3,如图:
仔细观察,可以发现实例foo与构造函数之间是没有直接联系的,所有关系都是通过Foo的原型对象连接起来的。(这一点一定要明确)
3)foo继承constructor属性
function Foo(){};
var foo = new Foo();
console.log(foo.constructor === Foo);//true
console.log(foo.hasOwnProperty("constructor"));//false
实例对象foo与Foo之间没有直接联系,但foo继承了Foo的原型对象的constructor的属性,有了间接的联系。通过hasOwnProperty函数(判断对象是否拥有某个属性,不检查原型链)可以看出,实例对象foo本身没有constructor属性。
小结:到这里,博客最开始的两行代码的所有过程就结束了。不过这只是露在外面的冰山一角,我们来看看冰山下面有什么。
默认原型
我们知道,所有引用对象都默认继承了Object,所有函数的默认原型都是Object的实例。
1)同上,Object与其原型对象之间也存在如下关系
2)既然函数的默认原型都是Object的实例,那么类似以上创建foo实例时的过程,自然有了以下关系:
注意一点,此时Foo的原型对象有自己的constructor属性,自然就不用继承Object原型对象的了,所以仍然指向Foo,而不是Object。
3)Object的原型对象的原型
Object的原型对象已经是最根部了,所以它没有__proto__属性。
console.log(Object.prototype.__proto__);
Function
我们知道,函数也是对象,任何函数都可以看作是由构造函数Function实例化的对象。
1)同上,Function与其原型对象之间也存在如下关系
2)如果将Foo函数看作实例对象的话,其构造函数就是Function(),原型对象自然就是Function的原型对象;同样Object函数看作实例对象的话,其构造函数就是Function(),原型对象自然也是Function的原型对象。
3)Function的__proto__指针
Function自身可以看作通过构造函数Function实例化的对象,所以Function的__proto__指针指向Function的原型对象
4)Function的原型对象的__proto__指针
如果Function的原型对象看作实例对象的话,如前所述所有对象都可看作是Object的实例化对象,所以Function的原型对象的__proto__指向Object的原型对象。
总结:
到这里,创建一个实例对象foo时内部的联系就都说清楚了。观察图可以发现,只有一个入口(foo),一个出口(null),所以每一个对象都是同一个起源。
原型链中的prototype、__proto__和constructor的关系的更多相关文章
- JS原型链中的prototype与_proto_的个人理解与详细总结
一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
- 关于JS中原型链中的prototype与_proto_的个人理解与详细总结
一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
- JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)
一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...
- JS中原型链中的prototype与_proto_的个人理解与详细总结
1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...
- 原型链继承中的prototype、__proto__和constructor的关系
前不久写了有关原型链中prototype.__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype.__proto__和constructor的关系. 通 ...
- 深入理解JavaScript原型:prototype,__proto__和constructor
JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...
- javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...
- js delete删除对象属性,delete删除不了变量及原型链中的变量
js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){ this.name = 'gg'; } var obj = ne ...
- 原型及原型链,以及prototype和__proto__属性(笔记便于以后复习)
首先,js的数据结构有 原始类型(5种):Boolean.Number.String.Null.Underfined, 然后是引用类型:Array.Date.Error.RegExp.Function ...
随机推荐
- Python中复制、深拷贝和浅拷贝的区别
深拷贝定义(deepcopy) 在Python中,由于一切皆对象,所以任何变量都可以被引用,也即可以被赋值给任何变量.但是在Python中,给变量赋值,是区分的,一般情况下,Python中的变量赋值都 ...
- SQL Server——存储过程(Stored Procedure)、事物、触发器
存储过程(proc 或 procedure) 存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL ...
- 51nod1965. 奇怪的式子(min_25筛)
题目链接 http://www.51nod.com/Challenge/Problem.html#!#problemId=1965 题解 需要求的式子显然是个二合一形式,我们将其拆开,分别计算 \(\ ...
- BZOJ_3224 Tyvj 1728 普通平衡树 【离散化+权值线段树】
一 题面 Tyvj 1728 普通平衡树 二 分析 比较明显是可以用平衡二叉搜索树(splay)做的. 用权值线段树做,前提就是要先离散化,因为权值线段树维护的值域信息. 板子. 三 AC代码 #in ...
- [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式
[From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...
- Mac下像Windows那样带有预览图的快速切换-HyperSwitch
这东西是免费的,他家还出了一个HyperDock的收费软件. 下载:https://bahoom.com/hyperswitch/get 离线版本:(链接: https://pan.baidu.com ...
- SSH使用密钥免密码登录
使用ssh远程连接服务器,有两种身份校验方式:账号密码和秘钥.使用秘钥的方式理论上更加安全,而且免去了输入密码的步骤,使用起来更方便(尤其对于sftp,scp等). 设置 SSH,打开密钥登录功能 编 ...
- 使用nginx反向代理jenkins
1.在Jenkins 官方网站(http://jenkins-ci.org/)下载最新版本war包.拷贝到 $TOMCAT_HOME/webapps 下(不用解压).启动tomcat服务. 2.找到n ...
- 四大组件之Activity Task任务栈4种启动模式
1.启动模式 standard,创建一个新的Activity. singleTop,栈顶不是该类型的Activity,创建一个新的Activity.否则,onNewIntent. singleTask ...
- codeblocks中文编码问题
其实这是老调重弹的问题了,在windows下面出现中文乱码大多都是编码格式的问题不一致的问题,最简单的就是uft-8和gbk冲突的问题.如果一个文件本来是以utf-8存的,但是以gbk打开,当然会出现 ...