深入浅析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中的History历史对象
Jan 16 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
js实现跨域的多种方法
Dec 25 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
vue 如何使用递归组件
Oct 23 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
js使用心得分享
2015/01/13 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
js实现日历的简单算法
2017/01/24 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
高中生毕业学习总结的自我评价
2013/11/14 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
爱国主义主题班会
2015/08/14 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2016教师节感恩话语
2015/12/09 职场文书
志愿服务心得体会
2016/01/15 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python