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';

将打印到控制台＆＃39;设置值Tom＆＃39;并将obj.name更改为Tom。

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

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

点击未选中的复选框将输出＆＃39;设置值已选中＆＃39;。但是在对象框中，屏幕上没有任何变化。复选框的设置器停止工作。就像我已经'禁用'＃39;它

我哪里错了？

Answer 1

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

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

Object.defineProperty：dom元素属性

1 个答案: