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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
微信小程序解除10个请求并发限制
Dec 18 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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与MySQL交互使用详解
2006/10/09 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
php实现的简单日志写入函数
2015/03/31 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
JS中Location使用详解
2015/05/12 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python中return函数返回值实例用法
2020/11/19 Python
python与idea的集成的实现
2020/11/20 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
网络技术专业求职信
2014/05/02 职场文书
公司副总经理任命书
2014/06/05 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
学习经验交流会总结
2015/11/02 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
基于Python实现将列表数据生成折线图
2022/03/23 Python