¿Cómo anular un getter y un setter en el objeto y agregar algo de lógica pero continuar llamando a los métodos originales?
const target = { _value: 'bar', get foo() { console.log('original getter called'); return this._value; }, set foo(value) { console.log('original setter called'); this._value = value; }, }; Object.defineProperty(target, 'foo', { get: function () { console.log('overload getter called'); return this._value; }, set: function (value) { console.log('overload setter called'); this._value = value; }, enumerable: true, configurable: true, }); // Write Javascript code! const appDiv = document.getElementById('app'); target.foo = 'baz'; appDiv.innerHTML = target.foo; <div id="app"></div>resultado de la consola
overload setter called overload getter calledesperado
original setter called original getter called overload setter called overload getter calledUse Object.getOwnPropertyDescriptor para obtener los métodos getter y setter originales, luego .call dentro de sus nuevos getters y setters.
const target = { _value: 'bar', get foo() { console.log('original getter called'); return this._value; }, set foo(value) { console.log('original setter called'); this._value = value; }, }; const { get, set } = Object.getOwnPropertyDescriptor(target, 'foo'); Object.defineProperty(target, 'foo', { get: function () { console.log('overload getter called'); return get.call(this); }, set: function (value) { console.log('overload setter called'); return set.call(this, value); }, enumerable: true, configurable: true, }); console.log('1:'); target.foo = 'baz'; console.log('2:'); console.log(target.foo); <div id="app"></div>