深入浅析JavaScript中prototype和proto的关系


Posted in Javascript onNovember 15, 2015

prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性)。

__proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为__proto__,并且可以被访问到)。原型链正是基于__proto__才得以形成

(note:不是基于函数对象的属性prototype)。

简单的说:__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

下面给大家分享一个Function、Object、Prototype、__proto__内存关系图

深入浅析JavaScript中prototype和proto的关系

Javascript 相关文章推荐
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JavaScript 基本概念
Jan 20 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
简述JS控制台的使用
Jul 15 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
apply和call方法定义及apply和call方法的区别
Nov 15 #Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 #Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 #Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 #Javascript
js读取并解析JSON类型数据的方法
Nov 14 #Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 #Javascript
javascript动态生成树形菜单的方法
Nov 14 #Javascript
You might like
PHP 远程关机实现代码
2009/11/10 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
js自带函数备忘 数组
2006/12/29 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
用python实现的线程池实例代码
2018/01/06 Python
python编程使用协程并发的优缺点
2018/09/20 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Django跨域请求原理及实现代码
2020/11/14 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
家居设计专业个人自荐信范文
2013/11/26 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
大学军训的体会
2014/11/08 职场文书
英文道歉信
2015/01/20 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书