Accessing attributes of a parent class object from within a child object

Question

Accessing attributes of a parent class object from within a child object

Imagine having four tabs within an Angular component, each with its own set of criteria for being displayed. Here's a high-level overview of the scenario.

export class DisplayTabs {
  foo: true;
  bar: false;
  tabs: {
    'A': { order: 1, get isVisible() { return this.foo; } },
    'B': { order: 2, get isVisible() { return !this.bar; } },
    'C': { order: 3, get isVisible() { return this.foo && this.bar; } },
    'D': { order: 4, get isVisible() { return !this.foo || this.bar; } }
  };
};

The current setup encounters an issue where this points to the tabs object rather than the encompassing DisplayTabs object. However, the decision on displaying the tabs relies on the properties of the DisplayTabs object itself.

I have considered structuring my tabs in a more organized and maintainable manner by defining them directly inside the DisplayTabs as follows:

export class DisplayTabs {
  foo: true;
  bar: false;
  get isTabAVisible() { return this.foo; }
  get isTabBVisible() { return !this.bar; }
  // etc.

Is there a way to reorganize this structure to achieve the desired outcome?

typescript

Answer 1

Answer №1

When faced with a situation where the natural approach clashes with the programming paradigm, it is crucial to reassess whether the correct paradigm is being used. In such cases, either the approach should be modified to align with the paradigm, or a different paradigm that complements the approach should be chosen. Consider this alternative solution:

type TabState = {
  foo: boolean
  bar: boolean
}

const state: TabState = {
  foo: true,
  bar: false,
}

enum TabOrder {
  A,
  B,
  C,
  D,
}

type Tab = {
  order: TabOrder
}

const isVisible = ({ foo, bar }: TabState, tab: Tab): boolean => {
  switch (tab.order) {
    case TabOrder.A: return foo;
    case TabOrder.B: return bar;
    case TabOrder.C: return foo && bar;
    case TabOrder.D: return !foo || bar;
  }
}

Playground

This approach is simpler to test (being a pure function dependent only on its arguments), well-typed, easier to debug, and so forth. While conventional wisdom may suggest that object-oriented programming is ideal for UI tasks, it's important to recognize that this isn't always the best fit. Even if you're constrained by an OO-centric framework or existing codebase, you can still encapsulate this functionality as a static method within a class.

Answer 2

When faced with a situation where the natural approach clashes with the programming paradigm, it is crucial to reassess whether the correct paradigm is being used. In such cases, either the approach should be modified to align with the paradigm, or a different paradigm that complements the approach should be chosen. Consider this alternative solution:

type TabState = {
  foo: boolean
  bar: boolean
}

const state: TabState = {
  foo: true,
  bar: false,
}

enum TabOrder {
  A,
  B,
  C,
  D,
}

type Tab = {
  order: TabOrder
}

const isVisible = ({ foo, bar }: TabState, tab: Tab): boolean => {
  switch (tab.order) {
    case TabOrder.A: return foo;
    case TabOrder.B: return bar;
    case TabOrder.C: return foo && bar;
    case TabOrder.D: return !foo || bar;
  }
}

Playground

This approach is simpler to test (being a pure function dependent only on its arguments), well-typed, easier to debug, and so forth. While conventional wisdom may suggest that object-oriented programming is ideal for UI tasks, it's important to recognize that this isn't always the best fit. Even if you're constrained by an OO-centric framework or existing codebase, you can still encapsulate this functionality as a static method within a class.

Answer 3

Answer №2

At the beginning, you're defining a class but then switching to an object literal syntax. This can cause confusion as a class is not an object but rather a set of instructions for creating an object.

If we correct the syntax of your initial snippet, it will appear like this:

export class View {
    foo = true
    bar = false
    tabs = {
      'A': { order: 1, get isVisible() { return this.foo; } },
      'B': { order: 2, get isVisible() { return !this.bar; } },
      'C': { order: 3, get isVisible() { return this.foo && this.bar; } },
      'D': { order: 4, get isVisible() { return !this.foo || this.bar; } }
    }
  };

After making that correction, we can then implement an explicit constructor to access the object being constructed and use it within the methods:

export class View {
    foo = true
    bar = false
    tabs

    constructor() {
      const _this = this;
      this.tabs = {
        'A': { order: 1, get isVisible() { return _this.foo; } },
        'B': { order: 2, get isVisible() { return !_this.bar; } },
        'C': { order: 3, get isVisible() { return _this.foo && _this.bar; } },
        'D': { order: 4, get isVisible() { return !_this.foo || _this.bar; } }
      }
    }
  };

By creating an object instance with new View(), the methods within the tabs field will refer to the properties of the newly created object.

Answer 4

At the beginning, you're defining a class but then switching to an object literal syntax. This can cause confusion as a class is not an object but rather a set of instructions for creating an object.

If we correct the syntax of your initial snippet, it will appear like this:

export class View {
    foo = true
    bar = false
    tabs = {
      'A': { order: 1, get isVisible() { return this.foo; } },
      'B': { order: 2, get isVisible() { return !this.bar; } },
      'C': { order: 3, get isVisible() { return this.foo && this.bar; } },
      'D': { order: 4, get isVisible() { return !this.foo || this.bar; } }
    }
  };

After making that correction, we can then implement an explicit constructor to access the object being constructed and use it within the methods:

export class View {
    foo = true
    bar = false
    tabs

    constructor() {
      const _this = this;
      this.tabs = {
        'A': { order: 1, get isVisible() { return _this.foo; } },
        'B': { order: 2, get isVisible() { return !_this.bar; } },
        'C': { order: 3, get isVisible() { return _this.foo && _this.bar; } },
        'D': { order: 4, get isVisible() { return !_this.foo || _this.bar; } }
      }
    }
  };

By creating an object instance with new View(), the methods within the tabs field will refer to the properties of the newly created object.

Accessing attributes of a parent class object from within a child object

Answer №1

Answer №2

Similar questions

What is the process of creating a for loop in FindById and then sending a response with Mongoose?

Retrieve the values of private variables within a defined function

Typescript feature: Configuring BaseUrl with nested directories

Learn the proper way to specify the return type of a function as a class, rather than an instance, in Typescript

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

When I refresh the page in Angular2, the router parameters do not get loaded again

Is there a way to check for keys in a TypeScript object that I am not familiar with?

Errors during TypeScript compilation in Twilio Functions

The argument type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be assigned to the parameter type 'HTMLElementEvent<HTMLButton>'

Incorporate a personalized add-button into the material-table interface

I am facing an issue with Nestjs where it is unable to resolve my dependency, despite the fact that it is readily available within the

HTMLElement addition assignment failing due to whitespace issues

Is it possible to include multiple eventTypes in a single function call?

What causes the lack of impact on lambda rendering speed despite integrating webpack?

When employing GraphQL Apollo refetch with React, the update will extend to various other components as well

What is the process for passing information to a nested component structure with parent-child-child relationships?

What are some effective methods for troubleshooting Vue.js computed properties and templates?

Struggling to Decode Octet-stream Data in Angular 6 HttpClient: Encountering Parsing Failure with Error Prompt: "Failed to parse HTTP response for..."

Utilizing Mongoose RefPath in NestJS to execute populate() operation

Access the array values by their respective keys in an object that is returned from a custom JavaScript file utilizing the Node.js file system