Object.defineProperty：dom 元素属性的设置器答案

【问题标题】：Object.defineProperty: setters for dom elements propertiesObject.defineProperty：dom 元素属性的设置器
【发布时间】：2017-05-23 13:31:30
【问题描述】：

我无法完全理解 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
});

线

obj.name='Tom';

将打印到控制台“设置值 Tom”并将 obj.name 更改为 Tom。

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

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

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

我哪里错了？

【问题讨论】：

标签： javascript dom ecmascript-6

【解决方案1】：

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

查看您的代码，您正试图在 DOM 元素的 checked 属性发生更改时收到通知。 defineProperty 无法做到这一点。宿主对象（如 DOM 元素）根本不需要支持 defineProperty，即使支持，它们也不必在控件的底层状态在内部发生变化时调用 setter。

【讨论】：

谢谢，有没有办法（事件？）在js中观察对象的属性变化？
@GiovanniVenturelli：您正在做的事情适用于大多数对象（尽管如果您希望属性可读，您还必须提供get，并且您必须将其存储在某个地方[其他地方比对象])，而不是 DOM 元素。我所知道的处理复选框选中状态的唯一方法是 change 和 click 事件和轮询。
再次感谢，我会同意的。