javascript - 对象.defineProperty : setters for dom elements properties

Question

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

将打印到控制台 '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 刚刚停止工作。就像我“禁用”它一样。

我哪里错了？

Answer 1

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

查看您的代码，您试图在更改 DOM 元素的 checked 属性时获得通知。你不能用 defineProperty 做到这一点。宿主对象(如 DOM 元素)根本不需要支持 defineProperty，即使支持，当控件的基础状态在内部发生变化时，它们也不必调用 setter。