深入浅析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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
JS重载实现方法分析
Dec 16 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
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自动跳转中英文页面
2008/07/29 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
javascript date格式化示例
2013/09/25 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Angular2安装angular-cli
2017/05/21 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Python中base64与xml取值结合问题
2019/12/22 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
NumPy排序的实现
2020/01/21 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
文员岗位职责
2013/11/09 职场文书
大学校庆邀请函
2014/01/11 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
教师节大会主持词
2015/07/06 职场文书
2016年少先队活动总结
2016/04/06 职场文书