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

【前端】深度解析 JavaScript 中的 new 关键字与构造函数

news 2026/2/11 1:06:47

在这里插入图片描述

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]
本文专栏: 前端

文章目录

  • 💯前言
  • 💯构造函数的核心特性
  • 💯`new` 关键字的执行机制
  • 💯实例代码与详细解析
    • 代码示例
    • 代码逐步解析
  • 💯`new` 的内部执行模拟
    • 执行过程的详细解析
  • 💯代码优化：共享方法的实现
    • 优化后的代码
    • 优化优势
  • 💯深入理解：实现 `new` 的功能
    • `myNew` 的实现
    • 实现逻辑
  • 💯小结

在这里插入图片描述

💯前言

  • 在 JavaScript 的面向对象编程中，构造函数与 new 关键字共同构成了对象创建机制的核心。构造函数是一种特殊设计的函数，其主要作用在于初始化对象属性并定义行为逻辑，而 new 关键字则是对这一过程的进一步抽象，为对象的实例化提供了便捷的方式。构造函数不仅是对象创建的基础，也是原型链继承的重要组成部分。通过结合 new 关键字，开发者能够更高效地生成具有统一特征的对象实例，从而提高代码的复用性与可维护性。
    JavaScript在这里插入图片描述

💯构造函数的核心特性

  1. 创建类的统一性：构造函数通常用于生成具有相同结构的对象，其命名遵循大写首字母的惯例，以便于与普通函数区分。
  2. 参数化初始化：构造函数允许开发者通过参数为实例对象赋予特定的初始值。
  3. 与 new 配套使用：构造函数在没有 new 的辅助时，其作用极为有限，只有通过 new 执行时，才能完成实例化过程。

💯new 关键字的执行机制

new 执行的四步操作：

  1. 创建一个空对象，作为将要返回的实例。
  2. 将空对象的原型指向构造函数的 prototype 属性。
  3. 将构造函数中的 this 指向该对象。
  4. 执行构造函数的代码，完成对象初始化。
    在 new 操作符的支持下，构造函数得以实现以下功能：
  1. 创建空对象：new 首先创建一个空对象，作为即将返回的实例。
  2. 链接原型链：将新对象的原型指向构造函数的 prototype 属性，从而实现原型继承。
  3. 绑定构造函数上下文：将构造函数内部的 this 绑定到新创建的对象，确保属性和方法正确赋值。
  4. 执行构造函数逻辑：运行构造函数的主体代码，以完成对象的初始化。

通过 new，我们不仅可以高效地实例化对象，还可以确保新对象正确继承构造函数的功能。

💯实例代码与详细解析

以下代码示例展示了如何使用构造函数和 new 关键字创建对象：

代码示例

<body><script>function Cat(name, age) {this.name = name; // 定义实例的 name 属性this.age = age;   // 定义实例的 age 属性this.speak = function() { // 为实例定义方法 speakconsole.log('我是' + this.name + '喵喵喵');};}var cat1 = new Cat('橘子', 1);</script>
</body>

代码逐步解析

  1. 构造函数的定义

    function Cat(name, age) {this.name = name; // 将 name 属性赋值给新对象this.age = age;   // 将 age 属性赋值给新对象this.speak = function() { // 定义实例的方法 speakconsole.log('我是' + this.name + '喵喵喵');};
}
    • Cat 是构造函数，其功能在于初始化对象的 name 和 age 属性。
    • 使用 this 关键字确保属性和方法绑定到实例对象。

  2. 实例化对象

    var cat1 = new Cat('橘子', 1);
    • 通过 new Cat('橘子', 1) 创建对象 cat1，同时执行了 Cat 函数。
    • cat1 是包含属性 name 和 age 以及方法 speak 的实例。

  3. 调用实例方法

    cat1.speak();
// 输出：我是橘子喵喵喵
    • 通过实例调用 speak 方法，能够正确输出绑定的 name 属性值。

💯new 的内部执行模拟

为了更直观地理解 new 的执行机制，以下代码对其内部过程进行了模拟：

function Cat(name, age) {// 模拟 new 的第一步：创建一个空对象// var Obj = new Object();// 第二步// 第三步：绑定 this 到新对象// this => Objthis.name = name;this.age = age;this.speak = function() {console.log('我是' + this.name + '喵喵喵');};// 第四步：返回新对象（隐式返回）// return Obj;
}var cat1 = new Cat('橘子', 1);

执行过程的详细解析

  1. 创建新对象：var Obj = new Object() 隐式创建了一个空对象。
  2. 链接原型链：Obj.__proto__ = Cat.prototype 将空对象的原型指向构造函数的 prototype 属性。
  3. 绑定上下文：this 被绑定到新对象 Obj，使构造函数内部的属性和方法被正确初始化。
  4. 返回新对象：若构造函数无显式返回值，new 操作会隐式返回步骤 1 中创建的对象。

这种过程解释了 new 如何将对象实例化的逻辑分解为步骤。

💯代码优化：共享方法的实现

上述代码中，speak 方法是直接定义在每个实例上的，这种方式会导致不必要的内存浪费。为了优化，我们可以将方法定义在构造函数的 prototype 上，使所有实例共享相同的方法。

优化后的代码

function Cat(name, age) {this.name = name;this.age = age;
}Cat.prototype.speak = function() {console.log('我是' + this.name + '喵喵喵');
};var cat1 = new Cat('橘子', 1);
cat1.speak(); // 输出：我是橘子喵喵喵

优化优势

  1. 内存效率更高：所有实例共享 speak 方法，不再为每个实例重复创建方法。
  2. 代码更简洁：方法逻辑集中在原型中，便于维护与扩展。

💯深入理解：实现 new 的功能

为了深入理解 new 的工作原理，我们可以尝试手动实现一个 myNew 方法，模拟其核心功能：

myNew 的实现

function myNew(constructor, ...args) {// 1. 创建一个空对象let obj = {};// 2. 将新对象的原型指向构造函数的 prototypeobj.__proto__ = constructor.prototype;// 3. 执行构造函数，将 this 绑定到新对象constructor.apply(obj, args);// 4. 返回新对象return obj;
}// 测试 myNew
function Cat(name, age) {this.name = name;this.age = age;this.speak = function() {console.log('我是' + this.name + '喵喵喵');};
}const cat2 = myNew(Cat, '小白', 2);
cat2.speak(); // 输出：我是小白喵喵喵

实现逻辑

  1. 对象创建：let obj = {} 创建一个空对象作为实例。
  2. 链接原型：通过 obj.__proto__ = constructor.prototype 实现继承。
  3. 执行构造函数：利用 constructor.apply(obj, args) 将构造函数的上下文绑定到新对象。
  4. 返回实例：手动返回经过初始化的对象实例。

这种实现方式明确揭示了 new 操作的核心机制。

💯小结

本文从基础概念到内部机制，全方位解析了 JavaScript 中的构造函数与 new 关键字，并探讨了其优化与扩展实现。

  1. new 的四步核心机制：创建对象、链接原型、绑定上下文、执行构造逻辑。
  2. 构造函数的设计：通过参数化和 this 实现对象属性和方法的灵活定义。
  3. 优化代码结构：通过原型链共享方法提升内存效率。
  4. 扩展实践：自定义 myNew 方法，以加深对语言特性的理解。

通过对这些知识点的深入探讨，我们不仅掌握了 JavaScript 对象创建的原理，还理解了如何优化代码结构，并从底层逻辑中汲取灵感，为实际开发提供指导。如果对本文内容有进一步的疑问或启发，欢迎与我继续交流探讨。

在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

相关文章：

【前端】深度解析 JavaScript 中的 new 关键字与构造函数

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;构造函数的核心特性&#x1f4af;new 关键字的执行机制&#x1f4af;实例代码与详细解析代码示例代码逐步解析 &#x1f4af;new 的内部执行模拟执行过程的详细解析 &am…...

编程日记 2024/12/10 8:47:12

2024年华中杯数学建模C题基于光纤传感器的平面曲线重建算法建模解题全过程文档及程序

2024年华中杯数学建模 C题 基于光纤传感器的平面曲线重建算法建模 原题再现 光纤传感技术是伴随着光纤及光通信技术发展起来的一种新型传感器技术。它是以光波为传感信号、光纤为传输载体来感知外界环境中的信号&#xff0c;其基本原理是当外界环境参数发生变化时&#xff0c…...

编程日记 2024/12/10 8:46:11

使用 `typing_extensions.TypeAlias` 简化类型定义：初学者指南

使用 typing_extensions.TypeAlias 简化类型定义&#xff1a;初学者指南 什么是 TypeAlias&#xff1f;安装 typing_extensions示例代码&#xff1a;如何使用 TypeAlias示例 1&#xff1a;为简单类型定义别名示例 2&#xff1a;为复杂类型定义别名示例 3&#xff1a;结合 Union…...

编程日记 2024/12/10 8:41:05

如何快速批量把 PDF 转为 JPG 或其它常见图像格式？

在某些特定场景下&#xff0c;将 PDF 转换为 JPG 图片格式却具有不可忽视的优势。例如&#xff0c;当我们需要在不支持 PDF 查看的设备或软件中展示文档内容时&#xff0c;JPG 图片能够轻松被识别和打开&#xff1b;此外&#xff0c;对于一些网络分享或社交媒体发布的需求&…...

编程日记 2024/12/10 8:40:03

如何在组织中塑造和强化绩效文化？

在组织中塑造和强化绩效文化是一个系统性的工程。 一、明确绩效目标与期望 设定清晰目标 组织应根据自身战略规划&#xff0c;将长期目标分解为具体、可衡量、可实现、相关联、有时限&#xff08;SMART&#xff09;的短期和中期绩效目标。例如&#xff0c;一家连锁餐饮企业的…...

编程日记 2024/12/10 8:36:59

OllyDbg、CE简单介绍

基础知识&#xff1a; 想要破解软件&#xff0c;需要一些基础知识&#xff1a; 文件格式&#xff1a;Windows对应PE、Linux对应ELF、IOS对应Mash-0。文件格式是指操作系统规定的每个段&#xff08;代码段、数据段、堆、栈&#xff09;的大小、顺序等信息。 汇编语言&#xff1…...

编程日记 2024/12/10 8:34:57

Python函数——函数的返回值定义语法

一、引言 在Python中&#xff0c;函数的返回值是其核心功能之一&#xff0c;它使得函数能够将计算结果传递给调用者&#xff0c;进而推动程序的逻辑和功能实现。理解和掌握函数的返回值语法&#xff0c;不仅能够提高代码的模块化和可读性&#xff0c;还能使程序更加高效和灵活…...

编程日记 2024/12/10 8:31:53

【Pandas】pandas isna

Pandas2.2 General Top-level missing data 方法描述isna(obj)用于检测数据中的缺失值isnull(obj)用于检测数据中的缺失值notna(obj)用于检测数据中的非缺失值notnull(obj)用于检测数据中的非缺失值 pandas.isna() pandas.isna() 是 Pandas 库中的一个函数&#xff0c;用于…...

编程日记 2024/12/10 8:30:50

mysql 数据库表的大小

mysql 数据库表的大小 Mysql 查看数据库各个表占用空间 mysql如何查看数据库所有表大小 在MySQL中&#xff0c;要查看数据库所有表的大小&#xff0c;可以使用以下方法&#xff1a; 方法一&#xff1a;使用information_schema数据库 首先&#xff0c;通过命令行或图形界面…...

编程日记 2024/12/10 8:28:47

（6）JS-Clipper2之ClipperOffset

1. 描述 ClipperOffset类封装了对打开路径和关闭路径进行偏移(膨胀/收缩)的过程。 这个类取代了现在已弃用的OffsetPaths函数&#xff0c;该函数不太灵活。可以使用不同的偏移量(增量)多次调用Execute方法&#xff0c;而不必重新分配路径。现在可以在一次操作中对开放和封闭路…...

编程日记 2024/12/10 8:24:40

如何在Ubuntu中利用repo和git地址下载获取imx6ull的BSP

01-设置git的用户名和邮箱 git config --global user.name "suwenhao" git config --global user.email "2487872782qq.com"这里不设置的话后面在第5步的repo配置中还是会要求输入&#xff0c;而且以后进行相关操作都要输入&#xff0c;不妨现在就进行配置…...

编程日记 2024/12/10 8:23:39

Ruby On Rails 笔记5——常用验证下

3.Validation Options 3.1 :allow_nil 当验证值为nil时:allow_nil选项会跳过验证 class Coffee < ApplicationRecordvalidates :size, inclusion: { in: %w(small medium large),message: "%{value} is not a valid size" }, allow_nil: true end irb> Cof…...

编程日记 2024/12/10 8:22:38

JS听到了因果的回响

这是我学习JS的第11天了&#xff0c;&#xff0c;&#xff0c;我现在赶着周末学JS&#xff0c;然后还有二十多天就期末了呵呵呵。。。 图片切换模块 思路分析&#xff1a; 这是实现的代码&#xff0c;建议还是把不同的变量定义出来比较合适&#xff1a; //获取三个盒子// 小盒…...

编程日记 2024/12/10 8:21:37

【高中生讲机器学习】28. 集成学习之 Bagging 随机森林!

创建时间&#xff1a;2024-12-09 首发时间&#xff1a;2024-12-09 最后编辑时间&#xff1a;2024-12-09 作者&#xff1a;Geeker_LStar 嘿嘿&#xff0c;你好呀&#xff01;我又来啦~~ 前面我们讲完了集成学习之 Boooooosting&#xff0c;这篇我们来看看集成学习的另一个分支…...

编程日记 2024/12/10 8:19:33

硬件设计 | Altium Designer软件PCB规则设置

基于Altium Designer&#xff08;24.9.1&#xff09;版本 嘉立创PCB工艺加工能力范围说明-嘉立创PCB打样专业工厂-线路板打样 规则参考-嘉立创 注意事项 1.每次设置完规则参数都要点击应用保存 2.每次创建PCB&#xff0c;都要设置好参数 3.可以设置默认规则&#xff0c;将…...

编程日记 2024/12/10 8:16:30

【Elasticsearch】实现用户行为分析

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

编程日记 2024/12/10 8:14:28

python字符串处理基础操作总结

1.去掉空格或者特殊符号 input_str.strip() #去掉所有空格 input_str.lstrip() #去掉左边空格 input_str.rstrip() #去掉右边空格 def print_hi():input_str 今天天气不错&#xff0c;风和日丽 out input_str.strip()print(input_str)print(out)if __name__ __main__:print…...

编程日记 2024/12/10 8:13:27

电子商务人工智能指南 6/6 - 人工智能生成的产品图像

介绍 81% 的零售业高管表示&#xff0c; AI 至少在其组织中发挥了中等至完全的作用。然而&#xff0c;78% 的受访零售业高管表示&#xff0c;很难跟上不断发展的 AI 格局。 近年来&#xff0c;电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...

编程日记 2024/12/10 8:12:26

【论文阅读】相似误差订正方法在风电短期风速预报中的应用研究

文章目录 概述&#xff1a;摘要1. 引言2. 相似误差订正算法&#xff08;核心&#xff09;3. 订正实验3.1 相似因子选取3.2 相似样本数试验3.3 时间窗时长实验 4. 订正结果分析4.1 评估指标对比4.2 风速曲线对比4.3 分风速段订正效果评估4.4 风速频率统计 5. 结论与讨论 概述&am…...

编程日记 2024/12/10 8:06:17

贪心算法 - 学习笔记 【C++】

2024-12-09 - 第 38 篇 贪心算法 - 学习笔记 作者(Author): 郑龙浩 / 仟濹(CSND账号名) 贪心算法 学习课程&#xff1a; https://www.bilibili.com/video/BV1f84y1i7mv/?spm_id_from333.337.search-card.all.click&vd_source2683707f584c21c57616cc6ce8454e2b 一、基本…...

编程日记 2024/12/10 8:05:16

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/2/4 23:29:22

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/2/6 5:04:18

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2026/1/28 16:00:47