【JS知识点】——原型和原型链

news2024/9/20 6:11:44

文章目录

  • 原型和原型链
    • 构造函数
    • 原型
      • 显式原型(prototype)
    • 隐式原型(\_\_proto\_\_)
    • 原型链
    • 总结

原型和原型链

在js中,原型和原型链是一个非常重要的知识点,只有理解原型和原型链,才能深刻理解JS。在这一个月的面试中,原型和原型链也是一个高频知识点,现做出如下总结。

构造函数

构造函数本身就是一个函数,只是为了与普通函数区别,其首字母一般大写,构造函数与普通函数的区别在于,使用new创建实例的函数就是构造函数,直接调用则是普通函数。

function Student(){
	this.name="构造函数"
}
	var stu=new Student()
	console.log(stu.name);//构造函数

原型

显式原型(prototype)

JS是一门基于原型的语言。而JS中的原型是其中十分重要的一个概念。原型本质上就是一个对象,它的存在是为了JS中的实例对象可以获取到原型中的公共属性和公共方法
每个对象都有一个显式原型对象,当我创建一个名为Student的类时,其显式原型原型如下:

  • constructor:显式原型中包含的构造函数属性,指向该显式原型的构造函数
console.log(Student,Student.prototype);//输出展示如下图

Student的原型
于是,构造函数和原型之间存在以下关系,原型相当于每一个对象实例的私有属性,即每当创建一个对象,该对象就会有一个为空的显式原型属性。
构造函数和原型之间的关系

隐式原型(__proto__)

每一个对象(除了null)都有一个属性叫做__proto__(隐式原型),通过它可以访问到该对象的构造函数的原型对象,关系如下:
加入隐式原型的关系图
从JS的数据类型可以知道,函数类型本质是也是对象,而对象的原型又是指向其构造函数的原型对象,得出如下关系:
加入Object之后

下面是一段关于原型的代码,方便大家理解:

function Person() {
	this.name = "构造函数";
	function col() {
		console.log('我是构造函数中的方法');
	};
}
Person.prototype = {
	name: "原型",
	age: "18",
	getNum: function () {
		console.log('我是构造函数中的原型', 1);
	}
}
var per = new Person()
console.log(per.__proto__.__proto__ == Object.prototype);// true 对象实例的隐式原型(本质就是通过Object()构造出来的实例对象)的隐式原型指向Object.prototype;
console.log(per.__proto__ == Person.prototype);// true 没有给隐式原型添加数据时,其默认指向其构造函数的显式原型
console.log(per.name, per.age,per.getNum);// 原型,18 ,getNum  可以从构造函数中获取到age和name以及getNum,这里不能直接调用,但在外可以(原因不知)

// 当为实例对象per的隐式原型中添加了数据时
per.__proto__={
	name:"隐式原型",
	age:"22"
}
console.log(per.name, per.age,per.getNum); // 隐式原型,22,报错,getNum不存在
//原因,此时实例对象的__proto__指定了特定的值,不会再去其构造函数的显示原型中查找,所以找不到getNum,报错

原型链

每个对象拥有一个原型对象,通过 __proto__ 指针指向上一个原型 ,并从中继承方法和属性,同时原型对象也可能拥有原型,这样一层一层,最终指向 null。这种关系被称为原型链 (prototype chain),通过原型链一个对象会拥有定义在其他对象中的属性和方法。
最后的关系图如下:
原型链最后的关系图

总结

  • 使用new生成实例的函数就是构造函数,直接调用的就是普通函数。
  • 原型的主要作用是用来存储对象实例的公共属性和公共方法
  • 每个对象都拥有一个原型对象;每个引用类型的隐式原型都指向它的构造函数的显式原型;
  • 一个对象可以通过原型链获取其他对象的属性和方法
  • Object.prototype是所有对象的根对象,即原型链终点,其隐式原型指向Null;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云上办公系统项目

云上办公系统项目1、云上办公系统1.1、介绍1.2、核心技术1.3、开发环境说明1.4、产品展示后台前台1.5、 个人总结2、后端环境搭建2.1、建库建表2.2、创建Maven项目pom文件guigu-oa-parentcommoncommon-utilservice-utilmodelservice-oa配置数据源、服务器端口号application.yml…

D2-Net: A Trainable CNN for Joint Description and Detection of Local Features精读

开源代码:D2-Net 1 摘要 在这项工作中,我们解决了在困难的成像条件下寻找可靠的像素级对应的问题。我们提出了一种由单一卷积神经网络发挥双重作用的方法:它同时是一个密集的特征描述符和一个特征检测器。通过将检测推迟到后期阶段&#xf…

统计代码量

一 windows 在 Windows 系统上,您可以使用 PowerShell 命令行工具来统计项目的代码量。下面是使用 PowerShell 统计项目代码量的步骤: 打开 PowerShell 终端:按下 Win X 键,选择「Windows PowerShell(管理员&#xf…

SQL分库分表

什么是分库分表? 分库分表是两种操作,一种是分库,一种是分表。 分库分表又分为垂直拆分和水平拆分两种。 (1)分库:将原来存放在单个数据库中的数据,拆分到多个数据库中存放。 (2&…

【三.项目引入axios、申明全局变量、设置跨域】

根据前文《二.项目使用vue-router,引入ant-design-vue的UI框架,引入less》搭建好脚手架后使用 需求: 1.项目引入axios 2.申明全局变量 3.设置跨域 简介:axios本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客…

物理层概述(二)重点

目录前言编码与调制(1)基带信号与宽带信号编码与调制编码与调制(2)数字数据编码为数字信号非归零编码【NRZ】曼斯特编码差分曼彻斯特编码数字数据调制为模拟信号模拟数据如何编码为数字信号模拟数据调制为模拟信号物理层传输介质导…

Go语言学习的第一天(对于Go学习的认识和工具选择及环境搭建)

首先学习一门新的语言,我们要知道这门语言可以帮助我们做些什么?为什么我们要学习这门语言?就小wei而言学习这门语言是为了区块链,因为自身是php出身,因为php的一些特性只能通过一些算法模拟的做一个虚拟链&#xff0c…

IT服务管理(ITSM) 中的大数据

当我们谈论IT服务管理(ITSM)领域的大数据时,我们谈论的是关于两件不同的事情: IT 为业务提供的大数据工具/服务 - 对业务运营数据进行数字处理。IT 运营中的大数据 – 处理和利用复杂的 IT 运营数据。 面向业务运营的大数据服务…

Hadoop节点的分类与作用

文件的数据类型文件有一个stat命令元数据信息-->描述文件的属性文件有一个vim命令查看文件的数据信息分类元数据File 文件名 Size 文件大小(字节) Blocks 文件使用的数据块总数 IO Block 数据块的大小 regular file:文件类型&#xff…

YOLOV5中添加CBAM模块详解——原理+代码

目录一、前言二、CAM1. CAM计算过程2. 代码实现3. 流程图三、SAM1. SAM计算过程2. 代码实现3. 流程图四、YOLOv5中添加CBAM模块参考文章一、前言 由于卷积操作通过融合通道和空间信息来提取特征(通过NNNNNN的卷积核与原特征图相乘,融合空间信息&#xff…

模板学堂丨妙用Tab组件制作多屏仪表板并实现自动轮播

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表板模板,并…

2021年MathorCup数学建模D题钢材制造业中的钢材切割下料问题全过程文档及程序

2021年第十一届MathorCup高校数学建模 D题 钢材制造业中的钢材切割下料问题 原题再现 某钢材生产制造商的钢材切割流程如图 1 所示。其中开卷上料环节将原材料钢卷放在开卷机上,展开放平送至右侧操作区域(见图 2)。剪切过程在剪切台上完成&…

如何使用 NFTScan NFT API 检索单个 NFT 资产

一、什么是 NFT API API 是允许两个应用组件使用一组定义和协议相互通信的机制。一般来说,这是一套明确定义的各种软件组件之间的通信方法。API 发送请求到存储数据的服务器,接着把调用的数据信息返回。开发者可以通过调用 API 函数对应用程序进行开发&…

Qt 单例模式第一次尝试

文章目录摘要单例模式如何使用Qt 的属性系统总结关键字: Qt、 单例、 的、 Q_GLOBAL_STATIC、 女神节摘要 世界上第一位电脑程序设计师是名女性:Ada Lovelace (1815-1852)是一位英国数学家兼作家,她是第一位主张计算机不只可以用来算数的人…

【安装mxnet】

安装mxnet 通过创建python3.6版本的虚拟环境安装mxnet 1、安装anaconda 2、打开Anaconda prompt 3、查看环境 conda env list conda info -e 4、创建虚拟环境 conda create -n your_env_name python3.6 5、激活或者切换虚拟环境 activate your_env_name 6、安装mxnet,下面两…

规划数据指标体系方法(中)——UJM 模型

上文我跟大家分享了关于规划数据指标体系的 OSM 模型,从目标-战略-度量的角度解读了数据指标的规划方法,今天来跟大家讲一讲另一种规划数据指标体系的方法——UJM 模型。 了解 UJM UJM 模型,全称为 User-Journey-Map 模型,即用户…

日常文档标题级别规范

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

使用 try-catch 捕获异常会影响性能吗?大部分人都会答错!

使用 try-catch 捕获异常会影响性能吗?大部分人都会答错!前言一、JVM 异常处理逻辑二、关于JVM的编译优化三、关于测试的约束四、测试代码五、解释模式下执行测试六、编译模式测试七、结论前言 不知道从何时起,传出了这么一句话:…

web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI

文章目录1、HTML部分2、css部分3、JavaScript部分4、微信小程序演示1、HTML部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&l…

Java定时器Timer的使用

一、Timer常用方法 Timer应用场景&#xff1a; 1、每隔一段时间执行指定的代码逻辑&#xff08;即按周期执行任务&#xff09; 2、指定时间执行指定的代码逻辑 为方便测试并查看运行效果&#xff0c;首先先建一个类并继承TimerTask&#xff0c;代码如下: package timerTest…