详解JS原型与原型链的关系

1、构造函数原型prototype

(1)、构造函数通过原型分配的函数是所有对象所共享的;
(2)、JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象;
(3)、注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有;

function student(age, name) {
	this.age = age;
	this.name = name;
}
student.prototype.school = function() {
	console.log('理工大学');
}
var stu1 = new student('小王', 18);
var stu2 = new student('小张', 22);

(4)、看到这里原型是什么,他就是一个对象,我们称prototype为原型对象;
(5)、原型的作用是什么呢?四个字,共享方法

2、对象原型__proto__

(1)、对象都会有一个属性__ proto__指向构造函数的 prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有_ proto_ 原型的存在。
(2)、在对象身上系统自己添加了一个__proto__指向我们构造函数的原型对象,所以__proto__对象原型和原型对象prototype是等价的。
(3)、我们验证一下,看看会输出什么:

console.log(stu1.__proto__ === student.prototype);

 答案:输出是true,证明对象原型__proto__和原型对象protptype是等价的

(4)、所以方法的查找规则就是首先看test对象身上是否有school方法,如果有就执行这个对象上的school,如果没有school这个方法, 因为有__proto__的存在,就去构造函数原型对象prototype身上去查找school这个方法。
(5)、如果觉得还是不太明白是什么关系,下图可以搞懂你的疑问:

3、constructor构造函数

(1)、对象原型(__proto__) 构造函数( prototype )原型对象,里面都有一个属性是constructor属性,称为constructor为构造函数,因为它指回构造函数本身。
(2)、我们打印一下student.prototype和stu1.__type__看看是否存在constructor属性:

console.log(student.prototype);
console.log(stu1.__proto__);

(3)、如上图所示,可以看到里面都有constructor属性,那constructor有什么作用呢?
(4)、constructor主要用于记录该对象引用是哪个构造函数,它可以让原型对象重新指向原来的构造函数。
(5)、现在我们重新更新一下构造函数、实例、原型对象三者之间的关系图:

4、原型链

(1)、因为student原型对象(prototype)也是一个对象,我们之前说了只要是对象就有对象原型
(2)、那我们打印一下原型对象看看里面是否有原型:

function student(age, name) {
	this.age = age;
	this.name = name;
}
student.prototype.school = function() {
	console.log('理工大学');
}
var stu1 = new student('小王', 18);
var stu2 = new student('小张', 22);
console.log(student.prototype);

(3)、可以看到student原型对象里也有一个原型,又因为原型指向的是原型对象,那么我们这个student.prototype里面的__proto__指向的是谁呢?
(4)、我们打印一下:

console.log(student.prototype.__proto__);

(5)、可以看到指向的是这个constructor指向的是Object原型对象

(6)、Object原型对象是由谁创建出来的呢,毫无疑问是Object构造函数创建出来的,那Object原型对象也是一个对象,那它也有一个原型,这个原型指向的又是谁呢?

(7)、我们打印一下:

console.log(Object.prototype.__proto__);

(8)、如上图所示,打印为null,这样就到了原型链的最顶层了,这样我们把这些串起来就能得到一个完整的原型链图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/476701.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Scikit-Learn逻辑回归(二)

Scikit-Learn逻辑回归二:多项式与正则化 1、多项式回归回顾1.1、逻辑回归为什么要使用多项式1.2、多项式回归及原理 2、逻辑回归与多项式 1、多项式回归回顾 本文接上篇:Scikit-Learn逻辑回归(一) 上篇中,我们详细介绍了逻辑回归的概念、原理…

使用 React antd 的ProFormSelect组件 搜索查询 多选的写法

使用 React antd 的ProFormSelect组件 搜索查询 多选的写法 需求:需要一个搜索框,可以选择员工,(员工人数多无法一次性获取,全部放入options中),所以需要使用搜索功能,而且是可以多…

XR“黑话”

MTP(Motion-To-Photon Latency):实际人体发生运动到图像显示到屏幕上的时间延迟。早期一些vr产生晕动症的主要原因。 ATW(Asynchronous Timewarp):主要解决两个问题,一是延迟,二是补…

CSS弹性盒模型(学习笔记)

一、厂商前缀 1.1 作用 解决浏览器对C3新特性的兼容,不同的浏览器厂商,定义了自己的厂商前缀 1.2 语法 浏览器 厂商前缀内核(渲染引擎):解析htmlcssjs谷歌 -webkit-blink苹果-webkit-webkit欧朋-o-blink火狐 -moz-geckoIE-ms- trid…

OpenCV4.9.0开源计算机视觉库安装教程

返回:OpenCV系列文章目录(持续更新中......) 引言:OpenCV系列文章中的安装部分今天全部完成了,为了读者更方便阅读,大家可以按下列索引前往,成文较为仓促有错漏在所难免,欢迎大家指正…

服务器运行一段时间后

自己记录一下。 一、查看目录占用情况 df -h 命令查看磁盘空间 du -ah --max-depth=1 / 查看根目录下各个文件占用情况 二、mysql日志清空 这个日志是可以清空的 echo > /usr/local/mysql/data/syzl-db2.log #将文件清空 说明: 这个文件这么大是因为,开启 …

将OpenCV与gdb驱动的IDE结合使用

返回:OpenCV系列文章目录(持续更新中......) 上一篇:OpenCV4.9.0开源计算机视觉库在 Linux 中安装 下一篇:将OpenCV与gcc和CMake结合使用 ​ 能力 这个漂亮的打印机可以显示元素类型、、标志is_continuous和is_subm…

微信小程序分销返佣模式--小程序1-3级分销插件--小程序分销--

团购小程序是一种基于社区团购模式的电商平台,主要面向社区居民用户。 如果你想要开发一款分销团购小程序可以参考以下功能需求进行开发制作。 1、用户注册和登录 提供用户注册和登录功能,使用户能够创建和管理他们的账户。 2、会员管理 包括会员注…

springboot网站开发-诡异的static/images读取故障

springboot网站开发-诡异的static/images读取故障!我在本地环境测试代码,一切正常。可以读取到该路径下的图片模板,正常生成图片存储在本地D盘下面的文件夹。但是改成服务器linux环境后就不行了。打包发布后,死活读取不到图片模板。 这个故障…

HTML(一)

一、网页 1.1 什么是网页 网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。 网页是构成网站的基本元素,它通常由…

基于python+vue智慧农业小程序flask-django-php-nodejs

传统智慧农业采取了人工的管理方法,但这种管理方法存在着许多弊端,比如效率低下、安全性低以及信息传输的不准确等,同时由于智慧农业中会形成众多的个人文档和信息系统数据,通过人工方法对知识科普、土壤信息、水质信息、购物商城…

FreeRTOS任务相关API函数

1. FreeRTOS任务相关API函数介绍 函数描述uxTaskPriorityGet()获取任务优先级vTaskPrioritySet()设置任务优先级uxTaskGetNumberOfTasks()获取系统中任务的数量uxTaskGetSystemState()获取所有任务状态信息vTaskGetInfo()获取指定单个的任务信息xTaskGetCurrentTaskHandle()获…

解决1130-Host‘ ‘is not allowed to connect to this MySQL server,实现远程连接本地数据库

参考:https://blog.csdn.net/CoCo629vanilla/article/details/129008644 在使用Navicat远程连接本地数据库时,遇到了这样一个问题, 我使用 本地主机的地址,连接本地的数据库,报错host ‘’ is not allowed to connect to this my…

转座子插入序列分析2-自制分析流程

我们先观察一下测序的结果,是否有一些什么规律,因为使用的靶向富集法的测序,我们使用了特殊序列将插入了转座子的部分钓了出来,然后进行的测序,所以理论上富集到的所有序列都应该存在一段与我们钓鱼序列互补的“靶点序…

Redis实战:缓存穿透及其解决思路 实战演示

🎉🎉欢迎光临,终于等到你啦🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟持续更新的专栏Redis实战与进阶 本专栏讲解Redis从原理到实践 …

YOLOv5改进 | 图像去雾 | 利用图像去雾网络AOD-PONO-Net网络增改进图像物体检测(全网独家首发)

一、本文介绍 本文给大家带来的改进机制是利用AODNet图像去雾网络结合PONO机制实现二次增强,我将该网络结合YOLOv5针对图像进行去雾检测(也适用于一些模糊场景,图片不清晰的检测),同时本文的内容不影响其它的模块改进…

【嵌入式硬件】步进电机

1.步进电机简介 1.1步进电机基本原理 步进电机的英文是stepping motor。step的中文意思是行走、迈步。所以仅从字面上我们就可以得知,步进电机就是一步一步移动的电动机。说的官方一点儿,步进电机是一种将电脉冲信号转换成相应角位移或者线位移的电动机(直线电机)。下图为…

交通事故档案管理系统|基于JSP技术+ Mysql+Java+Tomcat的交通事故档案管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java,ssm,springboot的平台设计与实现项目系统开发资源(可…

AI程序员的崛起还是人类程序员的消亡?

最近有个对互联网行业影响极大的爆炸新闻: 我们这个圈子里有了个新玩家——AI程序员。 没错,就是那种用人工智能技术驱动的编程助手。你可能听说过Devin,这家伙不是一般的程序员,它能迅速学习新技术,还能在编码、找bug…

【.net/.net core】后台生成echarts图片解决方案及.net core html转word方法

工具环境下载: EChartsConvert:https://gitee.com/saintlee/echartsconvert EChartsConvert为生成echarts图片的服务端,用于接收参数和生成echarts图表图片BASE64编码 PhantomJS:Download PhantomJS PhantomJS用来发布EChartsConvert服务…