I am trying to subclass JavaScript array and override 'length' getter and setter. This code is not working - it outputs nothing to the console because getter and setter are not called. How to fix this?
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)
length is a non-configurable property which is created inside the Array constructor (see here). So the only way to override it is to use 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)
},
})
}
}
Be cautious though - IT CAN DAMAGE THE PERFORMANCE OF YOUR PROGRAM.
lengthis an instance property, defining a getter/setter on the prototype won't worklength. Also, why would you do that? Do you think it's really required?