一张图说明 函数, 实例(对象), 原型之间的关系
前言
很多初学者都对函数,实例(对象), 原型之间的关系理不清楚。
网上五花八门的文章很多,要么不知所云,要么是晦涩难懂。
本文意在用最简洁的语言跟示例让初学者理清楚这三者之间的关系,无需理会其内部原理
一张图说明函数
实例(对象)
原型
之间的联系
图片来源:www.cnblogs.com/wilber2013/…
由上图得出结论:
每个函数都有一个prototype属性指向另一个对象,这个对象就叫函数的原型对象
由构造函数产生的实例对象,其
[[prototype]]
属性(不可见,浏览器通常实现为__proto__
)指向构造函数的原型对象每个函数,都可以认为是通过new Function()实例化的对象
不是通过构造函数(new XXX())实例化的对象(非函数),都可以认为是new Object()实例化的对象
基于结论2,3,每个函数的
[[prototype]]
(__proto__
)属性都指向它的原型对象Function.prototype基于结论2,3,4,每个函数(基于结论8,除了Object())的原型对象的
[[prototype]]
(__proto__
)属性都指向Object.prototype原型对象的constructor属性指向构造函数(与1刚好相反)
Object.prototype.
__proto__
指向null
示例代码:
function Person(){}Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){console.log(this.name);
};var person = new Person();
person.sayName(); //"Nicholas"var person1 = new Person();
person1.sayName(); //"Nicholas"console.log(person.sayName == person1.sayName); //true复制代码
基于上述定义的示例函数,验证以上结论
Person为构造函数,其中prototype属性指向它的原型对象 Person.prototype,
console.log(Person.prototype)复制代码
person为new Person()产生的实例对象,其
__proto__
属性指向它的原型 Person.prototypeperson.__proto__ === Person.prototype //truePerson.prototype.isPrototypeOf(person) //trueObject.getPrototypeOf(person) === Person.prototype //true复制代码
结合结论1,定义任意函数,其
__proto__
属性与Function.prototype比较function fn () {}fn.__proto__ === Function.prototype //true复制代码
结合结论2,定义任意对象(非 new XXX()实例化对象,非函数),其
__proto__
与 Object.prototype比较var obj = {}obj.__proto__ === Object.prototype //true复制代码
函数Person的
__proto__
属性指向Function.prototypePerson.__proto__ === Function.prototype //trueObject.__proto__ === Function.prototype //true复制代码
原型对象Person.prototype的
__proto__
属性指向Object.prototypePerson.prototype.__proto__ === Object.prototype //trueFunction.prototype.__proto__ === Object.prototype //true复制代码
Person.prototype的constructor属性与Person比较
Person.prototype.constructor === Person //trueFunction.prototype.constructor === Function //trueObject.prototype.constructor === Object //true复制代码
输出Object.prototype.
__proto__
的值console.log(Object.prototype.__proto__) //null复制代码
简而言之:
对于函数:函数XXX的prototype属性,指向XXX.prototype(函数原型对象)
对于对象:XXX实例化的对象的[[prototype]]
(也就是__proto__
)属性,指向XXX.prototype
对于原型:XXX.prototype的constructor属性都指向构造函数XXX
更多请参考: JavaScript高级程序设计(第3版)6.2.3 原型模式
一张图说明 函数, 实例(对象), 原型之间的关系相关推荐
- 构造函数,对象原型,实例对象三者之间的关系
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 1.构造函数,原型对象,实例对象三者之间的关系 每创建一个函数,该函数都会自动带有一个prototype属性.该 ...
- 【JavaScript】JavaScript模拟实现面向对象一张图帮助你深刻理解原型链和原型对象
文章目录 一.JavaScript模拟面向对象 1.函数是类 2.函数中各种变量的声明 3.关于函数内的this 小结:JavaScript中函数是什么? 4.练习:面向对象思想编写Complex类 ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- 4 UML 图中,一张交互图显示一个交互,由一组对象及其之间的关系组成,包含它 们之间可能传递的消息,以下不是交互图的是( )
标签: 软考初级程序员易错题,计算机基础, 面向对象基础,统一建模语言 (UML) UML 图中,一张交互图显示一个交互,由一组对象及其之间的关系组成,包含它们之间可能传递的消息,以下不是交互图的是( ...
- fastJson、JackJson以及Gson序列化对象与get、set以及对象属性之间的关系
众所周知,平时开发过程中将对象序列化成json字符串常用的工具类一般就三种:fastJson.Gson.Jackjson,但是三种工具类在将对象进行序列化时与对象的get.set.对象属性之间的关系你 ...
- JS 一张图理解prototype、proto和constructor的关系
转载于原文地址:https://www.cnblogs.com/xiaohuochai/p/5721552.html(感谢大神的总结) 前面的话 javascript里的关系又多又乱.作用域链是一种单 ...
- 图计算:一张图秒级洞察千亿级复杂关系
在数据规模越来越大.数据结构越来越复杂的大数据时代,传统的关系型数据暴露出了建模缺陷.水平伸缩等问题,于是具有更强大表达能力的图数据受到业界极大的重视.如果把关系数据模型比做火车的话,那么现在的图数据 ...
- UML类图简介及类与类之间的关系
UML(Unified Modeling Language,统一建模语言)建模是面向对象开发设计方法中的第一步,用UML来表达设计模式不仅方便了开发人员的交流,而且更加清晰.准确.UML定义了5类10 ...
- OSM数据分析及图形化显示以及各组员之间的关系Relation的存储
OpenStreetMap(OSM) https://wiki.openstreetmap.org/wiki/Elements OSM虽然是简称,但如果赋予数据的话,它就是一种格式,格式以.osm结尾 ...
最新文章
- 声场噪音测试软件,粉红噪声:测试声场频率的标准信号源(转载)
- 多伦多大学和清华大学创新创业论坛,数据科学研究院建言献策
- java 异常 理解_java中的异常理解
- django获取指定列的数据
- windows下安装docker
- SQL Server 中的事务和锁(三)-Range S-U,X-X 以及死锁
- MySQL数据库:存储引擎
- 马蜂窝数据仓库设计与实践
- Windows下telnet工具使用
- 利用matlab数学建模实例,matlab数学建模实例
- 计算机职称photoshop,职称计算机考试photoshop核心通关技巧
- 【优化求解】基于生物地理学结合重力引力搜索优化求解算法matlab代码
- C 语言实现简易区块链
- 高等数学拾遗 矢量分析
- 古人的谦称、尊称与贱称
- 基于JAVA的TPL解释器
- Vue项目antdv中scopedSlots的customRender和customRender函数冲突
- Tableau Fixed和include区别
- RabbitMQ六种工作模式
- 系统集成15真题解析
热门文章
- 盘点2015跨境电商:硝烟下的机遇与变革
- TextWatcher编辑框监听器
- LINQ to SQL 运行时动态构建查询条件
- ORA-01436: 用户数据中的CONNECT BY 循环
- Java 判断 list 为空
- RHEL5系统配置双网卡绑定
- HP-UX crontab: you are not authorized to use cron
- Lync-技巧-1.启用-用户
- Vue 学习笔记 (一) -- 初识 VueCli 3
- 7. Vulnerability exploitation tools (漏洞利用工具 11个)