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

будет печатать на консоли «установить значение» Том и изменить obj.name Тома.

Когда я пытаюсь его на йот элемента (например, на свойстве проверенного в флажком), он будет печатать новое значение в консоли, но не изменит значение свойства:

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

при нажатии на флажок снят флажок «Установленное значение». Но ничего не меняется на экране, ни в поле объекта. Установитель флажка просто перестает работать. Например, если я отключил его.

Где я ошибаюсь?

Answer 1

Это потому, что вы никогда не устанавливали значение в своем сеттере. Когда вы создаете сеттер, вы берете на себя обработку обработки установки значения для объекта (в элементе, в вашем случае). (И если вы попытаетесь установить его в своем сетевом устройстве, например box.checked = newValue, вы просто перейдете в цикл, который закончится только из-за переполнения стека.)

Посмотрите на свой код, вы пытаетесь получить уведомление когда изменяется свойство checked элемента DOM. Вы не можете сделать это с помощью defineProperty. Хост-объекты (например, элементы DOM) вообще не должны поддерживать defineProperty, и даже если они это делают, им не нужно вызывать сеттер, когда внутреннее состояние элемента управления изменяется внутри.