深入浅析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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
JS前端笔试题分析
Dec 19 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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 include_path设置技巧分享
2011/07/03 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
学习ExtJS border布局
2009/10/08 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
Angular17之Angular自定义指令详解
2018/01/21 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
python如何通过twisted搭建socket服务
2020/02/03 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
python的链表基础知识点
2020/09/13 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
小学校长汇报材料
2014/08/20 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2015年纪委工作总结
2015/05/13 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
Android中的Launch Mode详情
2022/06/05 Java/Android