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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
HTML上传控件取消选择
Mar 06 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
深入探寻javascript定时器
Jan 02 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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
星际流派综述
2020/03/04 星际争霸
php连接数据库代码应用分析
2011/05/29 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
活动新闻稿范文
2015/07/17 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server