深入浅析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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python常见数制转换实例分析
2015/05/09 Python
Python实现二维数组输出为图片
2018/04/03 Python
python实现抽奖小程序
2020/04/15 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python 下载文件的几种方法汇总
2021/01/06 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
成绩单公证书
2014/04/10 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
超市客服工作职责
2014/06/11 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
教师个人年度总结
2015/02/11 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS