The proxy is unable to access the method within the subclass

Issues are arising as I attempt to utilize a Proxy. The structure of my class is as follows:

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()
    }

}

Next, I extend Model as shown below:

export class MyClass extends Model {

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

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

}

Upon calling getItems() which instantiates the class, an error occurs:

TypeError: t.doSomething is not a function

The doSomething() method is located within the ModelBase class. Disabling the Proxy resolves the issue. Thus, I seek an explanation for the inability to access the parent class.

Answer №1

The proxy is attempting to locate target._items.doSomething, but this does not exist. However, target.doSomething does exist, but it is not searching for that specific property. Thus, it defaults to returning the entire target object, which is not a function, resulting in the error.

To resolve this issue, it will depend on the purpose of the proxy. If there are specific properties the proxy should be focused on, those can be explicitly checked. Alternatively, you can verify if target[property] exists, then proceed to target._items[property] before defaulting to target. Ultimately, the solution will vary based on your specific goals for the proxy.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem arising from apostrophe usage in Javascript OData request

In my current project, I have a text input field that passes a value through JS to fetch filtered data of names from a JSON file using OData query parameters. However, I've encountered an issue where if a name contains an apostrophe, it results in a ...

issue retrieving data from live website created with next.js

Hello, I've exhausted all possible avenues to identify the cause of the error occurring on my live website built with NEXTJS. I have observed that this error only occurs when I reload the website. It's worth noting that I can successfully login ...

Accordion - Conceal Previously Revealed Items

I'm currently working on finding a solution to hide all child sections that are open in my accordion when a new header is clicked. I've included a jsfiddle link to show what I have so far. Any suggestions on how to close the opened sections would ...

Remove the final 5 characters from the HTML text

Below is the code block that I am unable to modify: <div class="parent"> <div class="wrap"> <span class="content">2026-01-31-08:00</span> </div> <div class="wrap" ...

Eliminate element from collection utilizing singular term

Can you please advise on the best way to remove an element from an array without using the array index, such as array[0]? ...

Guidelines for incorporating role-based permissions in a React application

I am developing a MERN application that has various features catering to different roles. I need the ability to display specific data, navigation options, and divs based on the user's role while hiding these elements from others. It is important to no ...

Tips for launching Nx serve in debug mode for Angular using VSCode

When running my Angular Nx project in the VSCode debugger, I encounter an issue with using yarn. yarn start successfully executes the nx serve command when run from a terminal. However, the same yarn start command fails when executed through VSCode debug ...

Despite importing jQuery, the variable '$' cannot be located

Whenever I try to click the button labeled test, it doesn't do anything. However, an error message appears in the console debug indicating: Error: Unable to locate variable '$'. I suspect this might be a jQuery issue, even though I' ...

Issue encountered while retrieving information using Axios in a Vue.js application

Currently, I am in the process of developing a full stack application using Vue.js and Fastify.js (a Node framework). The Vue app is supposed to retrieve data from the API I created and display it in the browser console. However, I am encountering an issue ...

Issue with the successful execution of connection event handler in NodeJS and Socket.io?

When I look at my code in files named server.js and index.html, I notice that the io.on('connection') part is not executing the console.log method in its callback when I visit my server in the web browser. Take a look at the code snippets below ...

Create a prop type that can be either a single number or an array of numbers, depending on the value of another

Seeking a solution, I am exploring an example using arrays with the 'multi' property. When 'multi' is true, the items should be of type number[]. Otherwise, they should be of type number. interface EnhancedSelectProps { items: multi ? ...

`I'm having issues trying to use ajax and load simultaneously``

Can anyone help me figure out why my AJAX call to sessions.php is not correctly loading and returning true or false each time a user accesses the page? var section = $("#header a"); section.on('click', function() { $.ajax({ type: "PO ...

The login button has dual functionality, redirecting users to different pages based on their login status. First-time logins will be directed to an agreement page, while returning users will be

During my testing of login functionality, I follow these steps: Enter username Enter password Click on the login button Verify if the agreement page is displayed This is how my Page Object Model (POM) for the login page looks like: class loginPage { ...

Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching. I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden ...

Server-side access to form data has been restricted

When I make a PUT request from the frontend, I am currently using the XMLHttpRequest and FormData API. However, on the server side, I am not receiving any data such as req.params, req.body, and req.query are all empty. Front-end Implementation var report ...

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code: HTML Code <div ng-app="myApp" ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in font ...

The addition of plot bands in highcharts can cause the plot lines to vanish

Whenever I try to use plotbands between two points on the x-axis and draw a line between those two points using pointLines, the line never appears. Strangely, if the same process is done on the yAxis, everything works perfectly fine. Here is my code: $( ...

Is there a way to activate a click event on a particular child element within a parent element?

When attempting to click on a specific descendant of an element, I located the ancestor using ng-class since it lacked an id. yes = document.querySelectorAll('[ng-controller = "inventoryController"]') Having found the desired ancestor, ...

Is it possible to convert a leaflet marker into a nuxt-link function?

Recently, I started using nuxt and vue-leaflet to create an interactive map, even though I am quite new to it. This map consists of multiple markers representing different locations. The goal is for the respective page to open when a user clicks on a mark ...

ion-list with borders of different colors for each ion-avatar

I have a list of ion items, each displaying a round ion-avatar image with a colored border. Currently, I can only set one fixed color for all items. However, I would like each item to have a different color based on the value of listItem.color. Here is th ...