深入浅析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对象及属性
Feb 13 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 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实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python装饰器decorator介绍
2014/11/21 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
详解python polyscope库的安装和例程
2020/11/13 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
Linux的文件类型
2016/07/05 面试题
个人找工作自荐信格式
2013/09/21 职场文书
生物化学研究助理员求职信
2013/10/09 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
小学美术教学反思
2016/02/17 职场文书