Javascript 对象在未调用更新函数的情况下神秘更新

预期的行为是用户能够分别设置所有三个元素的样式

工作原理：

• 单击每个元素时，它将存储在selected.elements中
• 单击“粗体/斜体”时，它将存储在selected.settings中
• 单击“应用”时，将使用“选定”对象中的元素和设置更新DOM，并清除selected.elements

复制步骤：

单击“elementOne”

选择“粗体”

单击“应用”

单击“元素二”

选择“斜体”

单击“应用”

预期值：elementOne为粗体；元素2是斜体

实际值：两者均为斜体

在步骤5，更新model.elementOne.settings，即使没有调用任何函数来执行此操作

const selected={
要素：[]，
设置：{}
}
常数模型={
要素一：{
slug:‘elementOne’，
设置：{}
},
要素二：{
slug:'元素二'，
设置：{}
},
要素三：{
slug:'元素三'，
设置：{}
}
}
const elementContainer=document.getElementById（'elementContainer'））
const buttonContainer=document.getElementById（'buttonContainer'）
const fontStyleContainer=document.getElementById（'fontStyleButtonContainer'）
const setupEventListeners=\=>{
elementContainer.addEventListener（'click'，e=>{
//将选定元素添加到selected.elements
selected.elements.push（e.target.id）
})
fontStyleContainer.addEventListener（'click'，e=>{
//将所选字体样式添加到所选的.settings
for（设i=0；i{
//使用选定的设置更新每个选定图元的模型
for（设i=0；i{
//基于新模型更新DOM
用于（模型中的常数）{
if（型号hasOwnProperty（el））{
常量元素=模型[el]
const elementDOM=document.getElementById（element.slug）
开关（element.settings.fontStyle）{
大小写“粗体”：
elementDOM.style='font-weight:800；'
打破
斜体字：
elementDOM.style='font-style:italic；'
打破
违约：
}
}
}
}
setupEventListeners（）

一,。选择要设置样式的图元


elementOne
元素二
元素三

二,。选择字体样式

大胆的
斜体
三,。应用更改

申请

通过始终使用选定的

设置中的同一对象，可以在它们之间绑定模型元素的设置，因为它们最终指向同一对象

在这里，我只是为所选的
重新设置了一个新对象。设置
有效！（检查
fontStyleContainer
单击侦听器）
如果使用值或引用，请小心；）


const selected={
要素：[]，
设置：{}
}
常数模型={
要素一：{
slug:‘elementOne’，
设置：{}
},
要素二：{
slug:'元素二'，
设置：{}
},
要素三：{
slug:'元素三'，
设置：{}
}
}
const elementContainer=document.getElementById（'elementContainer'））
const buttonContainer=document.getElementById（'buttonContainer'）
const fontStyleContainer=document.getElementById（'fontStyleButtonContainer'）
const setupEventListeners=\=>{
elementContainer.addEventListener（'click'，e=>{
//将选定元素添加到selected.elements
selected.elements.push（e.target.id）
})
fontStyleContainer.addEventListener（'click'，e=>{
//将所选字体样式添加到所选的.settings
for（设i=0；i{
//使用选定的设置更新每个选定图元的模型
for（设i=0；i{
//基于新模型更新DOM
用于（模型中的常数）{
if（型号hasOwnProperty（el））{
常量元素=模型[el]
const elementDOM=document.getElementById（element.slug）
开关（element.settings.fontStyle）{
大小写“粗体”：
elementDOM.style='font-weight:800；'
打破
斜体字：
elementDOM.style='font-style:italic；'
打破
违约：
}
}
}
}
setupEventListeners（）

一,。选择要设置样式的图元


elementOne
元素二
元素三

二,。选择字体样式

大胆的
斜体
三,。应用更改

申请
请更新公司信息