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检测CPU使用率自己写的
Mar 22 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 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/02 星际争霸
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Python 错误和异常小结
2013/10/09 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
python中set常用操作汇总
2016/06/30 Python
Python实现随机选择元素功能
2017/09/14 Python
python format 格式化输出方法
2018/07/16 Python
详解如何设置Python环境变量?
2019/05/13 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
会计专业自荐书
2014/07/08 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
学习计划是什么
2019/04/30 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android