聊聊对象，先别紧张

说实话，JS的对象kan着像个大坑。

哈哈，其实它就是个装东西的盒子。

咱就是说你只要把属性塞进去，它就Neng帮你记住。

懂了没？Ru果还有点迷糊，别急，我慢慢来。

对象到底是啥玩意儿

先把概念拆开来——对象是键值对的集合。

键叫属性名，值Ke以是任何类型。

比如：

const cat = {
  name: '小花',
  age: 2,
  meow {
    console.log;
  }
};

这段代码里name、age、meowdou是属性。

注意，函数也是属性，只不过我们叫它方法。

对象字面量：Zui直接的方式

Zui常见、Zui直观的创建方式就是大括号 {}。

一句话，一个属性，用冒号分隔；多个属性，用逗号隔开。

比如：

const user = {
  username: 'alice',
  score: 99,
};

别忘了Zui后一个逗号是Ke以省的，ES6以后geng宽容。

构造函数 + new：批量生成

当你要一次性造出一堆结构相同的对象时用构造函数Zui合适。

先写一个函数，首字母大写，这是一条不成文的规矩。

function Person {
  this.name = name;
  this.age = age;
}

然后用 new 调用它：

const p1 = new Person;
const p2 = new Person;

每次 new dou会走五步——别担心，我下面给你拆解。

new 背后的五件事

第一步：创建一个空对象 {}，内部记作 _this。

第二步：把这个空对象的 __proto__ 指向构造函数的 prototype。

第三步：把构造函数内部的 this 自动绑定到刚才那个空对象上。

第四步：执行构造函数体，把属性和方法“灌”进去。

第五步：Ru果构造函数手动返回了一个对象，就返回它；否则返回刚才那个空盒子 _this。

模拟 new 的代码

// 模拟new关键字的完整逻辑
function myNew {
  // . 创建一个全新的空对象
  const _this = {};
  // . 绑定原型关系：空对象的__proto__指向构造函数的prototype
  _this.__proto__ = constructor.prototype;
  // . 执行构造函数代码，并绑定this指向
  const result = constructor.apply;
  // . 返回实例对象：判断构造函数是否手动返回对象类型
  return typeof result === 'object' && result !== null ? result : _this;
}
// 测试一下
function Car {
  this.name = name;
  this.color = color;
}
Car.prototype.drive = function {
   console.log;
};
const su7 = myNew;
su7.drive; // SU7 正在行驶，颜色是 green
console.log; // true

# 对象和原型链——别慌，这里有点抽象但hen重要

每个对象dou有一个内部指针 __proto__，指向它的原型。

Ru果在自己身上找不到属性，就会去原型上找——这叫原型链查找。

A 对象没有 sayHi 方法，但 A.__proto__ 有，它就Neng调用成功。

"为什么百度不收录"的小插曲 🤔

问：我写了好多关于 JS 对象的文章，却发现百度根本不给收录，是怎么回事？

A：说实话，这通常跟以下几个因素有关：

页面缺少有效标题和 meta description，搜索引擎不知道内容主旨。

PJAX、SPA 单页渲染导致爬虫只Nengkan到空白页面。

站点 robots.txt 把相关路径屏蔽掉了。

LCP、CLS 等核心网页指标太差，被判定为低质量。

还有可Neng是内容重复率高，被认为是抄袭。

P.S. 把这些问题逐项排查，一般就Neng让百度重新收录啦。你懂的，多检查下！

# 动态添加/删除属性——随心所欲地改箱子大小

Babel 那些语法糖dou好玩，但Zui根本的是点语法和中括号语法两种增删改查方式。

. 点语法 - Zui直观但有局限性

const obj = {};
obj.name = '张三';
obj.age = 30;
delete obj.age; // 删除成功

. 中括号语法 - 属性名Ke以是变量或特殊字符

// 注意这里故意加一点口头禅，让气氛轻松。

const key = 'favorite food';
obj = '火锅'; // 属性名里有空格也Neng搞定
console.log; // 火锅
delete obj; // 删除同理

# 对象遍历技巧 —— 把盒子里的东西全部搬出来kankan . for...in 循环 —— 老古董，却仍然管用

// 别忘了配合 hasOwnProperty 防止遍历到原型属性。

for  {
   if ) {
      console.log;
   }
}

. Object.keys / values / entries —— geng现代、geng安全

// 一句话，一行代码搞定。

Object.entries.forEach => console.log);

# 深拷贝 vs 浅拷贝 —— 小心别把数据弄丢了 . 浅拷贝 —— 引用仍旧指向同一个内存地址

// 常见手段：Object.assign、展开运算符。

const a = {x:1, nested:{y:2}};
const b = {...a}; // 浅拷贝
b.nested.y = 99; 
console.log; // 会变成99，因为 nested 是共享引用

. 深拷贝 —— 完全独立的新副本

// 简单粗暴的方法 JSON.parse) ，但注意不Neng拷贝函数和 Symbol。

const deepCopy = JSON.parse);
deepCopy.nested.y = 5;
console.log; // 不受影响，仍然是99

# 常见错误速查表

"忘记 new"导致 this 指向全局——结果返回 undefined。例子：Car; // 没有实例化！

"直接修改 prototype"会影响所有实例——慎重！

"使用 delete 删除属性后再访问，会得到 undefined，而不是报错。"

"键名冲突时中括号Ke以救急，但Zui好避免硬编码。"

"深拷贝时忽略 Date、RegExp 等特殊对象，需要自行处理。"

# 小结 & 再聊一点点感想

Dude，你Yi经从“啥dou不会”跨越到了“Neng自己敲代码”。真的hen棒！哈哈~.

回顾一下：

A）对象字面量适合一次性创建；

B）构造函数 + new 用于批量生成；

C）原型链决定属性查找顺序；

D）增删改查灵活使用点语法或中括号；

E）遍历要选对工具；

C…呃，不对，是 C），我又绕回来啦。其实只要多练、多调试，你自然会形成自己的思路。咱就是说这篇文章Yi经够长啦，可你若还有疑问，就去控制台敲敲实验吧！懂吗？懂的话给我点赞呗~ 🙌.

©2026 JS 学习笔记 – 所有内容均为原创，仅供学习交流使用。不保证完全准确，请自行斟酌后使用哦~ 😊. `

---