Object.defineProperty：DOM元素屬性的設置器

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

將打印到控制台“ Tom設定值”，並將obj.name更改為Tom。

當我在dom元素上嘗試它時（例如，在復選框中選中的屬性上），它將在控制台中打印新值，但不會更改該屬性的值：

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

單擊未選中的復選框將輸出“已設置的值已選中”。 但是屏幕上沒有任何變化，對象框中也沒有變化。 復選框的設置器剛剛停止工作。 就像我“禁用”它一樣。

我哪里錯了？

Answer 1

這是因為您從未在設置器中設置過該值。 創建setter時，您要接管設置對象（在您的情況下為元素）上的值的工作。 （並且，如果您嘗試在設置器中進行設置，例如box.checked = newValue ，則將進入一個僅由於堆棧溢出而結束的循環。）

查看您的代碼，當DOM元素的checked屬性更改時，您試圖獲取通知。 您不能使用defineProperty做到這defineProperty 。 宿主對象（如DOM元素）根本不需要支持defineProperty ，即使它們支持，當控件的基礎狀態在內部更改時，它們也不必調用setter。