原生 JavaScript 实现类似 jQuery extend() 的对象复制与合并

唐可

发布时间：2026-10-15| 4人浏览过

原创

在 Web 开发中，经常需要将多个对象的属性合并到一个目标对象中，这与 jQuery 中的 $.extend() 功能一致。本文将展示如何使用原生 JavaScript 编写自定义的复制与扩展逻辑，实现非破坏性的对象属性覆盖与方法继承。

需求分析与实现思路

假设我们有三个对象字面量 o1、o2 和 o3。目标是复制 o1，并将 o2 和 o3 中的属性和方法扩展到复制后的对象中。如果后续参数中存在与已存在键名冲突的属性，后传入的参数值将覆盖前者。

核心代码实现

第1步：定义对象深复制函数

为了防止直接修改原始对象，首先需要实现一个能够递归复制对象及其嵌套属性的函数。该函数检查输入是否为对象类型，若是则新建空对象并逐项复制；若为基本类型则直接返回。

function cloneObj(oldObj) {
    // 如果不是对象或为null，直接原样返回
    if (typeof(oldObj) != 'object') return oldObj;
    if (oldObj == null) return oldObj;

    var newObj = new Object();
    for (var i in oldObj) {
        // 递归调用以处理嵌套对象
        newObj[i] = cloneObj(oldObj[i]);
    }
    return newObj;
}

第2步：定义对象扩展/合并函数

接下来实现 extendObj 函数。它接收任意数量的参数作为源对象。首先调用 cloneObj 克隆第一个参数作为基准目标，然后遍历后续所有参数对象，将其属性逐一赋值给目标对象，从而实现扩展。

function extendObj() {
    var args = arguments;
    // 至少需要两个参数才能进行扩展
    if (args.length < 2) return;

    // 第一步：克隆第一个对象，保留原始对象不变
    var temp = cloneObj(args[0]);

    // 第二步：从第二个参数开始遍历
    for (var n = 1; n < args.length; n++) {
        for (var i in args[n]) {
            // 将当前源对象的属性复制到目标对象中
            temp[i] = args[n][i];
        }
    }
    return temp;
}

第3步：测试执行与验证

准备测试数据并调用上述函数。观察控制台输出，确认最终返回的对象包含了所有来源的属性，且原始对象未被篡改。

<script>
// 准备三个测试对象
var o1={hello:1,old:555},
o2 = {
    abc: 55555555,
    hello: 2,       // 此项会覆盖 o1.hello
    fun: function() {
        alert(111);
    }
},
o3={third:9999};

// 执行扩展
var t=extendObj(o1,o2,o3);

console.log("合并结果:", t);   
console.log("原始o1:", o1);     // 应包含 hello:1, old:555
console.log("原始o2:", o2);     // 应包含 abc, hello:2, fun
console.log("原始o3:", o3);     // 应包含 third:9999
</script>