跟着 MDN 学JavaScript day_25：JavaScript对象基础技能测试实战解析

引言从理论到实践的跨越在前一篇文章中我们系统学习了JavaScript对象的基础知识。然而编程学习的一个核心原则是理论知识必须通过实践来巩固。阅读代码和理解概念只是第一步亲自动手编写代码、解决问题才是真正掌握知识的关键。MDN为对象基础章节设计了四个循序渐进的技能测试题目从基本的属性访问和方法调用开始逐步深入到创建复杂的嵌套对象、使用this实现方法复用最后引入构造函数来消除代码重复。一、技能测试一对象的属性访问与方法调用1.1 任务描述提供一个简单的cat对象字面量包含name、breed、color属性和一个greeting方法。要求完成三项操作。constcat{name:Bertie,breed:Cymric,color:white,greeting:function(){console.log(Meow!);},};constcatName;// 等待赋值// 在此处补全代码1.2 三项操作要求序号要求使用方式①将name属性的值存储到catName变量中括号表示法②运行greeting方法点表示法③将color属性值更新为black点表示法1.3 代码实现constcat{name:Bertie,breed:Cymric,color:white,greeting:function(){console.log(Meow!);},};// ① 使用括号表示法获取 name 属性值constcatNamecat[name];// ② 使用点表示法调用 greeting 方法cat.greeting();// ③ 更新 color 属性值cat.colorblack;1.4 设计意图分析这道题在一组操作中有意识地引导同时使用点表示法和括号表示法强化对比认知方式语法本题用途适用场景点表示法cat.greeting()调用方法 更新属性属性名已知的字面量括号表示法cat[name]获取属性值赋值给变量属性名在变量中或动态计算两种方式可以并存使用开发者应根据具体场景选择最合适的方式。二、技能测试二构建复杂嵌套对象2.1 任务描述创建一个表示乐队的对象字面量。这个对象不仅包含基本属性更关键的是包含一个albums数组——数组中的每个元素本身又是一个包含name和released属性的对象。这种嵌套结构模拟了真实开发中常见的JSON数据组织形式。letbandInfo;// 在此处补全代码2.2 构建嵌套对象constband{name:The Beatles,nationality:British,genre:Rock,members:4,formed:1960,split:1970,albums:[{name:Please Please Me,released:1963,},{name:Abbey Road,released:1969,},],};数据结构可视化band (Object) ├── name: The Beatles ├── nationality: British ├── genre: Rock ├── members: 4 ├── formed: 1960 ├── split: 1970 └── albums: (Array) ├── [0] (Object) │ ├── name: Please Please Me │ └── released: 1963 └── [1] (Object) ├── name: Abbey Road └── released: 19692.3 链式访问构建 bandInfo 字符串这道题目的真正难点在于最后一步——构建bandInfo字符串需要综合运用多种知识bandInfo${band.name}是一支来自${band.nationality}的${band.genre}乐队成立于${band.formed}年共有${band.members}名成员。他们于${band.split}年解散。他们的首张专辑《${band.albums[0].name}》于${band.albums[0].released}年发行。;band.albums[0].name链式访问路径拆解band → 整个 band 对象 .albums → 访问对象属性 → 得到数组 [{...}, {...}] [0] → 数组索引访问 → 得到第一个专辑对象 {name: Please..., ...} .name → 访问对象属性 → 得到 Please Please Me步骤语法类型转换结果1band.albumsObject → Array[{...}, {...}]2band.albums[0]Array → Object{name: Please Please Me, released: 1963}3band.albums[0].nameObject → StringPlease Please Me2.4 综合技能运用技能在本题中的应用模板字符串用...${}...拼接多段信息点表示法band.name、band.nationality等数组索引band.albums[0]访问第一个元素嵌套链式访问band.albums[0].name穿透多层对象字面量创建band对象和albums子对象三、技能测试三this关键字实现方法复用3.1 任务描述重写cat对象的greeting方法使其输出Hello, said Bertie the Cymric.格式。核心约束重写后的方法必须能在任何相同结构的 cat 对象上正常工作不能硬编码具体的属性值。constcat{name:Bertie,breed:Cymric,color:white,greeting:function(){// 在此处重写方法},};constcat2{name:Elfie,breed:Aphrodite Giant,color:ginger,greeting:function(){// 一样的重写},};3.2 代码实现constcat{name:Bertie,breed:Cymric,color:white,greeting:function(){console.log(Hello, said${this.name}the${this.breed}.);},};constcat2{name:Elfie,breed:Aphrodite Giant,color:ginger,greeting:function(){console.log(Hello, said${this.name}the${this.breed}.);},};cat.greeting();// Hello, said Bertie the Cymric.cat2.greeting();// Hello, said Elfie the Aphrodite Giant.3.3 this 的运行时绑定机制cat.greeting() 被调用 ↓ this cat调用者 ↓ this.name → Bertie this.breed → Cymric ↓ 输出Hello, said Bertie the Cymric. cat2.greeting() 被调用 ↓ this cat2调用者 ↓ this.name → Elfie this.breed → Aphrodite Giant ↓ 输出Hello, said Elfie the Aphrodite Giant.对比硬编码写法this 写法cat 的方法cat.name→ 只能用于 catthis.name→ 自适应调用者cat2 的方法必须重写为cat2.name完全相同的代码复用性❌ 不可复用✅ 代码完全相同相同的代码产生了不同的输出——这正是面向对象编程中多态的体现。3.4 暴露的问题greeting方法的定义在两个对象中完全重复了。这违反了编程中的重要原则——DRYDon’t Repeat Yourself。代码重复会带来维护问题修改格式需要在两处分别修改容易遗漏和出错。四、技能测试四构造函数消除代码重复4.1 问题根源在任务三中每个 cat 对象都需要复制一份完全相同的greeting方法代码。当需要维护或创建更多 cat 时问题会急剧恶化修改 greeting 格式 → 需要修改每一个 cat 对象 新增 cat3 → 又要复制粘贴一遍 新增 cat4 → 再复制粘贴一遍 ... → 代码膨胀、难以维护4.2 解决方案构造函数构造函数允许定义一个模板然后使用new关键字创建任意数量的对象实例。按照惯例构造函数以大写字母开头functionCat(name,breed,color){this.namename;this.breedbreed;this.colorcolor;this.greetingfunction(){console.log(Hello, said${this.name}the${this.breed}.);};}constcatnewCat(Bertie,Cymric,white);constcat2newCat(Elfie,Aphrodite Giant,ginger);cat.greeting();// Hello, said Bertie the Cymric.cat2.greeting();// Hello, said Elfie the Aphrodite Giant.4.3 new 关键字的工作机制new Cat(Bertie, Cymric, white) ↓ ① 创建一个空对象 → {} ② 将 this 绑定到新对象 → this {} ③ 执行构造函数代码 this.name Bertie this.breed Cymric this.color white this.greeting function() { ... } ④ 自动返回新对象 → return this无需手动 return4.4 重构前后对比维度重构前对象字面量×N重构后构造函数创建方式const cat { name: ..., ... }const cat new Cat(...)greeting定义每个对象各写一遍只写一次修改格式需要在每处修改只改一处新增实例复制粘贴全部代码一行代码new Cat(...)代码量O(n) 随实例数增长O(1) 恒定4.5 构造函数的本质价值构造函数 对象创建模板 Cat(name, breed, color) | | new 关键字 | ┌─────┼─────┬─────┐ ▼ ▼ ▼ ▼ cat cat2 cat3 catN 每个实例自动拥有相同的结构和方法 数据不同但行为一致这种集中管理、分散使用的模式是面向对象编程的核心优势——一处定义处处生效。五、四道题目学习路径总结测试核心技能复杂度关键收获测试一属性访问 方法调用⭐点表示法与括号表示法的场景选择测试二嵌套对象创建与链式访问⭐⭐多层数据结构穿透与模板字符串测试三this关键字运行时绑定⭐⭐⭐编写与具体数据解耦的通用方法测试四构造函数消除代码重复⭐⭐⭐DRY原则 抽象思维 批量创建学习路径图测试一基本操作 │ 属性读取、方法调用、值更新 │ 点表示法 ↔ 括号表示法 ▼ 测试二嵌套结构 │ 对象包含数组、数组包含对象 │ 链式访问band.albums[0].name ▼ 测试三this 复用 │ 方法代码与具体数据分离 │ 暴露问题代码重复 ▼ 测试四构造函数 │ 消除重复、模板化创建 │ DRY原则 → 一处定义处处生效总结JavaScript的对象系统远比这四道题所展示的要丰富和复杂——原型链、类语法、getter/setter、属性描述符等高级主题还在前方等待探索。但扎实掌握这些基础知识至关重要因为它们是理解更高级概念的基石。知识要点一句话总结点 vs 括号表示法属性名已知用点属性名为变量用括号嵌套链式访问obj.prop[index].nested逐层穿透this指向调用方法的对象实现方法复用构造函数new ClassName()批量创建同类型对象消除重复编程概念的学习需要经历认识 → 理解 → 应用 → 反思的完整循环。当我们能够熟练使用对象字面量组织数据、使用this编写通用方法、使用构造函数创建实例家族时就已经具备了继续深入学习的坚实基础。