Javascript 重載getter和setter

Question

如何覆蓋 object 上的 getter 和 setter 並添加一些邏輯但繼續調用原始方法？

 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>

來自控制台的結果

overload setter called
overload getter called

預期的

original setter called
original getter called
overload setter called
overload getter called

Answer 1

使用Object.getOwnPropertyDescriptor獲取原始的 getter 和 setter 方法，然后在新的 getter 和 setter 中.call它們。

 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>