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

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

news 2025/7/10 9:12:31

在这里插入图片描述

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

文章目录

  • 💯前言
  • 💯构造函数的核心特性
  • 💯`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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/8 16:42:22

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/7/9 19:31:15

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/7/9 19:47:35

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/7/7 21:48:53

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/7/9 16:52:47

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/7/8 18:23:04

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/7/9 23:07:36

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2025/7/8 17:10:39

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

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

编程新知 2025/6/21 15:21:51

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2025/7/8 8:58:14