JavaScript语言精粹第三章解读 | 吃透JS对象核心！告别90%日常开发对象Bug

To_OC
123 阅读9分钟

前言

最近重读《JavaScript语言精粹》，复盘JS对象基础的时候，我真的发现了自己多年的编码陋习。

写了好几年前端，每天都在和对象打交道：接口回参解析、页面状态存储、配置项封装，全是{}，看似简单到不值一提的知识点，却是日常Bug重灾区、面试高频考点。

以前我经常遇到这些离谱问题：

  • 对象链式取值莫名报错崩溃
  • 复制一个对象，修改新值居然改坏了原数据
  • 遍历对象时多出一堆莫名其妙的属性
  • 自定义属性和原型属性傻傻分不清

归根结底，就是只懂对象用法，不懂底层规则。

今天我用实操踩坑+面试考点+通俗大白话，完整复盘JS对象所有核心知识点，没有枯燥教科书话术，每一点都是能直接落地的编码干货，新手入门、老手查漏补缺都适配！

一、先纠正核心认知：JS万物皆对象

很多人学了很久JS，依然分不清基础类型和引用类型，这里记死一条终身受用的规则：

JS 简单基本类型只有5个：数字、字符串、布尔值、null、undefined

除此之外，全是对象！

数组、函数、正则、普通对象，全部属于对象范畴。

对象的本质是：可变的键控集合，说白了就是键值对的容器，每一组属性都由「属性名+属性值」组成。

✅ 核心硬性规则（面试必考）

  1. 属性名：支持任意字符串，包括空字符串、特殊字符
  2. 属性值：支持所有数据类型，唯独不能是 undefined

二、对象字面量：最优雅的对象创建方式

日常开发中99%的场景，我们都用{}字面量创建对象，不用new、简洁直观，是JS最推荐的建对象方式。

1、两种属性名写法（重点区分）

对象属性名有两种书写方式，适配不同业务场景，很多人踩坑就是因为乱用写法：

  • 标识符写法：简洁方便，仅支持纯字母、数字、下划线的合法标识，日常常规开发首选
  • 字符串写法：万能写法，支持连字符、空格、保留字等特殊字符

image.png

2、实操代码示例

// 空对象
const emptyObj = {}

// 含特殊字符的属性，必须用字符串写法
const stooge = {
  "first-name": "Jerome",
  "last-name": "Howard"
}

// 标准嵌套对象（接口数据高频场景）
const flight = {
  airline: "Oceanic",
  number: 815,
  departure: {
    IATA: "SYD",
    city: "Sydney"
  },
  arrival: {
    IATA: "LAX",
    city: "Los Angeles"
  }
}

⚠️ 易错踩坑点

只要属性名包含-、空格、中文、保留字，绝对不能用点号取值、标识符写法，否则直接报错！

三、属性检索：点号和中括号的生死区别

读取对象属性只有两种方式：. 点号、[] 中括号。看似简单，却是前端最高频的报错来源。

1、核心使用规则

  • 点号：简洁高效，但有强制限制，只支持合法标识符属性名
  • 中括号：万能取值，适配所有特殊属性名、动态属性名

2、经典报错复盘（我初学必踩的坑）

// ✅ 正确：特殊属性名用中括号取值
stooge["first-name"] // "Jerome"

// ❌ 致命错误！解析器会拆解为 stooge.first - name 减法运算
stooge.first-name  

// ✅ 正确：常规属性点号链式取值
flight.departure.city // "Sydney"

3、不存在的属性取值规则

读取对象未定义的属性，不会报错，直接返回 undefined，这是JS的容错机制，但也埋下隐患。

console.log(stooge.age) // undefined

4、终极踩坑：undefined 链式取值报错

这是生产环境最常见的 TypeError 报错！如果属性值为 undefined，继续链式取值会直接崩溃。

flight.equipment // undefined

// ❌ 报错：无法读取 undefined 的属性
flight.equipment.model 

// ✅ 旧项目安全取值方案（短路运算兜底）
flight.equipment && flight.equipment.model

// ✅ 优雅填充默认值，解决空值问题
const middleName = stooge["middle-name"] || "暂无昵称"

短路运算为什么能保命？

flight.equipment && flight.equipment.model

这行代码的逻辑是：先判断左边，左边为真，才会执行右边

执行流程：

  1. 先算 flight.equipment

    • 有值 → 继续
    • 没值（undefined）→ 直接停止，不执行后面！

  2. 只有 equipment 存在，才会取 .model

📌 面试高频考点

面试官必问：点号和中括号取值的区别？如何避免对象链式取值报错？

四、属性更新：新增与覆盖机制

JS对象是可变引用类型，支持动态修改、新增属性，规则极简且固定：

  1. 属性已存在：直接覆盖原有值
  2. 属性不存在：自动新增该属性

实操示例

// 1、覆盖已有属性
stooge["first-name"] = "Jerry"

// 2、新增自定义属性
stooge.nickname = "Curly"

// 3、新增嵌套对象属性
flight.equipment = { model: "Boeing 777" }
flight.status = "航班延误"

💡 开发小技巧

日常拼接接口入参、动态修改页面配置，都依靠这个特性，无需重复创建对象，性能更优。

五、对象引用：90%人都踩过的赋值大坑

这是面试核心考点+日常高频Bug根源，也是很多前端开发者的认知盲区。

核心结论（死记硬背）

JS对象永远是引用传递，不存在完整拷贝！

基本类型赋值是「值拷贝」，互不影响；对象赋值是「内存地址拷贝」，多个变量指向同一个堆内存对象，一改全改。

image.png

踩坑实战案例

const stooge = { name: "Jerome" }

// 不是复制对象！只是复制了引用地址
const x = stooge
// 修改新变量属性，原对象同步变更
x.nickname = "Curly"

console.log(stooge.nickname) // "Curly" 原数据被篡改！

经典面试题解析

// a、b、c 分别指向3个独立空对象
let a = {}, b = {}, c = {} 

// 链式赋值：三者全部指向同一个空对象
a = b = c = {}

⚠️ 避坑总结

需要独立对象、互不影响时，必须手动做浅拷贝/深拷贝，直接赋值一定会篡改原数据！

六、原型与原型链：对象的底层灵魂

所有字面量创建的JS对象，默认都会挂载到 Object.prototype，天生拥有原型继承能力，这是JS复用属性的核心机制。

image.png

1、自定义原型继承（面试手写题）

// 经典原型继承封装方法
const beget = function (o) {
  // 创建空构造函数
  const F = function () {}
  // 绑定原型对象
  F.prototype = o
  // 返回继承实例
  return new F()
}

// 让新对象继承 stooge 的所有属性
const anotherStooge = beget(stooge)

2、原型链查找规则（必背）

访问对象属性时，JS会逐级向上查找：

  1. 优先查找 对象自身属性
  2. 自身无匹配，查找 父原型属性
  3. 逐级向上追溯，直到 Object.prototype
  4. 全部无匹配，返回 undefined

image.png

3、核心避坑：原型只读不写

很多人误解：修改子对象会影响原型！大错特错

原型继承只在读取属性时生效，更新、新增属性只会作用于当前对象，绝对不会污染原型。

image.png

// 给子对象新增自有属性
anotherStooge.nickname = "Moe"
// 原型对象数据完全不变
console.log(stooge.nickname) // "Curly"

4、更改原型属性，立刻对继承该原型对象可见

原型关系是一种动态的关系。如果我们添加一个新的属性到原型中，该属性会立即对所有 基于该原型创建的对象可见。

stooge.profession = 'actor';
another_stooge.profession // 'actor'

七、对象反射：精准区分自有/继承属性

开发中需要精准判断属性类型、属性来源，核心靠两个API：typeof、hasOwnProperty。

1、typeof 判断属性类型

typeof flight.number      // "number"
typeof flight.status      // "string"
typeof flight.arrival     // "object"
typeof flight.unknown     // "undefined"

2、typeof 判断原型链属性类型

typeof flight.toString // 'function'
typeof flight.constructor // 'function'

image.png

3、hasOwnProperty 核心用法（高频过滤）

这是区分自有属性和原型继承属性的唯一可靠方法，只会检测对象自身属性，不遍历原型链。

image.png

// 自身属性 → true
stooge.hasOwnProperty("first-name") // true

// 继承自原型的属性，非自身属性 → false
anotherStooge.hasOwnProperty("first-name") // false

📌 面试考点

如何过滤对象原型属性，只获取自有属性？答案：搭配 hasOwnProperty 判断

八、属性枚举：for in 遍历的隐藏大坑

for in 是遍历对象的基础方法，但自带隐藏坑，新手极易写出Bug。

1、原生遍历特性

for in 会遍历对象所有可枚举属性，包含：自身属性 + 原型继承属性，会产生大量冗余数据。

2、标准无坑写法（生产必备）

const name;
// 错误写法：会遍历原型属性
for (name in stooge) {
  console.log(name + ": " + stooge[name]);
}

// ✅ 正确写法：过滤原型，只遍历自身属性
for (name in anotherStooge) {
  if (anotherStooge.hasOwnProperty(name)) {
    console.log("自有属性：", name);
  }
}

3、按正确顺序遍历

var i;
var properties = [
    'first-name',
    'middle-name',
    'last-name',
    'profession'
];
for (i = 0; i < properties.length; i += 1) {
    document.writeln(properties[i] + ': '+
    another_stooge[properties[i]]);
};

image.png

image.png

⚠️ 超级易错点

for in 遍历顺序不固定，业务开发绝对不能依赖遍历顺序取值，会出现偶现诡异Bug！

九、属性删除：delete 的局限性

delete 关键字专门用于删除对象自身可枚举属性。

基础用法

delete stooge.nickname;
console.log(stooge.nickname); // undefined

another_stooge.nickname // 'Moe'

// 删除 another_stooge 的 nickname 属性，从而暴露出原型的 nickname 属性
delete another_stooge.nickname;
another_stooge.nickname // 'Curly'

image.png

两大核心局限性（避坑重点）

  1. 无法删除原型链上的继承属性
  2. 无法删除内置不可枚举属性（如 Object.prototype）

💡 开发建议

单纯删除属性用 delete，如需清空整个对象，直接赋值空对象obj = {}性能更优。

十、工程化优化：杜绝全局变量污染

前端老旧项目最常见的问题：全局变量泛滥，导致命名冲突、变量覆盖、代码污染。

最优解决方案：单全局变量封装，统一命名空间。

// 全局唯一命名空间
const MYAPP = {}

// 所有业务对象统一挂载
MYAPP.stooge = {
  "first-name": "Jerome",
  "last-name": "Howard"
};

MYAPP.flight = {
  airline: "Oceanic",
  number: 815
};

image.png

这种思想也是现代ES6模块化、Webpack打包的核心底层逻辑：隔离作用域，避免全局污染。

个人复盘总结

重新完整梳理JS对象知识点后，我最大的感受是：前端80%的复杂问题，根源都是基础不牢。

我们后续学习的深浅拷贝、原型继承、闭包、Vue/React响应式原理，全部建立在JS对象的基础规则之上。

最后汇总核心避坑要点：

  1. 特殊属性名必用中括号取值，杜绝点号滥用报错
  2. 对象是引用传递，赋值不等于拷贝，修改需谨慎
  3. 原型只参与读取，不参与修改，不会污染父对象
  4. 遍历对象必加 hasOwnProperty 过滤冗余原型属性
  5. 统一命名空间，杜绝全局变量污染

把这些基础细节吃透，能直接规避日常90%的对象相关Bug，面试基础题也能稳稳拿分！

avatar
文章
阅读
粉丝