__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. day 15 模块 相对导入

    自定义模块: 什么是模块:本质就是.py文件,封装语句的最小单位. 自定义模块:实际上就是定义.py,其中可以包含:变量定义,可执行语句,for循环,函数定义等等,他们统称模块的成员. 模块的运行方式 ...

  2. 【转载】jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴恩达机器学习103:SVM之大间隔分类器的数学原理

    1.向量内积: (1)假设有u和v这两个二维向量:,接下来看一下u的转置乘以v的结果,u的转置乘以v也叫做向量u和向量v的内积,u是一个二维向量,可以将其在图上画出来,如下图所示向量u: 在横轴上它的 ...

  4. gcc编译动态链接库

    以下是windows环境下用gcc编译动态链接库的尝试过程. 环境准备 编译使用的MinGW,64位的官网可以找到下载地址. 项目建立及代码编写 在任意地方新建一个目录,保存这个项目,然后新建一个c源 ...

  5. jquery 未来元素事件示例 on() delegate() live()

    jquery 1.7版后建议使用on() $(document).on("click","#green",function(){$(this).after('& ...

  6. node模块管理

    淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org

  7. linux线程的实现(转)

    原文:https://www.cnblogs.com/zhaoyl/p/3620204.html 首先从OS设计原理上阐明三种线程:内核线程.轻量级进程.用户线程 内核线程 内核线程就是内核的分身,一 ...

  8. 在Rails中最方便集成使用Bootstrap的方式

    创建项目 rails new BootstrapProject 创建模型 rails g scaffold xxx --skip-stylesheets 运行迁移 rake db:migrate -- ...

  9. mysql的一些方法

    线程: isLive(); 测试线程是否处于活动状态. long getId() 返回该线程的标识符. String getName() 返回该线程的名称. currentThread(); 返回对当 ...

  10. CodeForces-721D-Maxim and Array(优先队列,贪心,分类讨论)

    链接: https://vjudge.net/problem/CodeForces-721D 题意: Recently Maxim has found an array of n integers, ...