JavaScript: __proto__和prototype
图来源于: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的更多相关文章
- JavaScript - __proto__和prototype,原形
参考 https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript 区别 构造函数中的prototype创建 ...
- JavaScript中__proto__与prototype的关系
一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...
- 15条规则解析JavaScript对象布局(__proto__、prototype、constructor)
大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...
- javascript--15条规则解析JavaScript对象布局(__proto__、prototype、constructor)
大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...
- 对于JavaScript对象的prototype和__proto__的理解
一.Object和Function的关系: 刚学JavaScript的时候,看书上说JavaScript中万物皆对象,而javascript中的其他对象都是从Object继承而来,包括内置对象.瞬间觉 ...
- Javascript中的__proto__、prototype、constructor
今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__pro ...
- JavaScript中的prototype和__proto__细致解析
最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...
- JavaScript:Function/Object/prototype/__proto__
console.log(Object.__proto__===Function.prototype); //true console.log(Object.prototype.__proto__); ...
- javascript中构造器(函数)的__proto__与prototype初探
背景:最近没什么需求,快要闲出屁了,所以重温了一下js的原型,结果大有收获,且偶然看到Snandy大神的<JavaScript中__proto__与prototype的关系> 这篇文章,感 ...
随机推荐
- Android(java)学习笔记101:Java程序入口和Android的APK入口
1. Java程序的入口:static main()方法 public class welcome extends Activity { @Override public void onCreate( ...
- 感谢我的python老师
Python自动化开发(金角大王版) http://www.cnblogs.com/alex3714/articles/5885096.html
- Drupal的入门学习
1. 注意content中的区别 Article和Basic page的区别 a.输入字段不一样,Article内容多了两个字段:tag和图片. b.内容的默认设置不一样,Article默认允许评论, ...
- dom事件操作例题,电子时钟,验证码,随机事件
dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...
- 操作DOM -------JavaScrip
本文摘要:http://www.liaoxuefeng.com/ 经常用到. 由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记 ...
- 【转载】SQLServer中char、varchar、nchar、nvarchar的区别:
(1) 定义: char: 固定长度,存储ANSI字符,不足的补英文半角空格. nchar: 固定长度,存储Unicode字符,不足的补英文半角空格 varchar: 可变长度 ...
- html下拉菜单栏代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Python 文件读写 文件和路径
1.在Windows上,使用倒斜杆作为文件夹之间的分隔符,在Linux上,使用正斜杠作为路径分隔符.在编写Python脚本时,可以os.path.join()函数来处理 在Windows环境下命令如下 ...
- Table 分页处理
介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables ...
- CRM第一篇:权限组件之权限控制
一.权限组件(1):一级菜单 二.权限组件(2):二级菜单 三.权限组件(3):默认选中非菜单(二级菜单) 四.权限组件(4):给动态菜单增加面包屑导航 五.权限组件(5):权限粒度控制到按钮 六.权 ...