深入浅析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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Preload基础使用方法详解
Feb 03 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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环境――Appserv
2006/12/13 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
php foreach、while性能比较
2009/10/15 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python中正则表达式与模式匹配
2019/05/07 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
班组长岗位职责
2014/03/03 职场文书
学生个人自我鉴定
2014/03/26 职场文书
中班教师个人总结
2015/02/05 职场文书
react国际化react-intl的使用
2021/05/06 Javascript