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 相关文章推荐
js 页面关闭前的出现提示的实现代码
May 25 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
javascript实现密码验证
Nov 10 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
vue路由--网站导航功能详解
Mar 29 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
PHP获取网卡地址的代码
2008/04/09 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
页面使用密码保护代码
2013/04/10 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python实现图片横向和纵向拼接
2020/03/05 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
解除合同协议书
2014/04/17 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
单位同意报考证明
2015/06/17 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers