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 相关文章推荐
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
jQuery插件开发汇总
May 15 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
python学习基础之循环import及import过程
2018/04/22 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
雷锋精神演讲稿
2014/05/13 职场文书
护士找工作求职信
2014/07/02 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
会计实训总结范文
2015/08/03 职场文书
小学副班长竞选稿
2015/11/21 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
angular4实现带搜索的下拉框
2022/03/25 Javascript