深入浅析JavaScript中prototype和proto的关系


Posted in Javascript onNovember 15, 2015

prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性)。

__proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为__proto__,并且可以被访问到)。原型链正是基于__proto__才得以形成

(note:不是基于函数对象的属性prototype)。

简单的说:__proto__是内部原型,prototype是构造器原型(构造器其实就是函数)

构造器的原型(prototype)是一个对象

那什么是构造器呢?

要想创建一个对象,首先要有一个对象构造器,就像php里面一样,要想创建一个对象,首先要有一个类
构造器的实质就是一个函数,下面的问题是:如何通过这个构造器来创建一个对象呢?

答案: new

构造器构造的是对象。

一、所有构造器/函数的__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

说明了Number等都是构造器,这些构造器其实是Function的一个对象。 也就是说相当于 var Number = new Function();

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

下面给大家分享一个Function、Object、Prototype、__proto__内存关系图

深入浅析JavaScript中prototype和proto的关系

Javascript 相关文章推荐
jquery动态加载图片数据练习代码
Aug 04 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
js变换显示图片的实例
Apr 16 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
element中的$confirm的使用
Apr 26 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
apply和call方法定义及apply和call方法的区别
Nov 15 #Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 #Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 #Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 #Javascript
js读取并解析JSON类型数据的方法
Nov 14 #Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 #Javascript
javascript动态生成树形菜单的方法
Nov 14 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python redis 删除key脚本的实例
2019/02/19 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
软件测试面试题
2014/01/05 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
西安兵马俑导游词
2015/02/02 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫