JS中多种方式创建对象详解

最新推荐文章于 2025-12-15 15:15:21 发布

自由翱翔碧海蓝

最新推荐文章于 2025-12-15 15:15:21 发布

阅读量42

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 js

本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/133154841

js 专栏收录该内容

440 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细阐述了JavaScript中创建对象的四种常见方法：对象字面量、构造函数、Object.create()以及ES6的类。通过示例代码，展示了每种方式的用法，帮助开发者根据需求选择合适的创建对象的策略，以实现更高效、结构化的代码组织。

在JavaScript中，有多种方式可以创建对象。本文将详细介绍这些方式，并提供相应的源代码示例。

使用对象字面量

对象字面量是创建对象最简单的方式之一。通过使用花括号 {} 并在其中定义属性和方法，可以创建一个新的对象。

const person = {
   
   
  name: 'John',
  age: 30,
  greet:

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

自由翱翔碧海蓝

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

JavaScript-批量创建Object对象详解

主营前端方向，技术栈是vue

12-10

1183

批量创建Object对象(用工厂方法创对象，构造函数创对象、说明流程补充、instanceof检查对象是否类实例，用构造函数和prototype原型创对象、说明流程)

JavaScript DOM 对象详解

xycxycooo的博客

07-16

1288

在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。

参与评论您还未登录，请先登录后发表或查看评论

【JavaScript】创建对象的方式详解

lph159的博客

03-20

921

对象是一组键值对（key-value pair）的集合，其中键是字符串（ES6 之后也可以是 Symbol），值可以是任何数据类型，包括字符串、数字、数组、函数，甚至是另一个对象。对象是 JavaScript 处理数据的核心结构，可以看作是键值存储的容器。// 输出: Hello, my name is Alice`);// 输出: Hello, my name is Alice在这个例子中，personnameage和greet，其中greet。

【JavaScript】创建对象的三种方式详解

lph159的博客

09-14

1119

对象字面量是JavaScript中最简单、最直观的创建对象的方式。通过直接定义键值对来描述对象的属性和方法，代码可读性高，适合创建简单对象。age: 25,构造函数是一种用于创建对象的函数，通常与new关键字搭配使用。通过构造函数，开发者可以为多个对象实例定义统一的属性和方法。JavaScript 提供了多种方式来创建对象，从最简单的字面量方式到功能强大的构造函数，再到灵活的，每种方式都有其适用的场景。

JavaScript详解五 ——对象

奋斗的小前端

01-14

749

在JavaScript中，创建对象有多种方法，每种方法都有其特点和适用场景，以下是几种常见的对象创建方法：1. **利用`new Object`创建对象**- 使用`new`关键字调用`Object`函数来创建对象。- 可以通过`对象.属性名 = 属性值`的方式向对象添加属性，通过`对象.属性名 = 新值`修改属性，使用`delete 对象.属性名`删除属性。- 对象的属性名不强制遵守标识符规范，但建议遵循。

JavaScript 内置对象详解

2503_91259466的博客

04-13

1204

原始值包装对象（String、Number、Boolean）扩展了原始类型的操作能力集合对象（Array、Map、Set）提供了多种数据存储和操作方式Date和Math对象处理时间和数学运算RegExp提供强大的文本模式匹配能力JSON对象简化了数据序列化和反序列化Promise和现代对象如ProxyReflect支持高级编程模式掌握这些内置对象的使用方法，能够显著提高 JavaScript 开发效率和代码质量。在实际开发中，应根据具体需求选择最合适的对象和方法。

JavaScript中的对象与Math对象详解

weixin_34511754的博客

05-08

223

本章节深入探讨了JavaScript中的数据类型和对象，特别是对象的创建和属性的访问、修改以及Math对象的使用。作者解释了对象与基础数据类型的差异，阐述了对象字面量的定义方法和属性的动态添加与删除。同时，通过Math对象的例子，展示了如何在JavaScript中进行数学运算和一些特定的计算。阅读本章后，读者将对JavaScript中的数据结构有更深入的理解。

JavaScript 中的 Window 对象详解

林见鹿鸣

07-24

737

Window 对象是浏览器环境中 JavaScript 的全局对象，它代表一个浏览器窗口或标签页，是 JavaScript 运行时环境的核心载体。所有全局变量、函数和对象都以 Window 对象为宿主，同时它还提供了与浏览器窗口交互的各种方法和属性。在浏览器中，window是一个顶层对象，不需要通过其他对象引用即可直接访问，例如可以直接简写为alert()。Window 对象是浏览器环境中 JavaScript 的全局对象，所有全局变量和函数都是它的属性和方法。

【JavaScript】document 对象详解

lph159的博客

02-20

1899

在 Web 开发中，`document` 对象是连接 JavaScript 与网页内容的桥梁。通过操作 `document` 对象，开发者可以动态地访问和修改网页的结构、内容和样式，从而实现丰富的交互效果。

JavaScript中创建对象的7种模式详解

10-20

这是当前在JavaScript中创建对象最常见的方式。示例如下： ```javascript function Person(name, age, job) { this.name = name; this.age = age; this.job = job; } Person.prototype.sayName = function() { ...

详解JavaScript基于面向对象之创建对象（2）

10-23

在JavaScript中创建对象有多种方式，标题提示我们文章主要将深入介绍原型方式以及其他综合方式创建对象。描述部分强调了原型方式在面向对象创建对象中的重要性和优势，同时也指出了这种实现方式存在的某些问题。...

JavaScript 根据数组对象的某个指定属性分组合并，并累加金额

最新发布

zhangyao940330的博客

12-15

156

item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。

商城后台管理系统 02 添加规格参数-动态表单

weixin_52943021的博客

12-15

170

Boolean。

javascript 性能优化实战：异步和延迟加载

小伙伴们全都Lucky！

12-11

932

本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。

第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）

2402_87628679的博客

12-11

956

gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。

ESM (ES Modules) 和 CJS (CommonJS)

Irene1991的博客

12-11

648

ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav

华为云 DevUI初体验：如何快速入门项目搭建

康宝的博客

12-10

545

本文详细介绍了基于Angular 18和华为云DevUI的企业级Web应用开发环境搭建流程。主要内容包括：Node.js 20+环境准备、Angular CLI 18安装、项目初始化配置（选择SCSS样式）、DevUI组件库及图标库的安装。文章重点说明了如何在项目中正确配置DevUI样式和模块，并演示了基础组件的使用。通过这套技术方案，开发者可以快速构建具备丰富UI组件支持的企业级应用，提高开发效率。

第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）

2402_87628679的博客

12-11

1231

对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';

JavaScript创建对象详解：从基础到高级

JavaScript提供了多种创建对象的方式，以下是详细讲解： 1. 直接创建 JavaScript中最基础的创建对象的方法是直接创建一个空对象，然后为它添加属性和方法。例如： ```javascript var person1 = new Object(); ...