javascript 中__proto__和prototype详解


Posted in Javascript onNovember 25, 2014

__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

已经到顶了,为null。

大家是否对javascript 中__proto__和prototype之间的区别联系有所了解了呢,有疑问就留言,大家共同探讨吧

Javascript 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
react 生命周期实例分析
May 18 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
js 加密压缩出现bug解决方案
Nov 25 #Javascript
js Object2String方便查看js对象内容
Nov 24 #Javascript
js的[defer]和[async]属性
Nov 24 #Javascript
使用JavaScript 编写简单计算器
Nov 24 #Javascript
JS和JQ的event对象区别分析
Nov 24 #Javascript
JavaScript实现大数的运算
Nov 24 #Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 #Javascript
You might like
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
vue中watch的用法汇总
2020/12/28 Vue.js
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
爬山算法简介和Python实现实例
2014/04/26 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python编写的最短路径算法
2015/03/25 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
10款最好的Python开发编辑器
2019/07/03 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
餐厅服务员岗位职责
2015/02/09 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书