JavaScript中__proto__与prototype的关系深入理解


Posted in Javascript onDecember 04, 2012

这里讨论下对象的内部原型(__proto__)和构造器的原型(prototype)的关系。
一、所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function)

Number.__proto__ === Function.prototype // true 
Boolean.__proto__ === Function.prototype // true 
String.__proto__ === Function.prototype // true 
Object.__proto__ === Function.prototype // true 
Function.__proto__ === Function.prototype // true 
Array.__proto__ === Function.prototype // true 
RegExp.__proto__ === Function.prototype // true 
Error.__proto__ === Function.prototype // true 
Date.__proto__ === Function.prototype // true

JavaScript中有内置(build-in)构造器/对象共计12个(ES5中新加了JSON),这里列举了可访问的8个构造器。剩下如Global不能直接访问,Arguments仅在函数调用时由JS引擎创建,Math,JSON是以对象形式存在的,无需new。它们的__proto__是Object.prototype。如下
Math.__proto__ === Object.prototype // true 
JSON.__proto__ === Object.prototype // true

上面说的“所有构造器/函数”当然包括自定义的。如下
// 函数声明 
function Person() {} 
// 函数表达式 
var Man = function() {} 
console.log(Person.__proto__ === Function.prototype) // true 
console.log(Man.__proto__ === Function.prototype) // true

这说明什么呢?
所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法。如length、call、apply、bind(ES5)。
Function.prototype也是唯一一个typeof XXX.prototype为 “function”的prototype。其它的构造器的prototype都是一个对象。如下
console.log(typeof Function.prototype) // function 
console.log(typeof Object.prototype) // object 
console.log(typeof Number.prototype) // object 
console.log(typeof Boolean.prototype) // object 
console.log(typeof String.prototype) // object 
console.log(typeof Array.prototype) // object 
console.log(typeof RegExp.prototype) // object 
console.log(typeof Error.prototype) // object 
console.log(typeof Date.prototype) // object 
console.log(typeof Object.prototype) // object

噢,上面还提到它是一个空的函数,alert(Function.prototype) 下看看。
知道了所有构造器(含内置及自定义)的__proto__都是Function.prototype,那Function.prototype的__proto__是谁呢?
相信都听说过JavaScript中函数也是一等公民,那从哪能体现呢?如下
console.log(Function.prototype.__proto__ === Object.prototype) // true

这说明所有的构造器也都是一个普通JS对象,可以给构造器添加/删除属性等。同时它也继承了Object.prototype上的所有方法:toString、valueOf、hasOwnProperty等。
最后Object.prototype的__proto__是谁?
Object.prototype.__proto__ === null // true

已经到顶了,为null。
二、所有对象的__proto__都指向其构造器的prototype
上面测试了所有内置构造器及自定义构造器的__proto__,下面再看看所有这些构造器的实例对象的__proto__指向谁?
先看看JavaScript引擎内置构造器
var obj = {name: 'jack'} 
var arr = [1,2,3] 
var reg = /hello/g 
var date = new Date 
var err = new Error('exception') 
console.log(obj.__proto__ === Object.prototype) // true 
console.log(arr.__proto__ === Array.prototype) // true 
console.log(reg.__proto__ === RegExp.prototype) // true 
console.log(date.__proto__ === Date.prototype) // true 
console.log(err.__proto__ === Error.prototype) // true

再看看自定义的构造器,这里定义了一个Person
function Person(name) { 
this.name = name 
} 
var p = new Person('jack') 
console.log(p.__proto__ === Person.prototype) // true

p是Person的实例对象,p的内部原型总是指向其构造器Person的prototype。
每个对象都有一个constructor属性,可以获取它的构造器,因此以下打印结果也是恒等的
function Person(name) { 
this.name = name 
} 
var p = new Person('jack') 
console.log(p.__proto__ === p.constructor.prototype) // true

上面的Person没有给其原型添加属性或方法,这里给其原型添加一个getName方法
function Person(name) { 
this.name = name 
} 
// 修改原型 
Person.prototype.getName = function() {} 
var p = new Person('jack') 
console.log(p.__proto__ === Person.prototype) // true 
console.log(p.__proto__ === p.constructor.prototype) // true

可以看到p.__proto__与Person.prototype,p.constructor.prototype都是恒等的,即都指向同一个对象。
如果换一种方式设置原型,结果就有些不同了
function Person(name) { 
this.name = name 
} 
// 重写原型 
Person.prototype = { 
getName: function() {} 
} 
var p = new Person('jack') 
console.log(p.__proto__ === Person.prototype) // true 
console.log(p.__proto__ === p.constructor.prototype) // false

这里直接重写了Person.prototype(注意:上一个示例是修改原型)。输出结果可以看出p.__proto__仍然指向的是Person.prototype,而不是p.constructor.prototype。
这也很好理解,给Person.prototype赋值的是一个对象直接量{getName: function(){}},使用对象直接量方式定义的对象其构造器(constructor)指向的是根构造器Object,Object.prototype是一个空对象{},{}自然与{getName: function(){}}不等。如下
var p = {} 
console.log(Object.prototype) // 为一个空的对象{} 
console.log(p.constructor === Object) // 对象直接量方式定义的对象其constructor为Object 
console.log(p.constructor.prototype === Object.prototype) // 为true,不解释

上面代码中用到的__proto__目前在IE6/7/8/9中都不支持。IE9中可以使用Object.getPrototypeOf(ES5)获取对象的内部原型。
var p = {} 
var __proto__ = Object.getPrototypeOf(p) 
console.log(__proto__ === Object.prototype) // true
Javascript 相关文章推荐
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
Vue-component全局注册实例
Sep 06 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
JSON语法五大要素图文介绍
Dec 04 #Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 #Javascript
cument.execCommand()用法深入理解
Dec 04 #Javascript
页面只能打开一次Cooike如何实现
Dec 04 #Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 #Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 #Javascript
You might like
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python collections模块实例讲解
2014/04/07 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
tensorflow 获取变量&打印权值的实例讲解
2018/06/14 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python中遍历列表的方法总结
2019/06/27 Python
详解Python self 参数
2019/08/30 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
C面试题
2015/10/08 面试题
廉洁使者实施方案
2014/03/29 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
酒店管理求职信
2014/06/09 职场文书
工会趣味活动方案
2014/08/18 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
英文升职感谢信
2015/01/23 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
Go timer如何调度
2021/06/09 Golang
我去timi了,一起去timi是什么意思?
2022/04/13 杂记