__proto__ VS. prototype in JavaScript

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/#a-prototype-chain

// a constructor function
function Foo(y) {
// which may create objects
// by specified pattern: they have after
// creation own "y" property
this.y = y;
}

__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;
( new Foo ).prototype === undefined;

How does __proto__ differ from constructor.prototype?

I've been trying to wrap my head around this recently and finally came up with this "map" that I think sheds full light over the matter

I know I'm not the first one making this up but it was more interesting figuring it out that finding it :-). Anyway, after that I found e.g. this another diagram that I think says basicly the same:

Javascript object layout

The most surprising thing for me was discovering that Object.__proto__ points to Function.prototype, instead of Object.prototype, but I'm sure there's a good reason for that :-)

I paste the code mentioned in the image here as well for if anyone wants to test it. Note that some properties are added to the objects for making easy to know where we are after some jumps:

Object.O1='';
Object.prototype.Op1=''; Function.F1 = '';
Function.prototype.Fp1 = ''; Cat = function(){};
Cat.C1 = '';
Cat.prototype.Cp1 = ''; mycat = new Cat();
o = {}; // EDITED: using console.dir now instead of console.log
console.dir(mycat);
console.dir(o);

The reason why Object.__proto__ points to Function.prototype is because Object() by itself is a native function that instantiates an empty object. Therefore, Object() is a function. You'll find that all the other major native types' __proto__ properties point to Function.prototype. Object, Function, String, Number, and Array all inherit the Function prototype.

JavaScript深入之从原型到原型链

__proto__ VS. prototype in JavaScript的更多相关文章

  1. JavaScript中__proto__与prototype的关系

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

  2. JavaScript中__proto__与prototype的关系(转)

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

  3. JS的__proto__与prototype

    一.prototype和__proto__的概念 prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象.它是显示修改对象的原型的属性. __p ...

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

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

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

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

  6. Javascript中的__proto__、prototype、constructor

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

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

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

  8. JavaScript: __proto__和prototype

    图来源于:http://www.cnblogs.com/smoothLily/p/4745856.html 个人的理解: 1. 所有对象都有 __proto__属性,返回该对象的原型对象.例如f1由语 ...

  9. 再说javascript 的__proto__ 和prototype 属性

    过了一段时间,没写 原生的 javascript 的了,感觉天天在用框架写代码,框架写代码完全限定死了你所需要思考的东西,只是在处理一些业务逻辑,真正的代码 都感觉不会写了. 突然发现,框架用的不熟悉 ...

随机推荐

  1. Oracle常用函数(3)

    1)to_char()函数,将日期转换为字符串表示 SQL> select to_char(sysdate,'yyyy"年"mm"月"dd"日& ...

  2. 简单了解 node http(一)

    简单了解 node http 模块 文章记录了对http 模块的简单使用与理解. http 服务端 http 客户端 总结 1. http 服务端 先写个小例子 服务端: let http = req ...

  3. ros基础知识总结

    参考于:ros官网教程 实验楼:ros机器人操作系统自主学习实验 基础知识 1 一个catkin程序包由什么组成? 一个程序包要想称为catkin程序包必须符合以下要求: 该程序包必须包含catkin ...

  4. MySQL查询最近一周(最近7天)数据

    参考:https://blog.csdn.net/ouyang111222/article/details/77638826 -表结构 - CREATE TABLE `zk_score` ( `id` ...

  5. vue项目--vuex状态管理器

    本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...

  6. MongoDB 学习小笔记

    1.配置:mongod --dbpath=D:\MongoDB\data mongo2.基本的增删查改 find() update()-- 整体更新,局部更新. 修改器: $inc db.person ...

  7. 去除多余的Merge branch提交

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xuexingyang/article/d ...

  8. Codeforces1203F2. Complete the Projects (hard version) (贪心+贪心+01背包)

    题目链接:传送门 思路: 对于对rating有提升的项目,肯定做越多越好,所以把$b_{i} >= 0$的项目按rating要求从小到大贪心地都做掉,得到最高的rating记为r. 对于剩余的$ ...

  9. 机器学习五 EM 算法

    目录 引言 经典示例 EM算法 GMM 推导 参考文献: 引言 Expectation maximization (EM) 算法是一种非常神奇而强大的算法. EM算法于 1977年 由Dempster ...

  10. python基础练习题08

    写一个登录程序,让用户输入账号和密码,输入用户和密码输入正确的话,提示你 xxx,欢迎登录,今天的日期是xxx,程序结束.错误的话,提示账号/密码输入错误, 最多输入3次,如果输入3次都没有登录成功, ...