图解原型和原型链
? 图解原型和原型链
原型和原型链是 JS 中不可避免需要碰到的知识点?,本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系?
Constructor 构造函数
首先我们先写一个构造函数
Person,构造函数一般为了区别普通函数要求首字母大写:
1function Person(){}
prototype 原型
原型指的就是一个对象,实例“继承”那个对象的属性。在原型上定义的属性,通过“继承”,实例也拥有了这个属性。“继承”这个行为是在 new 操作符内部实现的。
先不说实例,原型与构造函数的关系就是,构造函数内部有一个名为 prototype 的属性,通过这个属性就能访问到原型:
20190314132908.png
Person 就是构造函数,Person.prototype 就是原型
20190314132934.png
instance 实例
有个构造函数,我们就可以在原型上创建可以“继承”的属性,并通过 new 操作符创建实例
20190314141908.png
比方说 Person,我们要创建一个 person 实例,那么使用 new 操作符就可以实现,并通过 instanceof 来检查他们之间的关系:
20190314132309.png
我们在原型上定义一个属性,那么实例上也就可以“继承”这个属性:
20190314133215.png
proto 隐式原型
实例通过 __proto__
访问到原型,所以如果是实例,那么就可以通过这个属性直接访问到原型:
20190314141947.png
所以这两者是等价的:
20190314142041.png
constructor 构造函数
既然构造函数通过 prototype 来访问到原型,那么原型也应该能够通过某种途径访问到构造函数,这就是 constructor:
20190314142246.png
因此两者的关系应该是这样:
20190314142755.png
注意这里的 constructor 是原型的一个属性,Constructor 指的才是真正的构造函数。两者名字不要弄混了?
实例、构造函数、原型之间的关系
这里我们可以看到如果实例想要访问构造函数,那么应当是:
20190314143125.png
没有从实例直接访问到构造函数的属性或方法:
20190314143254.png
实例与原型则是通过上文中提到的 __proto__
去访问到。
在读取一个实例的属性的过程中,如果属性在该实例中没有找到,那么就会循着 __proto__
指定的原型上去寻找,如果还找不到,则尝试寻找原型的原型?:
20190314143837.png
我们把注释删掉,给实例同名属性,可以看到打印出来的属性就指向这个:
20190314143944.png
原型链
原型同样也可以通过 __proto__
访问到原型的原型,比方说这里有个构造函数 Person 然后“继承”前者的有一个构造函数 People,然后 new People 得到实例 p
当访问 p 中的一个非自有属性的时候,就会通过 __proto__
作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到 Object 构造函数为止。
这个搜索的过程形成的链状关系就是原型链
20190314144733.png
如下图:
20190314145239.png
看到 null 了么,原型链搜索搜到 null 为止,搜不到那访问的这个属性就是不存在的:
20190314145540.png
以上,这就是原型、原型链、构造函数、实例、null 之间的关系。
- Struts2 S2-046, S2-045 Firewall(漏洞防火墙)
- 应用程序的通信成本
- Spring cloud 之 Feign Client
- Spring Cloud Netflix
- 重新整理AUTO_INCREMENT字段
- Spring Cloud Config
- Spring boot with Schedule (启用/禁用)
- DevOps Tools
- Docker 虚拟机之 Redis
- Spring boot with HTTPS SSL
- Spring boot with Git version
- Spring boot with Elasticsearch 5.5.1
- 怎样将 MySQL 数据表导入到 Elasticsearch
- Spring data 数据库建表(一对一,一对多,多对多)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用ES5,ES6和SAP ABAP实现非波拉契数列Fibonacci
- SpringBoot整合自定义注解
- nginx被动检测
- Python获取股票历史数据
- 实习第四周
- 浅谈推进有赞全站 HTTPS 项目-工程篇
- Checks autowiring problems in a bean class问题解决
- 有赞权限系统
- python处理txt文件常用方法
- 修改springboot运行时命令行Banner
- 适应性页面自己的看法
- Vant 1.0 正式发布:轻量、可靠的移动端 Vue 组件库
- SAP CDS view单元测试框架Test Double介绍
- 漫谈 React 组件库开发(二):组件库最佳实践
- 搭建简易的物联网服务端和客户端-移动家庭能力平台【1】(二十三)