深入浅析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 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
单元选择合并变色示例代码
May 26 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
关于ES6箭头函数中的this问题
2018/02/27 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python制作简单的网页爬虫
2015/11/22 Python
Django实现表单验证
2018/09/08 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python做接口测试的必要性
2019/11/20 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Python tkinter实现日期选择器
2021/02/22 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
推广普通话标语
2014/06/27 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
新闻报道稿范文
2015/07/23 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL