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

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

news 2026/2/10 19:23:57

在这里插入图片描述

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

文章目录

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/31 12:52:15

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

编程新知 2026/2/10 2:09:10

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2026/2/1 13:41:21

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

编程新知 2026/1/9 12:18:52