深入浅析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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
总监职责范文
2013/11/09 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
车辆转让协议书
2014/09/24 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
科技活动总结范文
2015/05/11 职场文书
返乡农民工证明
2015/06/24 职场文书
课程设计感想范文
2015/08/11 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
基于redis+lua进行限流的方法
2022/07/23 Redis