jQuery 拷贝对象

一、前言

在前端开发中，对象是我们最常用的数据结构之一。当我们需要复制或合并多个对象时，如果直接赋值可能会导致引用传递的问题，从而引发意想不到的副作用。

为了解决这个问题，jQuery 提供了一个非常实用的方法：$.extend()，它不仅可以用于合并多个对象，还支持 浅拷贝（shallow copy） 和 深拷贝（deep copy），非常适合用于配置合并、状态管理等场景。

本文将带你全面了解 jQuery 中的对象拷贝机制，包括：

✅ $.extend() 方法的使用方式
✅ 浅拷贝和深拷贝的区别
✅ 如何安全地复制对象
✅ 实际开发中的常见应用场景
✅ 常见问题与解决方案

并通过完整的代码示例帮助你快速上手并熟练掌握 jQuery 的对象拷贝功能。

二、什么是对象拷贝？

对象拷贝指的是将一个对象的内容复制到另一个对象中。根据是否复制嵌套对象（子属性），可以分为：

💡 在 JavaScript 中，对象默认是按引用传递的，直接赋值会导致多个变量指向同一个对象，修改其中一个会影响其他变量。

三、jQuery 中的对象拷贝方法：$.extend()

✅ 语法说明：

$.extend([deep], target, object1, [objectN])

⚠️ 注意：target 会被修改！

四、浅拷贝示例

const obj1 = { name: "Tom", info: { age: 25 } };
const obj2 = { job: "Engineer" };

const result = $.extend(obj1, obj2);

console.log(result);
// 输出: { name: "Tom", info: { age: 25 }, job: "Engineer" }

console.log(obj1 === result); // true，因为 obj1 是 target

💡 此时 info 属性仍是引用关系，修改 result.info.age 也会影响到 obj1.info.age。

五、深拷贝示例

const obj1 = { name: "Tom", info: { age: 25 } };
const obj2 = { job: "Engineer" };

const result = $.extend(true, {}, obj1, obj2);

console.log(result);
// 输出: { name: "Tom", info: { age: 25 }, job: "Engineer" }

console.log(obj1.info === result.info); // false，说明是深拷贝

✅ 使用 true 作为第一个参数即可启用深拷贝，确保对象之间互不影响。

六、$.extend() 的典型应用场景

✅ 场景一：默认配置与用户配置合并（插件开发）

function init(options) {
    const defaults = {
        color: 'blue',
        size: 'medium'
    };

    const settings = $.extend({}, defaults, options);
    console.log(settings);
}

init({ color: 'red' });
// 输出: { color: "red", size: "medium" }

✅ 场景二：复制对象避免引用污染

const original = { user: { name: 'Alice' } };
const copy = $.extend(true, {}, original);

copy.user.name = 'Bob';

console.log(original.user.name); // Alice，说明没有影响原对象

七、与其他库的拷贝方法对比

八、实际开发建议与最佳实践

九、常见问题与解决方法

十、总结对比表：jQuery 拷贝对象方法一览

十一、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！