原生JS实现对象复制与扩展,模拟jQuery extend()方法

作者:异步漫步

时间:2026-10-28

浏览:327

本文介绍如何使用原生JavaScript实现类似jQuery中extend()的功能,支持对象的复制与属性扩展。通过递归克隆对象并合并多个源对象的属性,解决浅拷贝导致的引用问题,同时保留原有对象不变。

文章目录

jQuery extend方法简介

jQuery的extend()方法能够便捷地完成对象扩展,其基本语法结构为:$.extend(obj1, obj2, obj3);

原生JS实现对象复制与扩展

接下来演示如何利用原生JavaScript实现类似的功能,包括对象的复制与扩展。具体场景如下: 现有三个对象字面量定义:


var o1={hello:1,old:555},
o2 = {
abc: 55555555,
hello: 2,
fun: function() {
alert(111);
}
},
o3={third:9999};

期望达成的目标:

对o1进行复制,并将o2和o3中的属性及方法合并到复制后的新对象中,最后输出该结果。


<script>
var o1={hello:1,old:555},
o2 = {
abc: 55555555,
hello: 2,
fun: function() {
alert(111);
}
},
o3={third:9999};
function cloneObj(oldObj) { //复制对象方法
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;
};
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;
}
var t=extendObj(o1,o2,o3);
console.log(t);
console.log(o1);
console.log(o2);
console.log(o3);
</script>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章