javascript - 使用 getter/setter 覆盖 javascript 属性，同时仍然访问底层属性

Question

在构建 API polyfill 的过程中，我想使用 getter 和 setter 覆盖元素的属性(在本例中为宽度和高度)，以捕获值的更改并在将其传递到底层元素之前对其进行修改。理想情况下，这个过程也是可逆的。类似于此代码片段的内容:

var realWidth = null;

function patch(targetObject) {
 realWidth = targetObject.magicalPropertyAccessor("width");
 Object.defineProperty(targetObject, 'width', {
    get: function() {
      return realWidth / 2;
    },
    set: function(value) {
      realWidth = value * 2;
    }
  });
}

function unpatch(targetObject) {
  if (realWidth)
    targetObject.magicalPropertySetter('width', realWidth);
}

该示例的目的是，当元素被修补时，它将默默地对其尺寸进行双倍更改，同时报告原始的、未更改的值。如果这是一个函数，那将非常简单，但作为一个属性，尚不清楚如何缓存对原始访问器的引用。

Answer 1

感谢 Bergi，我发现 Object.getOwnPropertyDescriptor 正是我想要的。我之前曾尝试过，但错过了我必须转到对象的 __proto__ 才能找到我正在寻找的属性的属性。 (您的里程数可能会有所不同，具体取决于您要更换的属性(property)。)这是对我有用的代码:

function WidthPatch(canvas) {
  var self = this;
  var fakeWidth = canvas.width;
  this.canvas = canvas;

  // Cache the real property
  this.realWidthProp = Object.getOwnPropertyDescriptor(canvas.__proto__, 'width');

  // Replace the property with a custom one
  Object.defineProperty(canvas, 'width', {
    configurable: true,
    enumerable: true,
    get: function() {
      return fakeWidth;
    },
    set: function(value) {
      fakeWidth = value;
      // This updates the real canvas property, silently doubling it.
      self.realWidthProp.set.call(canvas, fakeWidth * 2);
    }
  });
}

WidthPatch.prototype.unpatch = function() {
  // Replace the custom property with the original one.
  Object.defineProperty(this.canvas, 'width', this.realWidthProp);
}