JS 对象：从 “散装” 到 “精装” 的晋级之路

前言

在阅读前先解决一个问题，那就是啥是对象？说白了，JS 里的 "对象" 就是个 "万能收纳箱"------ 不管是数字、字符串这些零散数据，还是能干活的方法，都能往里面塞，把杂乱的信息规整得明明白白。而支撑这个 "收纳箱体系" 的，一边是像 "孤家寡人" 似的原始类型 （string、number、boolean、undefined、null、Symbol、bigInt），它们单打独斗，不能挂额外属性；另一边是热热闹闹的引用类型（也就是对象家族），它们是 "群居选手"，能装能存还能扩展。

今天咱就来扒一扒这个 "收纳箱" 是咋造出来的、背后有啥隐藏操作。

一、对象的 "诞生记"：三种创建方法

想要拥有一个对象，JS 给了你三种 召唤术：

1. 对象字面量："我懒我骄傲"

就像我们点外卖直接选套餐，对象字面量是最直接的创建方式：

css 复制代码

const obj = {
    a: 1
}；

你肯定会说：什么？就这一点代码？对，就这一点，对象就到手了！

2. new Object ()："走流程，咱正规"

如果你是个 "流程控"，可以用构造函数正儿八经创建：

ini 复制代码

const obj = new Object(); // 构造函数
obj.name = 'henry';
const abc = 'age';
obj[abc] = 18;   // 删除

delete obj[abc];
console.log(obj);

打印结果：

这种方法也可行，非常正规，赞！

3. new 自定义构造函数："批量生产，效率王者"

当你需要 "复制粘贴" 式创建一堆相似对象时，构造函数就是你的 "生产流水线"！比如我们造个Person构造函数：

javascript 复制代码

function Person() {

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

二、构造函数："批量造对象的黑作坊"

构造函数就像个 "对象工厂"，被 new 调用时才算是真正的构造函数。当你需要批量创建对象时，它就是你的 "效率神器"！

其中总共有2种方法，我称之为手工小作坊 和 自动化工厂。

你们最喜欢的代码环节：

javascript 复制代码

// 手工小作坊：每次造对象都得重复写
function Insert(name, age, job) {
    const obj = {
        name: name,
        age: age,
        job: job
    }
    return obj;
}
console.log(Insert('henry',19,'coder'));

结果也正确的打印出了我们赋的值：

但是这种写法就有一个缺点！我只是给了一组数据输出结果，那如果是10个呢，100个呢？甚至是老板让你把全公司人的信息输入进去呢？难道你一个一个去console.log？显然在庞大的数据下这种肯定是不推荐的，那就有请另外一位--自动化工厂闪亮登场！

ini 复制代码

// 自动化工厂：new一下，对象自动造好
function Car(color) {
    this.name = 'su7';
    this.height = '1400';
    this.long = '4800';
    this.weight = '1500';
    this.color = color;
}
const car1 = new Car('purple'); // 实例化一个对象
console.log(car1);

拿代码中的小米su7举例子：

如果雷总想让你批量生产su7，你如果用手工小作坊 的方法，那得多少行代码啊！每辆车的型号信息都得重复输入，效率低的没眼看。那么怎么去解决呢？简单！你很快就发现，每辆车它的长度啊，高度啊，重量啊等等都是一样的，没必要去重复输入，只有颜色不一样而已，所以为了提高效率，我们有请this 带来它的自动化工厂。

ini 复制代码

function Car(color) {
    this.name = 'su7';
    this.height = '1400';
    this.long = '4800';
    this.weight = '1500';
    this.color = color;
}
const car1 = new Car('purple'); 
console.log(car1);
const car2 = new Car('blue');
console.log(car2);

如此这般，我们只需传输每辆车不同的数据（比如颜色），其他的已经固定好的数据我们就可以省略不写，大大提高了我们敲代码的效率，学废了没？

三、new 关键字："构造函数的幕后BOSS"

你以为 new 只是个关键字？它可是 "对象诞生" 的幕后导演！它干了三件大事：

创建一个 this 对象：相当于搭了个空舞台；
执行构造函数代码：往 this 上狂加属性方法，把舞台布置好；
返回 this 对象：把布置好的舞台交给你。

咱们用代码模拟一下 new 的逻辑，一目了然：

ini 复制代码

function person() {
    const _this = {};   // 第一步：造个空this
    _this.name = 'su7'; // 第二步：往this上加东西
    _this.color = 'green';
    return _this;       // 第三步：返回this
    const obj = person();
    console.log(obj);   // 看看实力
}

看看导演的成果：

this已经被官方征用了，所以我们这里只是用_this模拟this的对象，大家不要搞混了哈！

四、包装类："原始类型的隐藏马甲"

依旧先上代码：

ini 复制代码

var str = 'hello'; 
console.log(str.length);

打印输出的结果为5，为hello的长度，看似没有问题。But！有人会问：作者你之前不是说原始类型不是不能有属性方法吗？那str.length是咋来的？随着质疑声越来越大，我也不含糊，这就不得不讲讲包装类了。

JS 是个 "戏精"，当你用原始类型字面量时，它会偷偷给你套个 "包装对象" 的马甲（比如new String()），让原始类型也能临时 "装" 成对象用用。但这马甲很 "薄"------参与运算时会自动拆成原始类型，赋值时还会把临时加的属性偷偷删掉！

具体来说就是：因为 js 是弱类型语言，所以只有在赋值语句执行时才会判断值的类型(typeof)，当值被判定为原始类型时，就会自动将包装对象上添加的属性移除

拿刚刚的hello举例子：

ini 复制代码

var str = 'hello'; // 看似是原始类型，实际背后是new String('hello')
str.length = 2;    // 试图给它加个属性
console.log(str.length);  // 猜猜是2吗？不，还是5！因为马甲被拆了，临时属性没了
console.log(typeof(str)); // 类型还是string，马甲只是临时穿穿

结果和预期一样：

总结

其实 JS 里的对象逻辑，本质就是 "把零散的数据和功能打包成整体"------ 字面量是 "随手包"，构造函数是 "批量生产线"，new 是 "生产线的核心开关"，而包装类则是 "让零散原始值临时享受对象待遇的便民服务"。

这些设计看似花里胡哨，实则都是为了平衡 "易用性" 和 "专业性"：既不让新手觉得创建对象太复杂，也能让老手通过构造函数、包装类的底层逻辑玩出花样。

通过这篇文章，下次再写对象相关代码时，你不妨想想：我这是在 "随手包个小物件" ，还是在 "开生产线批量造货" ？原始值的 "马甲" 会不会在运算时掉下来？想通这些，你就不再是 "只会用对象" 的新手，而是 "懂对象底层逻辑" 的进阶玩家 ------ 毕竟 JS 的魅力，就在于这些看似 "反常识" 却又 "超合理" 的设计里面！