如何在JavaScript中继承Array并覆写length的getter和setter？

问题原因 #

Array的length是实例自身的特殊访问器属性，并非继承自原型链。你在子类类体中定义的get length和set length会被挂载到MyArray.prototype上，而实例自身的length属性优先级更高，所以不会触发原型上的访问器逻辑。

修复方案 #

方案一：在构造函数中重新定义实例的length访问器 #

直接在实例对象上覆盖原有的length属性，替换为自定义的访问器：

class MyArray extends Array {
  constructor(...args) {
    super(...args);
    
    Object.defineProperty(this, 'length', {
      get: () => {
        console.log('length getter');
        return super.length;
      },
      set: (value) => {
        console.log('length setter');
        super.length = value;
      },
      configurable: true,
      enumerable: true
    });
  }
}

const arr = new MyArray();
arr.length = 1; // 输出：length setter
console.log(arr.length); // 输出：length getter 随后输出1

方案二：使用Proxy拦截属性读写 #

通过Proxy包装实例，拦截所有属性的读写操作，针对length执行自定义逻辑：

class MyArray extends Array {
  constructor(...args) {
    super(...args);
    return new Proxy(this, {
      get(target, prop) {
        if (prop === 'length') {
          console.log('length getter');
        }
        return Reflect.get(target, prop);
      },
      set(target, prop, value) {
        if (prop === 'length') {
          console.log('length setter');
        }
        return Reflect.set(target, prop, value);
      }
    });
  }
}

const arr = new MyArray();
arr.length = 1; // 输出：length setter
console.log(arr.length); // 输出：length getter 随后输出1

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