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 Code实现IE邮件转发新浪微博
Jul 03 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
简单实现jquery焦点图
Dec 12 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jQuery 选择器理解
2010/03/16 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
怎样使用Python脚本日志功能
2016/08/14 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
考试没考好检讨书
2014/01/31 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
打架检讨书范文
2015/01/27 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
golang 实现并发求和
2021/05/08 Golang