JavaScript: Переопределение get и set, но сохранение собственной функциональности

#javascript #prototype #getter #setter

Вопрос:

Для тестирования: мне нужно переопределить собственный доступ к свойствам HTMLElement в JavaScript, но сохранить собственную функциональность.

Следующий код переопределяет offsetWidth свойство HTMLElement , но я не могу понять, как зарегистрировать результат собственного геттера.

 // How can I call this from within the getter?

var nativeOffsetWidth = HTMLElement.prototype.offsetWidth;

// Overrides the native access

Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
    
    get: () => {

        // This part does not work! I need to access the native property here.

        var value = nativeOffsetWidth.call(this);

        console.log(value);
        return value;
        
    }
    
});
 

Я также хотел бы изменить результат, как только смогу получить правильный value .

Заранее спасибо!

Ответ №1:

Вы можете получить исходное значение свойства с помощью Object.getOwnPropertyDescriptor

Используйте его вот так:

 const nativeOffsetWidth = Object.getOwnPropertyDescriptor(
    HTMLElement.prototype,
    'offsetWidth'
).get;
nativeOffsetWidth.call(document.body /* example html element */);
 

Комментарии:

1. Спасибо за ответ! Однако я не смог получить код, предоставленный для получения результата. Я изучу getOwnPropertyDescriptor и посмотрю, смогу ли я заставить его работать с некоторыми изменениями.

2. Я протестировал свой код как в Chrome, так и в Firefox, не зная, почему он иногда не работает

3. Я отлично работаю с document.body, но я не могу заставить его работать с ключевым словом «this» из геттера, например nativeOffsetWidth.call(это).

4. А, я понимаю твою проблему. this Ключевое слово не работает как обычно в функциях со стрелками. Используйте обычную функцию, и она должна работать так, как ожидалось

5. @mousetail я проверяю, и это тоже происходит со свойствами, вот пример: pastebin.com/00kUEBbD совсем не понимаю, почему бы не начать с этого