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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
用JS实现的一个include函数
Jul 21 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP 开发工具
2006/12/06 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python截图并保存的具体实例
2021/01/14 Python
Python扫描端口的实现
2021/01/25 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
小学校园文化建设汇报材料
2014/08/19 职场文书
国庆节新闻稿
2015/07/17 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript