document.body.style.background = "red"; // Почему этот код работает?
document.body.style.background = "red";Как-то никогда и не задумывался, а как это работает? Понятно, что это какая-то цепочка геттеров-сеттеров, но так сходу не смог объяснить. Немного пощупал...
console.log( document.hasOwnProperty('body') ); // false
console.log( Object.keys(document) ); // ["location"]
console.log( document.constructor.name ); // HTMLDocument
// HTMLDocument.prototype.body;
// Uncaught TypeError: Illegal invocation — кажется это геттер.
Object.defineProperty(HTMLDocument.prototype, 'body', {
get: () => "Mooo...",
});
console.log( document.body ); // "Mooo..." // Оно!Дальше,
console.log( document.body.hasOwnProperty('style') ); // false
console.log( document.body.constructor.name ); // HTMLBodyElement
// HTMLBodyElement.prototype.style // Illegal invocation
Object.defineProperty(HTMLBodyElement.prototype, 'style', {
get: () => 100,
});
console.log( document.body.style ); // 100console.log( document.body.style.hasOwnProperty('background') ); // true
console.log( document.body.style.background ); // ""Проблема в том, что пока писал вопрос, получился немного ответ)
Тогда, вопрос: Как реализовать объект doc = {}, который при выполнении
doc.body.style.background = "red";
примерно повторяя те же механизмы, (наследуя от классов-пустышек, похожих на HTMLDocument, HTMLBodyElement), изменит цвет body? Для присваивания background = ... использовать сеттер, выполняющий document.body.style.background = ...
Хотя осталось нераскрытым, что именно происходит за кулисами во время этого присваивания.