Object.defineProperty：dom元素属性的setter

我无法完全理解如何Object.defineProperty适用于 dom 元素。 在普通的 javascript 对象上它就像一个魅力

var obj={name: 'john'};
Object.defineProperty(obj, 'name', {
  get: function(){
    console.log('get value')
  },
  set:function(newValue){
    console.log('set value '+newValue);
  },
  configurable: true
}); 

the line

obj.name='Tom';

将打印到控制台“set value Tom”并将 obj.name 更改为 Tom。

当我在 dom 元素上尝试它时（例如在复选框的选中属性上），它将在控制台中打印新值，但不会更改属性的值：

var box = document.getElementById('checkBox1');
Object.defineProperty(box, 'checked', {
  set: function (newValue) {
    console.log('set value '+newValue)
    },
  configurable: true
});

单击未选中的复选框将输出“设置值已选中”。 但屏幕上和对象框中都没有任何变化。 复选框的设置器停止工作。就像我“禁用”它一样。

我哪里错了？

那是因为您从未在设置器中设置该值。当您创建 setter 时，您将接管处理在对象（在您的情况下在元素上）设置值的工作。 （如果你尝试将它设置在你的设置器中，例如box.checked = newValue，您将进入一个循环，该循环只会因堆栈溢出而结束。）

查看您的代码，您试图在以下情况时收到通知checkedDOM 元素的属性发生更改。你不能这样做defineProperty。宿主对象（如 DOM 元素）不必支持defineProperty根本没有，即使他们这样做，当控件的基础状态在内部发生变化时，他们也不必调用设置器。