Javascript overload getter and setter

March 6, 2022

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

>Solution :

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