news 2026/3/9 14:56:23

HoRain云--深入理解JavaScript对象:从基础到高级

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HoRain云--深入理解JavaScript对象:从基础到高级

🎬 HoRain云小助手:个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想,就是为了理想的生活!


⛳️ 推荐

前些天发现了一个超棒的服务器购买网站,性价比超高,大内存超划算!忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称

专栏介绍

《C语言》

本专栏主要撰写C干货内容和编程技巧,让大家从底层了解C,把更多的知识由抽象到简单通俗易懂。

《网络协议》

本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘,一起解密网络协议在运行中协议的基本运行机制!

《docker容器精解篇》

全面深入解析 docker 容器,从基础到进阶,涵盖原理、操作、实践案例,助您精通 docker。

《linux系列》

本专栏主要撰写Linux干货内容,从基础到进阶,知识由抽象到简单通俗易懂,帮你从新手小白到扫地僧。

《python 系列》

本专栏着重撰写Python相关的干货内容与编程技巧,助力大家从底层去认识Python,将更多复杂的知识由抽象转化为简单易懂的内容。

《试题库》

本专栏主要是发布一些考试和练习题库(涵盖软考、HCIE、HRCE、CCNA等)

目录

⛳️ 推荐

专栏介绍

JavaScript 对象:理解与应用

什么是 JavaScript 对象

创建对象的方式

1. 对象字面量

2. 使用 new Object()

3. 工厂函数

4. 构造函数

对象属性操作

1. 访问属性

2. 添加/修改属性

3. 删除属性

原型与原型链

1. 原型链概念

2. 原型链工作原理

对象继承

1. 原型继承

2. 类继承(ES6)

对象高级技巧

1. 模块模式(闭包应用)

2. 优雅处理对象默认值

3. 深度合并对象(支持数组 + 去重)

对象的常用方法

1. Object.keys() 和 Object.values()

2. Object.assign()

3. Object.freeze()(冻结对象)

对象在实际开发中的应用

1. 作为数据结构存储

2. 作为配置对象

3. 作为缓存机制

最佳实践

总结


JavaScript 对象:理解与应用

什么是 JavaScript 对象

在 JavaScript 中,对象是一种引用类型,用于存储键值对(key-value pairs)的数据结构。对象是 JavaScript 中最核心的概念之一,几乎所有 JavaScript 代码都离不开对象。

根据知识库中的信息,JavaScript 有 8 种数据类型,其中 7 种是基本类型(Number、String、Boolean、Undefined、Null、Symbol、BigInt),1 种是引用类型(Object)。对象属于引用类型。

创建对象的方式

1. 对象字面量

// 最常见的创建对象方式 const person = { name: "张三", age: 30, greet: function() { console.log(`Hello, I'm ${this.name}`); } }; // 访问对象属性 console.log(person.name); // "张三" person.greet(); // "Hello, I'm 张三"

2. 使用new Object()

const person = new Object(); person.name = "张三"; person.age = 30; person.greet = function() { console.log(`Hello, I'm ${this.name}`); };

3. 工厂函数

function createPerson(name, age) { return { name: name, age: age, greet: function() { console.log(`Hello, I'm ${this.name}`); } }; } const person = createPerson("张三", 30);

4. 构造函数

function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log(`Hello, I'm ${this.name}`); }; } const person = new Person("张三", 30);

对象属性操作

1. 访问属性

// 点语法 console.log(person.name); // 方括号语法(适用于属性名包含特殊字符或变量) console.log(person["name"]);

2. 添加/修改属性

person.job = "Developer"; // 添加新属性 person.age = 31; // 修改现有属性

3. 删除属性

delete person.age; // 删除属性

原型与原型链

1. 原型链概念

JavaScript 采用词法作用域,对象的原型链是 JavaScript 继承机制的核心。

function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; const person = new Person("张三"); person.sayHello(); // "Hello, I'm 张三"

2. 原型链工作原理

当访问对象的属性时,JavaScript 会先在对象自身查找,如果找不到,会沿着原型链向上查找,直到找到或到达原型链顶端(null)。

对象继承

1. 原型继承

function Student(name, grade) { Person.call(this, name); // 继承父类属性 this.grade = grade; } // 继承父类方法 Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.study = function() { console.log(`${this.name} is studying in grade ${this.grade}`); }; const student = new Student("李四", 10); student.sayHello(); // "Hello, I'm 李四" student.study(); // "李四 is studying in grade 10"

2. 类继承(ES6)

class Person { constructor(name) { this.name = name; } sayHello() { console.log(`Hello, I'm ${this.name}`); } } class Student extends Person { constructor(name, grade) { super(name); this.grade = grade; } study() { console.log(`${this.name} is studying in grade ${this.grade}`); } } const student = new Student("王五", 12); student.sayHello(); // "Hello, I'm 王五" student.study(); // "王五 is studying in grade 12"

对象高级技巧

1. 模块模式(闭包应用)

const CounterModule = (function() { let privateCount = 0; function privateIncrement() { privateCount++; } function privateDecrement() { privateCount--; } return { increment: function() { privateIncrement(); console.log(`Count: ${privateCount}`); }, decrement: function() { privateDecrement(); console.log(`Count: ${privateCount}`); }, getCount: function() { return privateCount; } }; })(); CounterModule.increment(); // Count: 1 CounterModule.increment(); // Count: 2 console.log(CounterModule.getCount()); // 2

2. 优雅处理对象默认值

// 传统写法 const getUserName = (user) => { return user?.profile?.name || '匿名用户'; }; // 优化写法:解构+默认值穿透 const getUserName = ({ profile: { name = '匿名用户' } = {} } = {}) => name; console.log(getUserName({ profile: { name: '张三' } })); // 张三 console.log(getUserName({ profile: {} })); // 匿名用户 console.log(getUserName()); // 匿名用户

3. 深度合并对象(支持数组 + 去重)

function deepMerge(target, source) { if (typeof target !== 'object' || target === null) { return source; } if (Array.isArray(target) && Array.isArray(source)) { return [...new Set([...target, ...source])]; } for (const key in source) { if (source.hasOwnProperty(key)) { if (typeof source[key] === 'object' && source[key] !== null) { target[key] = deepMerge(target[key] || {}, source[key]); } else { target[key] = source[key]; } } } return target; } // 使用示例 const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { b: { d: 3 }, e: 4 }; const merged = deepMerge(obj1, obj2); console.log(merged); // { a: 1, b: { c: 2, d: 3 }, e: 4 }

对象的常用方法

1.Object.keys()Object.values()

const person = { name: "张三", age: 30 }; console.log(Object.keys(person)); // ["name", "age"] console.log(Object.values(person)); // ["张三", 30]

2.Object.assign()

const target = { a: 1 }; const source = { b: 2 }; Object.assign(target, source); console.log(target); // { a: 1, b: 2 }

3.Object.freeze()(冻结对象)

const person = { name: "张三", age: 30 }; Object.freeze(person); person.age = 31; // 无法修改 console.log(person.age); // 30

对象在实际开发中的应用

1. 作为数据结构存储

// 存储用户信息 const users = [ { id: 1, name: "张三", email: "zhangsan@example.com" }, { id: 2, name: "李四", email: "lisi@example.com" } ]; // 查找特定用户 const user = users.find(u => u.id === 1); console.log(user.name); // "张三"

2. 作为配置对象

// 配置对象 const config = { apiUrl: "https://api.example.com", timeout: 5000, debug: true }; // 使用配置 fetch(config.apiUrl, { timeout: config.timeout }) .then(response => console.log("Data fetched")) .catch(error => console.error("Error:", error));

3. 作为缓存机制

const cache = {}; function fetchData(url) { if (cache[url]) { console.log("Using cached data"); return cache[url]; } // 模拟API请求 const data = { url, content: "Sample data" }; cache[url] = data; return data; } console.log(fetchData("https://api.example.com/data")); // 从API获取 console.log(fetchData("https://api.example.com/data")); // 使用缓存

最佳实践

  1. 优先使用const:对象一旦创建,尽量不要重新赋值,但可以修改对象内部属性。

  2. 使用有意义的属性名:让代码更易读。

  3. 避免使用varvar有变量提升和作用域问题,优先使用letconst

  4. 合理使用原型:不要在原型上添加大量方法,以免影响性能。

  5. 使用Object.freeze:对于不应被修改的对象,可以使用Object.freeze

  6. 使用 ES6+ 的对象特性:如对象简写、计算属性名等。

总结

JavaScript 对象是语言的核心,理解对象的工作原理对掌握 JavaScript 至关重要。对象不仅是数据存储的容器,也是实现封装、继承和多态的基础。通过掌握对象的创建、属性操作、原型链和继承,你可以编写更高效、可维护的 JavaScript 代码。

正如知识库[4]中提到的:"15个 JavaScript 高级技巧,让你的代码更优雅高效",对象相关的技巧是实现优雅代码的关键之一。理解并熟练运用这些技巧,将使你的 JavaScript 代码更加专业和高效。

❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/8 2:55:26

AnimeGANv2降本部署方案:无需GPU,CPU也能高效运行

AnimeGANv2降本部署方案:无需GPU,CPU也能高效运行 1. 背景与挑战:AI风格迁移的部署瓶颈 随着深度学习技术的发展,图像风格迁移已成为AI应用中最受欢迎的方向之一。AnimeGANv2作为其中表现优异的轻量级模型,能够将真实…

作者头像 李华
网站建设 2026/3/5 14:30:38

SoundSwitch终极方案:Windows音频设备智能切换完整指南

SoundSwitch终极方案:Windows音频设备智能切换完整指南 【免费下载链接】SoundSwitch C# application to switch default playing device. Download: https://soundswitch.aaflalo.me/ 项目地址: https://gitcode.com/gh_mirrors/so/SoundSwitch 你是否经常被…

作者头像 李华
网站建设 2026/3/8 2:24:59

5分钟搞定云音乐歌词下载:新手必备的网易云QQ音乐歌词获取指南

5分钟搞定云音乐歌词下载:新手必备的网易云QQ音乐歌词获取指南 【免费下载链接】163MusicLyrics Windows 云音乐歌词获取【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 还在为找不到心爱歌曲的歌词而烦恼吗&#xff…

作者头像 李华
网站建设 2026/3/7 7:28:32

零代码体验MediaPipe Holistic:设计师的AI动捕入门

零代码体验MediaPipe Holistic:设计师的AI动捕入门 引言:当设计师遇见AI动作捕捉 想象一下,你正在设计一个虚拟角色的交互界面,需要捕捉真实人体的自然动作作为参考。传统方案要么需要昂贵设备,要么得学习复杂软件。…

作者头像 李华
网站建设 2026/3/9 15:05:21

FanControl完全指南:5个技巧让Windows风扇控制更智能

FanControl完全指南:5个技巧让Windows风扇控制更智能 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/…

作者头像 李华