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

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

news 2026/2/7 18:15:13

在这里插入图片描述

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

文章目录

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/4 16:15:43

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

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

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/5 4:34:41

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/6 0:54:58

稳定币的深度剖析与展望

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

编程新知 2025/10/24 12:31:26