JavaScript 对象详解：从基础到构造函数的 "欢乐颂"

是你的小橘呀
81 阅读4分钟

在 JavaScript 的江湖里，流传着一句至理名言："万物皆对象"。甭管你是字符串、数字这些小喽啰，还是函数、数组这类大佬，都得围着对象这尊大神转。今天咱们就来扒一扒对象的那些事儿，从基础到构造函数，保证让你看得明明白白，笑得开开心心。

一、对象的 "门派划分"

JavaScript 里的数据类型分两大帮派，就像江湖里的名门正派和旁门左派：

  1. 原始类型：包括 string（字符串）、number（数字）、boolean（布尔值）、undefined（未定义）、null（空值）、Symbol（符号）和 bigInt（大整数）。这些都是单打独斗的主，身上带着实打实的值。
  2. 引用类型：主要有 function（函数）、array（数组）和 object（对象）。这些家伙狡猾得很，手里揣着的不是值本身，而是指向内存中对象的 "藏宝图"（引用地址）。

简单说，原始类型是 "揣着金条走江湖"，引用类型是 "拿着藏宝图找宝藏"。

二、创建对象的 "三板斧"

在 JavaScript 里创建对象，就像大厨做菜，有好几套招式：

1. 对象字面量：最直接的 "凉拌菜"

这招最简单，拿个大括号 {} 就能搞定，就像拌凉菜一样方便：

const person = {
  name: '哈哈',
  age: 19
}

2. new Object ()："按菜谱做菜"

先用 new Object() 这个 "菜谱" 创建对象，再给它加点 "调料"（属性）：

const obj = new Object()
obj.name = '哈哈'
const abc = 'age'
obj[abc] = 19
// 不合口味还能删掉，就像挑出不爱吃的香菜
//delete obj[abc]
console.log(obj);

ScreenShot_2025-11-20_001221_305.png

3. new 调用自定义的构造函数："批量生产流水线"

要是想一口气造一堆相似的对象，就得靠自定义构造函数这条 "流水线" 了，效率杠杠的。

三、构造函数：对象界的 "造人工厂"

1. 构造函数的 "人生目标"

当你需要批量生产 "长得差不多" 的对象时，构造函数就该登场了。它就像个模具，能让对象们长得规规矩矩，还能重复利用，省不少事儿。

function Person() { 
} 
const obj = new Person(); 
console.log(obj);

ScreenShot_2025-11-20_001531_428.png

2. 构造函数的 "操作指南"

一个函数被 new 关键字 "点化" 之后，就摇身一变成了构造函数。看个例子：

function Insert(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
}

// 用 new 关键字"激活"构造函数，造出对象实例
const p = new Insert('哈哈', 19, 'coder')
const p2 = new Insert('嘻嘻', 20, 'manager')

再来个汽车 "生产线" 的例子：

function Car(color) {
  this.name = 'su7'
  this.height = '1400'
  this.lang = '4800'
  this.weight = '1500'
  this.color = color
}

// 造一辆紫色的车
const car1 = new Car('purple');
console.log(car1);
// 造一辆蓝色的车
const car2 = new Car('Pink');
console.log(car2);

ScreenShot_2025-11-20_002202_091.png

3. new 关键字的 "魔法步骤"

new 关键字可厉害了，它调用构造函数时，会偷偷干这三件事：

  1. 凭空变出一个 this 对象（就像魔法师变兔子）
  2. 让构造函数给这个 this 对象 "穿衣服戴帽子"（添加属性和方法）
  3. 把打扮好的 this 对象交出来

不过要是忘了用 new 关键字，那构造函数就成了普通函数，啥也造不出来：

// 忘了念咒语（new），car2 就是个空气
const car2 = Car('purple')
console.log(car2); // undefined

咱们也能手动模仿 new 的魔法：

function person() {
  // 自己造个兔子（对象）
  const _this = {}
  // 给兔子穿衣服
  _this.name = 'su7'
  _this.color = 'green'
  // 把兔子交出去
  return _this
}

const obj = person()
console.log(obj);

ScreenShot_2025-11-20_002336_766.png

四、包装类：原始类型的 "变身器"

JavaScript 里有个神奇的 "变身器" 叫包装类，能让原始类型临时过上对象的生活：

  1. 当你定义一个原始类型的字面量时，JavaScript 引擎会偷偷用包装类给它 "变个身"（比如 var num = 123 其实相当于 var num = new Number(123)）
  2. 包装类变出来的对象，参加运算时会自动 "打回原形"（拆箱成原始类型）
  1. 由于 JavaScript 是个 "脸盲"（弱类型），只有赋值的时候才会看看值的类型(typeof)。一旦发现是原始类型，就会把之前给包装对象加的属性统统删掉

举个栗子：

var num = 123
num.a = 'aaa'
delete num.a
console.log(num.a); // undefined  看吧，属性被删了

var str = 'hello'
// typeof('hello') 结果是 string
// 其实暗地里是 var str = new String('hello')
str.len = 2
delete str.len

总结

对象在 JavaScript 里可是个大人物，搞懂它的类型、创建方式和构造函数的工作原理，就像拿到了编程界的 "通关秘籍"。希望这篇文章能让你对 JavaScript 对象了如指掌，以后写代码的时候顺风顺水，bug 绕道走

avatar
文章
阅读
粉丝