Proxy cannot get method in extended class

Question

I am trying to use a Proxy , and I am having issues. I have a class like so:

export class Builder {
    public doSomething(...args: (string | number | Raw | Object)[]): this {
        // Do stuff
        return this
    }
}

export class ModelBase extends Builder {
    protected _items = {}
}

export class Model extends ModelBase {

    public constructor(options?: ModelSettings) {
      super(options)
      return new Proxy(this, {
        get: function (target, property) {
          return target._items[property] || target
        }
      })
    }

    public static create() {
        return new this()
    }

}

I then extend Model like so:

export class MyClass extends Model {

    public constructor() {
        super({/* Some options go here */})
        // Do some stuff
    }

    public static getItems() {
        let t = this.create()
        t.doSomething()
    }

}

Then I call getItems() which creates an instance of the class.

MyClass.getItems()

When I run this, I get the error:

TypeError: t.doSomething is not a function

Where doSomething() is within the class ModelBase . If I comment out the Proxy things work as usual. So, I would like to know why I can't access the parent class.

Answer 1

Your proxy is trying to find target._items.doSomething , but that doesn't exist. target.doSomething does exist, but it's not looking for that. As a result, it falls back to returning target , which is the object as a whole. The object, is not a function, and thus the error.

As for how to fix this, that depends on what you're trying to achieve with the proxy. If there's a limited set of properties that the proxy should be paying attention to, you could check those explicitly. Or more generally you might be able to check whether target[property] exists, then fall back to target._items[property] and only then fall back to target . Again, it depends on what you're trying to achieve.