jQuery extend覆盖对象并创建副本

jQuery.extend() 方法用于合并两个或多个对象的内容到第一个对象中。这个方法可以用来覆盖对象的属性，也可以用来创建对象的副本。

基础概念

jQuery.extend() 方法的基本语法如下：

jQuery.extend(deep, target, object1, [objectN]);

deep（可选）：布尔值，表示是否进行深拷贝。
target：目标对象，其他对象的属性将被合并到这个对象中。
object1, objectN：一个或多个源对象。

优势

简化代码：避免手动复制属性。
灵活性：可以合并任意数量的对象。
深拷贝与浅拷贝：通过设置 deep 参数，可以选择是否进行深拷贝。

类型

浅拷贝：默认情况下，jQuery.extend() 执行的是浅拷贝，即如果源对象的属性值是对象，则目标对象将得到对该对象的引用。
深拷贝：当 deep 参数设置为 true 时，执行深拷贝，即递归地复制对象的所有层级。

应用场景

配置合并：在插件或模块化开发中，合并默认配置和用户提供的配置。
对象扩展：在不改变原始对象的基础上，添加或修改对象的属性。

示例代码

浅拷贝示例

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = { b: { d: 3 }, e: 4 };

jQuery.extend(obj1, obj2);

console.log(obj1); // { a: 1, b: { d: 3 }, e: 4 }
console.log(obj1.b === obj2.b); // true，obj1.b 和 obj2.b 指向同一个对象

深拷贝示例

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = { b: { d: 3 }, e: 4 };

jQuery.extend(true, obj1, obj2);

console.log(obj1); // { a: 1, b: { c: 2, d: 3 }, e: 4 }
console.log(obj1.b === obj2.b); // false，obj1.b 是 obj2.b 的深拷贝

遇到问题及解决方法

问题：深拷贝时循环引用导致栈溢出

如果对象之间存在循环引用，深拷贝可能会导致栈溢出错误。

解决方法：

使用第三方库：如 lodash 的 _.cloneDeep() 方法，它处理循环引用更好。
自定义深拷贝函数：在拷贝过程中检测循环引用并跳过。

function deepCopy(obj, hash = new WeakMap()) {
    if (Object(obj) !== obj) return obj; // 原始类型直接返回
    if (hash.has(obj)) return hash.get(obj); // 处理循环引用
    let result = Array.isArray(obj) ? [] : {};
    hash.set(obj, result);
    Reflect.ownKeys(obj).forEach(key => {
        result[key] = deepCopy(obj[key], hash);
    });
    return result;
}

var obj1 = { a: 1 };
obj1.b = obj1; // 循环引用
var obj2 = deepCopy(obj1);

通过这种方式，可以避免因循环引用导致的栈溢出问题。