Vue之JavaScript的对象引用和浅拷贝

Vue之JavaScript的对象引用和浅拷贝

对象引用

javascript 复制代码
var param1={name:"111"};
var param2=param1;
param2.name="222";

console.log(param1.name); // 输出 "222"
console.log(param2.name); // 输出 "222"

在这段代码中,param1 是一个对象,它有一个名为 name 的属性,其值为 "111"。然后,param2 被赋值为 param1,这意味着 param2 和 param1 引用了同一个对象,而不是创建了一个新的对象。因此,当你修改 param2.name 的值为 "222" 时,实际上是修改了 param1 引用的对象的属性。因此,此时 param1.name 的值也变为了 "222"。

这是因为 JavaScript 中对象是通过引用传递的,而不是通过值传递。所以当你对一个对象进行操作时,无论是通过原始引用还是通过指向该对象的其他引用,对对象所做的更改都会影响所有引用该对象的地方。

浅拷贝

如果你想确保修改 param2 不会影响到 param1,你需要创建一个 param2 的新对象而不是将其赋值为 param1。这样,param2 就不再指向 param1 引用的同一对象,而是指向一个新的独立对象。

javascript 复制代码
var param1 = { name: "111" };

// 使用对象的浅拷贝,可以使用 Object.assign 或者展开运算符
var param2 = Object.assign({}, param1); // 或者 var param2 = { ...param1 };

param2.name = "222";

console.log(param1.name); // 输出 "111"
console.log(param2.name); // 输出 "222"

在这个例子中,Object.assign({}, param1) 创建了 param1 的浅拷贝,将其属性复制到一个新的对象中,从而确保 param2 不再引用与 param1 相同的对象

相关推荐
bitbrowser1 分钟前
Telegram提示尝试次数过多,换网络和重装有用吗
前端
研☆香8 分钟前
前端简单的的变量声明
前端
赵大仁15 分钟前
Next.js AI Route Handler 工程化:超时、流式与鉴权
前端·ai·鉴权·next.js·工程化
yuhaiqiang1 小时前
从这两件事就能看出 vibecoding 距离专业作品差距有多大?AI 能抹平技术,但抹不平品味 !
前端·后端·程序员
一次旅行1 小时前
DeepSeek‑V4‑Flash‑Vision‑Exp 小白入门实战|3种传图方式、完整可跑代码、避坑排障
java·前端·人工智能
其实防守也摸鱼1 小时前
Codex破局:前端组件秒级生成的技术文章大纲
开发语言·前端·人工智能·学习·安全·web安全
奥莱维1 小时前
KNX酒店方案_KNX专用线与高端酒店技术逻辑
java·服务器·前端·数据库
qq_452396232 小时前
第二篇:《前端架构的“道”与“术”:架构设计原则与决策框架》
前端·架构
lancyu2 小时前
# Agent Loop:AI Agent 的唯一直心骨
开发语言·javascript·人工智能
用户921080262862 小时前
AI 消息列表虚拟滚动:这是业务问题,还是组件能力边界?
前端