当前位置：首页 > news >正文

【JavaScript笔记】01- 原型及原型链（面试高频内容）

news 来源：原创 2025/7/3 17:41:20

前言

JavaScript作为前端入门三件套之一，也是前端求职的必会知识，重要性不言而喻。

这个系列分享个人学习JavaScript的记录，和大家一起学习讨论。

下面介绍关于原型&原型链的相关重要知识点。

1、构造函数创建对象

function Student() {}
var student = new Student();
student.name = 'xiaoming';
console.log(student.name) // xiaomingvar student2 = new Student();
student2.name = 'xiaohong';
console.log(student.name) // xiaohong

在这个案例中，Student 就是一个构造函数，用 new 创建了实例对象 student和studen2。

2、prototype

2.1、prototype属性的定义

在 JavaScript 中，prototype 是一个特殊的属性，它存在于所有函数对象上。当你使用 new 关键字调用一个函数来创建一个新对象时，这个新对象会有一个内部属性 [[Prototype]]，通常通过 __proto__ 或 Object.getPrototypeOf() 来访问。这个内部属性指向了函数的 prototype 属性。

2.2、 prototype属性的作用

prototype 属性的主要作用是实现继承。在 prototype 上添加属性或方法时，所有通过该函数创建的实例都会共享这些属性和方法。

2.3、案例分析

function Student() {}
//Student 是一个构造函数，用于创建新的对象。Student.prototype.name = 'xiaoming';
//在 Student 的 prototype 上添加了一个属性 name，其值为 'xiaoming'。所有通过 Student 创建的实例都会共享这个 name 属性。var student1 = new Student();
var student2 = new Student();
//使用 new Student() 创建了两个实例 student1 和 student2。console.log(student1.name) // xiaoming
console.log(student2.name) // xiaoming
//由于 student1 和 student2 的原型链上都指向了 Student.prototype，而 Student.prototype 上有一个 name 属性，因此它们都能访问到 name 属性的值 'xiaoming'。

student1.__proto__ 和 student2.__proto__：这两个实例的 [[Prototype]] 属性都指向了 Student.prototype。

构造函数与实例原型之间的关系图如下：

3、proto

function Student() {}
var student = new Student();console.log(student.__proto__ === Student.prototype); // true

关系图：

是否有原型指向构造函数或者实例呢？

4、constructor

原型并不能指向实例，因为一个构造函数可以生成多个实例；

但原型可以指向构造函数：constructor, 每个原型都有一个constructor属性指向相关的构造函数。

function Student() {}
console.log(Student === Student.prototype.constructor); // true

5、实例与原型

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性（向上查找），如果还查不到，就去找原型的原型，一直找到最顶层为止。

function Student() {}Student.prototype.name = 'xiaoming';var student = new Student();student.name = 'xiaohong';
console.log(student.name) // xiaohongdelete student.name;
console.log(student.name) // xiaoming

这里的案例，给实例对象 student 添加了 name 属性，当打印student.name的时候，结果为xiaohong。

当删除了student的 name 属性时，我们尝试读取student.name，从 student 对象中找不到 name 属性，这时候就会向上查找，从 student 的原型也就是 student.__proto__，也就是Student.prototype中查找，结果为xiaoming。

6、原型的原型

如果我们在实例的原型上还没有找到属性呢？这时候又向上查找（原型的原型），那原型的原型又是什么？

var obj = new Object();
obj.name = 'xiaoming'
console.log(obj.name) // xiaoming

原型对象就是通过 Object 构造函数生成的。关系图：

7、原型链

Object.prototype的原型又是什么？

所有原型链的末端都是 null。例如，普通对象的原型链最终会指向 Object.prototype，而 Object.prototype 的原型是 null。

//结合上述的例子
console.log(Object.getPrototypeOf(student1)); // Student.prototype
console.log(Object.getPrototypeOf(Student.prototype)); // Object.prototype
console.log(Object.getPrototypeOf(Object.prototype)); // null

总结

函数的 prototype 属性：

每个函数都有一个 prototype 属性，它是一个对象。

通过 new 关键字调用函数创建对象时，新对象的 [[Prototype]] 会指向该函数的 prototype 属性。

对象的 [[Prototype]] 属性：

每个对象都有一个内部属性 [[Prototype]]，通常通过 __proto__ 或 Object.getPrototypeOf() 来访问。

这个属性指向了该对象的原型对象。

原型链的查找机制：

当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到为止，或者到达原型链的末端（null）。

共享属性和方法：

通过在 prototype 上添加属性和方法，所有通过该函数创建的实例都可以共享这些属性和方法。

如果你喜欢这个系列的内容，请多多点赞、收藏，期待你的留言评论~

关注我，获取最新文章消息。

【JavaScript笔记】01- 原型及原型链（面试高频内容）

前言 JavaScript作为前端入门三件套之一，也是前端求职的必会知识，重要性不言而喻。这个系列分享个人学习JavaScript的记录，和大家一起学习讨论。下面介绍关于原型&原型链的相关重要知识点。 1、构造函数创建对象 function Student(…...

编程日记 2025/7/3 17:41:20

【Python】第五弹---深入理解函数：从基础到进阶的全面解析

✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】目录 1、函数 1.1、函数是什么 1.2、语法格式 1.3、函数参数 1.4、函数返回值 1.5、变量作用域 1.6、函数…...

编程日记 2025/7/3 17:19:46

动态规划DP 数字三角形模型（模型分析+例题分析+C++代码实现）（数字三角形、摘花生、最低通行费用、方格取数、传纸条）

总体概览数字三角形原题链接 AcWing 898.数字三角形题目描述给定一个如下图所示的数字三角形，从顶部出发，在每一结点可以选择移动至其左下方的结点或移动至其右下方的结点，一直走到底层，要求找出一条路径，使路…...

编程日记 2025/6/28 5:23:35

2025 最新flutter面试总结

目录 1.Dart是值传递还是引用传递？ 2.Flutter 是单引擎还是双引擎 3. StatelessWidget 和 StatefulWidget 在 Flutter 中有什么区别？ 4.简述Dart语音特性 5. Navigator 是什么？在 Flutter 中 Routes 是什么？ 6、Dart 是不是…...

编程日记 2025/6/30 12:33:35

Java后端之AOP

AOP：面向切面编程，本质是面向特定方法编程引入依赖： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency>示例：记录…...

编程日记 2025/6/28 4:02:52

JS中对数组的操作哪些会改变原数组哪些不会？今天你一定要记下！

JavaScript 数组方法：变更原数组与不变更原数组的区别在 JavaScript 中，数组是非常常见且重要的数据结构。作为开发者，我们常常需要使用数组方法来处理数组数据。但是，数组的不同方法会以不同的方式影响原数组，它们可…...

编程日记 2025/7/1 3:37:23

ubuntu x64下交叉编译ffmpeg到目标架构为aarch架构的系统

参考链接 https://blog.csdn.net/qq_46396470/article/details/137794498...

编程日记 2025/7/2 21:04:25

Java进阶（二）：Java设计模式

目录设计模式一.建模语言二.类之间的关系 1.依赖关系 2.关联关系 3.聚合关系 4.组合关系 5.继承关系 6.实现关系三.面向对象设计原则单一职责原则开闭原则里氏替换原则依赖倒置接口隔离原则迪米特原则组合/聚合(关联关系)复用原则四.23种设计模式…...

编程日记 2025/6/29 23:34:07

python学opencv|读取图像（四十二）使用cv2.add()函数实现多图像叠加

【1】引言前序学习过程中，掌握了灰度图像和彩色图像的掩模操作： python学opencv|读取图像（九）用numpy创建黑白相间灰度图_numpy生成全黑图片-CSDN博客 python学opencv|读取图像（四十）掩模：三…...

编程日记 2025/7/1 1:12:36

DIY QMK量子键盘

最近放假了，趁这个空余在做一个分支项目，一款机械键盘，量子键盘取自固件名称QMK（Quantum Mechanical Keyboard）。键盘作为计算机或其他电子设备的重要输入设备之一，通过将按键的物理动作转换为数字信号&am…...

编程日记 2025/7/2 3:56:32

【公式】卢布贬值风险：义乌到俄罗斯贸易的汇率陷阱

卢布贬值风险：义乌到俄罗斯贸易的汇率陷阱具体实例与推演假设一位中国义乌的商人，计划出口一批价值100万人民币的商品到俄罗斯。最初的汇率是1人民币兑换100卢布。初始状态： 商品价值：100万人民币初始汇率：1人民币…...

编程日记 2025/6/28 7:01:15

1月27（信息差）

🌍喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿 🎄Kimi深夜炸场：满血版多模态o1级推理模型！OpenAI外全球首次！Jim Fan：同天两款国…...

编程日记 2025/6/28 3:00:55

Linux常见问题解决方法--1

常见安全工具、设备工具端口及漏洞扫描：Namp、Masscan 抓包：Wireshark，Burpsuite、Fiddler、HttpCanary Web自动化安全扫描：Nessus、Awvs、Appscan、Xray 信息收集：Oneforall、hole 漏洞利用：MSF、…...

编程日记 2025/6/29 15:00:38

Python 数据清洗与处理常用方法全解析

在数据处理与分析过程中，缺失值、重复值、异常值等问题是常见的挑战。本文总结了多种数据清洗与处理方法：缺失值处理包括删除缺失值、固定值填充、前后向填充以及删除缺失率高的列；重复值处理通过删除或标记重复项解决数据冗余问题&#xff1…...

编程日记 2025/7/3 8:04:38

《企业应用架构模式》笔记

领域逻辑表模块和数据集一起工作-> 先查询出一个记录集，再根据数据集生成一个（如合同）对象，然后调用合同对象的方法。这看起来很想service查询出一个对象，但调用的是对象的方法，这看起来像是充血模型…...

编程日记 2025/7/1 7:41:30

顶刊JFR｜ROLO-SLAM：首个针对不平坦路面的车载Lidar SLAM系统

摘要基于激光雷达（LiDAR）的同步定位与地图构建（SLAM）被认为是在恶劣环境中提供定位指导的一种有效方法。然而，现成的基于激光雷达的SLAM方法在经过不平坦地形时，尤其是在垂直方向相关的部分，会…...

编程日记 2025/7/1 7:37:22

第05章 09 使用Lookup绘制地形数据高程着色图

在VTK（Visualization Toolkit）中，可以使用颜色查找表（Lookup Table，简称LUT）来根据高程数据对地形进行着色。以下是一个示例代码，展示了如何使用VTK和C来读取地形数据，并使用颜色查找…...

编程日记 2025/6/27 21:11:13

【深度学习入门_机器学习理论】K近邻法(KNN)

本部分主要为机器学习理论入门_K近邻法(KNN)，书籍参考 “ 统计学习方法（第二版）”。学习目标： 了解k近邻算法的基本概念、原理、应用；熟悉k近邻算法重要影响要素；熟悉kd树原理与优化应用。开始本算法之…...

编程日记 2025/7/1 22:34:58

基于Django的Boss直聘IT岗位可视化分析系统的设计与实现

【Django】基于Django的Boss直聘IT岗位可视化分析系统的设计与实现（完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统采用Python作为主要开发语言，利用Django这一高效、安全的W…...

编程日记 2025/7/2 17:33:10

编程语言中的常见Bug及解决方案

在编程过程中，不同语言有其独特的特性和挑战，这也导致了各种常见Bug的出现。本文将总结几种主流编程语言中的常见Bug，包括JavaScript、Python、C/C、Java和Go，并提供相应的解决方案和案例。一、JavaScript中小数相加精度不准确的…...

编程日记 2025/6/29 13:13:09

DeepSeek API 的获取与对话示例

代码文件下载：Code 在线链接：Kaggle | Colab 文章目录注册并获取API环境依赖设置 API单轮对话多轮对话流式输出更换模型注册并获取API 访问 https://platform.deepseek.com/sign_in 进行注册并登录： 新用户注册后将赠送 10 块钱余额&#…...

编程日记 2025/7/2 18:14:15

数据库SQLite和SCADA DIAView应用教程

课程简介此系列课程大纲主要包含七个课时。主要使用到的开发工具有：SQLite studio 和 SCADA DIAView。详细的可成内容大概如下： 1、SQLite 可视化管理工具SQLite Studio ：打开数据库和查询数据；查看视频 2、创建6个变量&#x…...

编程日记 2025/7/2 0:21:26

Elasticsearch+kibana安装(简单易上手）

下载ES( Download Elasticsearch | Elastic ) 将ES安装包解压缩解压后目录如下: 修改ES服务端口（可以不修改） 启动ES 记住这些内容验证ES是否启动成功下载kibana( Download Kibana Free | Get Started Now | Elastic ) 解压后的kibana目…...

编程日记 2025/7/2 18:20:52

（CICD）自动化构建打包、部署(Jenkins + maven+ gitlab+tomcat)

一、平滑发布与灰度发布 **什么叫平滑：**在发布的过程中不影响用户的使用，系统不会因发布而暂停对外服务，不会造成用户短暂性无法访问； **什么叫灰度：**发布后让部分用户使用新版本，其它用户使用旧版本&am…...

编程日记 2025/7/2 23:30:55

Android源码阅读笔记（二）—— 启动模式

Android源码阅读笔记（二）—— 启动模式初章 1、为什么学习启动模式 Activity的启动模式其实是一个在面试中经常会被关注的问题，那么它的重要性体现在哪里？ A：在多数的开发场景中，我们似乎也没有怎么关注过…...

编程日记 2025/6/29 13:01:34

AndroidCompose Navigation导航精通2-过渡动画与路由切换

目录前言路由切换NavControllerBackStackEntry过渡动画过渡原理缩放动画渐隐动画滑动动画动画过渡实战前言在当今的移动应用开发中，导航是用户与应用交互的核心环节。随着 Android Compose 的兴起，它为开发者提供了一种全新的、声明式的方式来构建用户界面，同时也带来了更…...

编程日记 2025/6/28 1:45:15

PCL ——LevenbergMarquardt非线性最小二乘法拟合圆柱（C++详细过程版）

目录一、算法概述1、圆柱方程2、LM算法流程二、代码实现三、结果展示一、算法概述目前求解非线性最小二乘问题常用算法有高斯-牛顿方法(Gauss-Newton algorithm，GN 算法)、列文伯格-马夸尔特方法(Levenberg-Marquardt algorithm，LM 算法)。本文采用 LM 算法进行圆柱拟合。 …...

编程日记 2025/7/3 12:18:34

GD32的GD库开发

所有的Cortex-M处理器都有相同的SysTick定时器，因为CMSIS-Core头文件中定义了一个名为SysTick的结构体。这个定时器可以用作延时函数，不管是STM32的芯片还是GD32，AT32的芯片，delay函数都可以这么写，只要它是cortex-M…...

编程日记 2025/6/30 10:42:23

DeepSeek R1：推理模型新纪元与价格战

标题：DeepSeek R1：推理模型新纪元与价格战文章信息摘要： DeepSeek R1的发布标志着推理模型研究的重要转折点，其采用四阶段强化学习训练方法，结合监督微调和拒绝采样，显著提升了模型的推理能力。这一进展不…...

编程日记 2025/7/1 21:32:43

一文简单回顾Java中的String、StringBuilder、StringBuffer

简单说下String、StringBuilder、StringBuffer的区别 String、StringBuffer、StringBuilder在Java中都是用于处理字符串的，它们之间的区别是String是不可变的，平常开发用的最多，当遇到大量字符串连接的时候，就用StringBuilder&am…...

编程日记 2025/7/3 12:08:19

机器学习：支持向量机

支持向量机（Support Vector Machine）是一种二类分类模型，其基本模型定义为特征空间上的间隔最大的广义线性分类器，其学习策略便是间隔最大化，最终可转化为一个凸二次规划问题的求解。假设两类数据可以被 H x : w T x…...

编程日记 2025/6/30 16:55:40

简单的停车场管理系统的C语言实现示例

以下是一个简单的停车场管理系统的C语言实现示例。该示例使用结构体来管理停车场的车位信息，并提供基本车辆进入、离开以及显示停车场状态功能。 #include <stdio.h> #include <stdlib.h> #include <string.h>#define MAX_SLOTS 10 // 最大车位数…...

编程日记 2025/7/3 9:06:32

网络工程师（3）指令系统基础

一、寻址方式 （一）指令寻址顺序寻址：通过程序计数器（PC）加1，自动形成下一条指令的地址。这是计算机中最基本、最常用的寻址方式。跳跃寻址：通过转移类指令直接或间接给出下一条指令的地址。跳…...

编程日记 2025/7/1 15:02:41

基于Python的智慧物业管理系统

【Python】基于Python的智慧物业管理系统（完整系统源码开发笔记详细部署教程）✅ 目录一、项目背景二、研究目的三、项目意义四、项目功能五、项目创新点六、开发技术介绍七、项目界面展示（部分展示，详细看视频）八、项…...

编程日记 2025/6/30 15:41:39

使用 Vue 3 的 watchEffect 和 watch 进行响应式监视

Vue 3 的 Composition API 引入了 <script setup> 语法，这是一种更简洁、更直观的方式来编写组件逻辑。结合 watchEffect 和 watch，我们可以轻松地监视响应式数据的变化。本文将介绍如何使用 <script setup> 语法结合 watchEffect 和 watch&…...

编程日记 2025/6/30 4:57:59

环境变量

目录一.概念介绍 1.1命令行参数二.一个例子，一个环境变量 2.1查看环境变量 2.2如何理解环境变量呢？存储的角度 2.3环境变量最开始从哪里来的呢？ 概括： 1. 环境变量的存储 2. 命令查找过程 3. 环境变量表和命令行参数…...

编程日记 2025/7/2 19:56:49

Scale AI 创始人兼 CEO采访

Scale AI 创始人兼 CEO 亚历山大王（Alexander Wang）首次亮相节目接受采访。他的公司专注于为人工智能工具提供准确标注的数据。早在 2022 年，王成为世界上最年轻的白手起家亿万富翁。美国在全球人工智能竞赛中的地位，以及它与中…...

编程日记 2025/7/2 10:56:23

MongoDB中常用的几种高可用技术方案及优缺点

MongoDB 的高可用性方案主要依赖于其内置的副本集 (Replica Set) 和 Sharding 机制。下面是一些常见的高可用性技术方案： 1. 副本集 (Replica Set) 副本集是 MongoDB 提供的主要高可用性解决方案，确保数据在多个节点之间的冗余存储和自动故障恢复。副…...

编程日记 2025/7/3 17:09:11

【Erdas实验教程】001：Erdas2022下载及安装教程

文章目录一、Erdas2022安装教程1. 安装主程序2. 拷贝补丁3. 安装LicenseServer4. 运行软件二、Erdas2022下载地址一、Erdas2022安装教程 Erdas2022全新界面如下： 1. 安装主程序下载安装包并解压，以管理员身份运行 “setup.exe” 或 “setup.vbs”&…...

编程日记 2025/7/2 3:59:27

Python3 【函数】水平考试：精选试题和答案

Python3 【函数】水平考试：精选试题和答案 Python 函数考试试卷及答案。共计30题，其中选择题15题、填空题10题、编程题5题，试卷满分为100分。一、选择题（每题 2 分，共 30 分） 以下哪个关键字用于定义函数…...

编程日记 2025/7/1 21:47:57

stm8s单片机（三）时钟系统与时钟切换

一个单片机系统要正常运行应包括四个部分: 电源，晶振，复位电路，下载电路。晶振就是时钟。 stm8有四种时钟源 HSE (High Speed External clock signal)HSE user-ext (High Speed External clock signal user external)HSI (High Speed Inter…...

编程日记 2025/7/1 14:30:17

ChatGPT高效处理图片技巧使用详解

ChatGPT，作为OpenAI开发的预训练语言模型，主要用于生成自然语言文本的任务。然而，通过一些技巧和策略，我们可以将ChatGPT与图像处理模型结合，实现一定程度上的图像优化和处理。本文将详细介绍如何使用ChatGPT高效处理图…...

编程日记 2025/6/28 3:47:51

文章目录 1.下载并安装 Halcon1.1 下载Halcon软件1.2 安装Halcon 2.下载Camport_Halcon_gentl SDK2.1 下载Camport_Halcon_gentl SDK2.2 Camport Halcon SDK介绍2.3 Halcon SDK环境配置与运行2.3.1 SDK环境配置2.3.2 获取相机支持的参数2.3.3 配置相机参数并运行相机 2.4 遍历H…...

编程日记 2025/7/2 23:59:50

C语言二级

//请编写函数fun()，该函数的功能是：计算并输出给定整数n的所有因 //子（不包括1和自身）之和。规定n的值不大于1000。例如，在主函数 //中从键盘给n输入的值为856，则输出为：sum 763。 //注意&…...

编程日记 2025/7/1 5:55:24

软工_软件工程

2025.01.24：软件工程导论学习笔记第2节软件工程 2.1 软件发展 - 四个阶段2.1.1 程序设计2.1.2 程序系统2.1.3 软件工程2.1.4 第四阶段 2.2 软件危机2.2.1 软件危机 - 定义2.2.2 软件危机 - 主要表现 2.1 软件发展 - 四个阶段 2.1.1 程序设计软件生产个体化&…...

编程日记 2025/6/30 12:25:43

【creo】CREO配置快捷键方式和默认单位

了解CREO工作目录设置设置快捷方式启动目录，就能自动加载其中的配置。一、通过键盘快捷方式保存配置 creo_parametric_customization.ui 文件： 二、通过映射键录制通过这种方式可以监听鼠标的点击事件。使用键盘快捷方式无法找到需要的动作时候可…...

编程日记 2025/6/30 4:58:48

go理论知识——Go Channel 笔记 [特殊字符]

go理论知识——Go Channel 笔记 📝 1. 基本概念 🧠 1.1 Channel 是什么？ Channel 是 Go 语言中用于在不同 Goroutine 之间进行通信的机制。Channel 是类型安全的，意味着你只能发送和接收特定类型的数据。 1.2 Channel 的创建 …...

编程日记 2025/6/27 6:10:50

微信小程序压缩图片

由于wx.compressImage(Object object) iOS 仅支持压缩 JPG 格式图片。所以我们需要做一下特殊的处理： 1.获取文件，判断文件是否大于设定的大小 2.如果大于则使用canvas进行绘制，并生成新的图片路径 3.上传图片 async chooseImage() {let …...

编程日记 2025/6/29 18:11:43