先来看一张图,这张图可以说是围绕以下代码完整的描述了各对象之间的关系。接下来我们来看看如何一步步画出这张图。

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的关系的更多相关文章

  1. JS原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  2. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  3. JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  4. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  5. 原型链继承中的prototype、__proto__和constructor的关系

    前不久写了有关原型链中prototype.__proto__和constructor的关系的理解,这篇文章说说在原型链继承中的prototype.__proto__和constructor的关系. 通 ...

  6. 深入理解JavaScript原型:prototype,__proto__和constructor

    JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...

  7. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  8. js delete删除对象属性,delete删除不了变量及原型链中的变量

    js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){ this.name = 'gg'; } var obj = ne ...

  9. 原型及原型链,以及prototype和__proto__属性(笔记便于以后复习)

    首先,js的数据结构有 原始类型(5种):Boolean.Number.String.Null.Underfined, 然后是引用类型:Array.Date.Error.RegExp.Function ...

随机推荐

  1. 总结day04 ---- 列表的切片,增删改查,以及,相关方法, 元祖的使用方法

    内容大纲 1 : 列表的索引 : 列表的切片 2 : 列表的增加内容 >1:append(char)  >2:insert(index,char) >3:extend('可迭代对象' ...

  2. 【C#】自定义新建一个DataTable(3列),循环3维矩形数组往其填充数据

    从中可以了解DataTable的新增行和列;矩形多维数组循环机制;新建了DataTable DataTable dt = new DataTable(); DataColumn dc1 = new D ...

  3. poj3207 Ikki's Story IV - Panda's Trick 2-SAT

    题目传送门 题意:在一个圆上顺时针安放着n个点,给出m条线段连接端点,要求线段不相交,线段可以在圆内也可以在圆外,问是否可以. 思路:假设一条线段,放在圆外是A,放在园内是A',那么两条线段如果必须一 ...

  4. Windows10 安装 .Net 3.5 失败的解决方案

    最近因为使用一个公司内部的工具,需要安装.Net 3.5 SP1, 却发现无论如何都安装不上,无论是通过在线和离线安装包,还是通过Windows自带的feature安装功能,每次都是会提示错误0x80 ...

  5. CentOS 7 安装RocketMQ遇到的问题汇总

    1.运行broker时提示内存无法分配 解决办法:http://www.bubuko.com/infodetail-2088958.html

  6. Mac下包管理平台homebrew的使用

    一.安装 参考:http://www.cnblogs.com/EasonJim/p/6287098.html 二.使用 假设我要安装node,命令如下: 安装软件 brew install node ...

  7. javascript全局方法与变量

    1.encodeURI(URI) a.作用:是对统一资源标识符(URI)进行编码的方法: b.参数:是一个完整的URI: c.特点:不需要对保留字以及在URI中有特殊意思的字符进行编码. (1).保留 ...

  8. 【Kafka】Kafka集群搭建

    一.准备工作 服务器:最好是多台,大于等于2 已经搭建好的zookeeper集群 下载软件kafka_2.11-0.10.0.1.tgz 二.创建目录 #创建目录 cd /opt/ mkdir kaf ...

  9. shiro学习笔记_0700_整合ssm

    现在最流行的框架就是ssm,学到最后,shiro在实际开发中,也就的整合框架.首先spring是少不了的,shiro也提供了和spring的整合包. 首先,新建maven项目: maven依赖: &l ...

  10. UBUNTU 无法解析域名 解决方法

    莫名其妙的,ubuntu 无法访问外网. ping www.taobao.com  www.baidu.com 提示无效的主机名 但是ping 外网ip 都是可以PING通的. 所以断定是 dns问题 ...