Javascript 如何为HtmleElement创建代理 问题:

如何为浏览器本机DOM对象创建代理

---

背景 我想截取元素样式的设置。因此，我为DOM对象创建了一个代理。但是，当我使用诸如

getComputedStyle（）

之类的函数时，它会导致错误

const setHandler=（目标：any，属性：PropertyKey，值：any，_receiver？：any）=>{
如果（/*某些条件*/）{
目标[prop]=值
}
返回真值
}
const getHandler=（目标：any，属性：PropertyKey，_receiver？：any）=>{
返回目标[道具]
}
常量样式=新代理（el.style{
get:getHandler，
set:setHandler
})
const classList=新代理（el.classList{
get:getHandler，
set:setHandler
})
常量代理=新代理（el/*HTMLElement*/,{
获取：（目标、道具、接收器）=>{
如果（prop==='target'）{
返回目标
}
如果（道具=='style'）{
返回样式
}
如果（prop==='classList'）{
返回类列表
}
返回getHandler（目标、道具、目标）
},
set:setHandler
})
常量样式=getComputedStyle（el）

el

是本机浏览器DOM对象。在我的代码中，有许多方法的参数是

el

，这些方法可能会修改el

我想阻止其中一些方法修改

el

，因此我尝试代理

el

对象

但是在代理之后，DOM对象的某些方法不能用于代理对象（如

getComputedStyle（）

）

---

演示 我在下面创建了一个演示

（函数（）{
const node=document.querySelector（“#demo”）
const proxy=新代理（节点{
getPrototypeOf（目标）{
return Object.getPrototypeOf（目标）
},
获取（目标、道具、接受者）{
让值=目标[道具]
如果（值的类型==='函数'）{
value=Function.prototype.bind.call（值，目标）
}
返回值
},
设定（目标、道具、价值、接受者）{
目标[prop]=值
},
应用（目标、参数、新目标）{
返回对象。应用（目标，参数）
},
})
console.log（代理）
console.log（Object.getPrototypeOf（代理））
console.log（proxy.style）
//错误：未能在“窗口”上执行“getComputedStyle”：参数1不是“元素”类型。
const style=getComputedStyle（代理）
console.log（样式）
})（）

---

demo

请描述“代理元素”的含义。你想完成什么？

el

在哪里声明？1）您在

el

上调用

getComputedStyle

，而不是在

代理上调用。2） 你应该真正使用
Reflect.get
和其他。3） “但是得到错误”哪个错误？请