How override a getter and a setter on object and add some logic but continue to call original methods?
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>result from console
overload setter called
overload getter called
expected
original setter called
original getter called
overload setter called
overload getter called
Use Object.getOwnPropertyDescriptor to get the original getter and setter methods, then .call them inside your new getters and 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>