图来源于:http://www.cnblogs.com/smoothLily/p/4745856.html

个人的理解:

1. 所有对象都有 __proto__属性,返回该对象的原型对象。例如f1由语句var f1 = new Foo()生成,那么f1.__proto__就是由构造函数Foo生成的原型对象Foo.prototype.

f1.__proto__ === Foo.prototype; //true

2. 所有函数具有prototype属性,这是一个指针,指向函数所生成对象的原型对象。Foo.prototype就是由 new Foo()函数所生成的这一类对象的原型,原型是可以被修改的:

function Foo(){};
var f1 = new Foo();
Foo.prototype.name = "emily";
f1.name; // "emily"

如上代码所示,先生成对象f1,然后修改其对象原型,给它增加了一个name属性。f1因此也有了name属性。

3. 但是函数也是一种对象,因此它也有__proto__属性,即也有其原型对象。对于函数(对象)Foo来说:

Foo.__proto__ === Function.prototype; // true

Function.prototype就是由new Function()所生成的这一类对象的原型。

函数(对象)Foo的原型正是由Function函数所生成的原型。

4. JavaScript的内置函数如Function, Object, Array, Date等,都既是构造函数,又是对象,因此他们都有prototype和__proto__属性。

不同的是prototype指向的是其本身作为构造函数作用时所生成的对象的原型对象

而__proto__属性是返回其本身作为对象的原型对象

Function.__proto__ === Function.prototype; //true
Array.__proto__ === Function.prototype; //true
Date.__proto__ === Function.prototype; //true
Object.__proto__ === Function.prototype; //true
Foo.__proto__ === Function.prototype; //true

5. 如上所示,所有(构造函数)对象的原型对象都是Function.prototype,这也是一个对象,在console中查看该对象,发现它返回的是一个空函数:

Function.prototype.toString(); // 返回"function () {}"

那么这个对象有没有原型对象呢,它的__proto__返回什么呢?

Function.prototype.__proto__ === Object.prototype; // true

所以

Function.__proto__.__proto__ === Object.prototype; // true

Array.__proto__.__proto__ === Object.prototype; // true
Date.__proto__.__proto__ === Object.prototype; // true
Object.__proto__.__proto__ === Object.prototype; // true
Foo.__proto__.__proto__ === Object.prototype; // true

6. Object.prototype也是一个对象,因此其__proto__属性返回:

Object.prototype.__proto__; // null

因此

Function.__proto__.__proto__.__proto__; // null
Array.__proto__.__proto__.__proto__; // null
Date.__proto__.__proto__.__proto__; // null
Object.__proto__.__proto__.__proto__; // null
Foo.__proto__.__proto__.__proto__; // null
f1.__proto__.__proto__.__proto__; // null

任何对象向上回溯最终都会到null。

7. 关于原型对象的constructor属性:每个函数对象都有名为“prototype”的属性,用于引用原型对象。此原型对象又有名为“constructor”的属性,它反过来引用函数本身。这是一种循环引用

Foo.prototype.constructor === Foo; //true

总结:理解这个概念的关键点就在于,__proto__是对象的属性,是用来向上查找其原型对象的。

而prototype是函数的属性,其作用指向该构造函数所生成对象的原型。

此外在stackoverflow上对这个问题的回答很有意思:

__proto__ is the actual object that is used in the lookup chain to resolve methods, etc.

prototype is the object that is used to build __proto__ when you create an object with new:

(new Foo).__proto__ === Foo.prototype; // 函数调用prototype属性用来构造对象原型

(new Foo).prototype === undefined; // 对象没有prototype属性
 

JavaScript: __proto__和prototype的更多相关文章

  1. JavaScript - __proto__和prototype,原形

    参考 https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript 区别 构造函数中的prototype创建 ...

  2. JavaScript中__proto__与prototype的关系

    一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...

  3. 15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

    大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...

  4. javascript--15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

    大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...

  5. 对于JavaScript对象的prototype和__proto__的理解

    一.Object和Function的关系: 刚学JavaScript的时候,看书上说JavaScript中万物皆对象,而javascript中的其他对象都是从Object继承而来,包括内置对象.瞬间觉 ...

  6. Javascript中的__proto__、prototype、constructor

    今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__pro ...

  7. JavaScript中的prototype和__proto__细致解析

    最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...

  8. JavaScript:Function/Object/prototype/__proto__

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

  9. javascript中构造器(函数)的__proto__与prototype初探

    背景:最近没什么需求,快要闲出屁了,所以重温了一下js的原型,结果大有收获,且偶然看到Snandy大神的<JavaScript中__proto__与prototype的关系> 这篇文章,感 ...

随机推荐

  1. SAP成都研究院的体育故事

    "平生不识陈近南,纵称英雄也枉然". 这是清朝反government武装圈子里流传的一句话,给予了天地会CEO陈近南极高的评价. 同样,如果您是SAP体育运动界的一份子,而您还不认 ...

  2. SAP成都研究院C4C光明左使:SAP Cloud for Customer 使用SAP UI5的独特之处

    大家好,今天的文章来自我的同事,Yang Joey. 2017年7月,SAP成都研究院C4C开发团队刚刚建立.某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:&q ...

  3. 为PyCharm添加不同解释器

    正常大家会使用Python官网的安装包,即Python.由于自己尝试了下IronPython,但打开PyCharm查看配置,发现并没有IronPython的解释器,这个需要自己加进去,如图: &quo ...

  4. geoNear查询 near查询的升级版

    geoNear查询可以看作是near查询点进化版 geoNear查询使用runCommand命令进行使用,常用使用如下: db.runCommand({ geoNear:<collection& ...

  5. 什么是SAD,SAE,SATD,SSD,SSE,MAD,MAE,MSD,MSE?

    SAD(Sum of Absolute Difference)=SAE(Sum of Absolute Error)即绝对误差和 SATD(Sum of Absolute Transformed Di ...

  6. java算法面试题:编写一个程序,将a.txt文件中的单词与b.txt文件中的单词交替合并到c.txt文件中,a.txt文件中的单词用回车符分隔,b.txt文件中用回车或空格进行分隔。

    package com.swift; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File ...

  7. 将xml转为array 输出xml字符

    //将xml转为array private function fromXml($xml){ // 禁止引用外部xml实体 libxml_disable_entity_loader(true); ret ...

  8. 18.VUE学习之-v-for操作对象与数值

    一组数组时的循环 二组数组时的循环 另外可以v for 20 可以直接操作数字 <!DOCTYPE html> <html lang="en"> <h ...

  9. 数据结构-模式匹配串算法(KMP)

    #include<cstdio> #include<iostream> #include<string> #include<cstring> #incl ...

  10. 关于json数据中的多反斜杆转译--StringEscapeUtils.unescapeJava(踩过的坑)

    一.需求 现有一个字符串str String str = "{\\\"name\\\":\\\"spy\\\",\\\"id\\\\&quo ...