JavaScript中如何重写HTMLElement属性的get/set并保留原生功能

• this指向错误：你使用箭头函数作为getter，箭头函数不会绑定自身的this，内部的this继承自外层作用域，并非访问属性时的元素实例，因此nativeOffsetWidth.call(this)的调用对象不符合预期。
• 原生访问器获取方式错误：offsetWidth是HTMLElement原型上的访问器属性，直接通过HTMLElement.prototype.offsetWidth取值相当于直接调用了原生getter，拿到的是原型调用场景下的返回值，而非原生get方法本身。

首先通过Object.getOwnPropertyDescriptor获取原生属性的访问器描述，再重写属性时使用普通函数作为getter保证this指向正确的元素实例：

// 获取原生offsetWidth的访问器描述
const nativeOffsetWidthDesc = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');

// 重写offsetWidth属性
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
    get: function() {
        // 调用原生get方法获取原始值
        const originalValue = nativeOffsetWidthDesc.get.call(this);
        console.log('原生offsetWidth值：', originalValue);
        // 可自定义修改返回值，示例：返回原始值的2倍
        const modifiedValue = originalValue * 2;
        return modifiedValue;
    },
    // 保持原有配置的可枚举、可配置性，避免影响其他逻辑
    enumerable: nativeOffsetWidthDesc.enumerable,
    configurable: nativeOffsetWidthDesc.configurable
});

• 全局修改DOM原型属性会影响所有元素的属性访问行为，可能引发不可预期的兼容性问题或性能损耗，非必要不建议全局操作。
• 如果只需要拦截特定元素的属性访问，建议针对单个元素实例做属性重写，避免污染全局原型。

内容的提问来源于stack exchange，提问作者Ood