深入浅析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 相关文章推荐
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
js不常见操作运算符总结
Nov 20 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
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python实现自动更换ip的方法
2015/05/05 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
高一军训的心得体会
2014/09/01 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年路政工作总结
2015/05/22 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL