如何在 JavaScript 中子类化 Array 并覆盖“length”getter 和 setter？

Question

我正在尝试子类化 JavaScript 数组并覆盖“length”getter 和 setter。此代码不起作用 - 它不会向控制台输出任何内容，因为没有调用 getter 和 setter。如何解决这个问题？

class MyArray extends Array {
  get length() {
    console.log('length getter')
    return super.length
  }

  set length(value) {
    console.log('length setter')
    super.length = value
  }
}

const arr = new MyArray()
arr.length = 1
console.log(arr.length)

Answer 1

length

是一个不可配置的属性，在

Array

构造函数中创建。所以覆盖它的唯一方法是使用 Proxy。

class MyArray extends Array {

    constructor() {
        super()

        return new Proxy(this, {
            get: (target, property, receiver) => {
                if (property === 'length') {
                    console.log('length getter')
                }
                
                return Reflect.get(target, property, receiver)
            },
            set: (target, property, value, receiver) => {
                if (property === 'length') {
                    console.log('length setter')
                }
                
                return Reflect.set(target, property, value, receiver)
            },
        })
        
    }
}

但要小心 - 它可能会损害程序的性能。