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中this的使用说明
Sep 06 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
前端jquery部分很精彩
May 03 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 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数据库操作类(改自discuz)
2010/07/03 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
对python的文件内注释 help注释方法
2018/05/23 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python解析微信dat文件的方法
2020/11/30 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
租赁协议书
2015/01/27 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
Spring实现内置监听器
2021/07/09 Java/Android