Using ES6 proxy to intercept ES6 getter functions

Question

Using ES6 proxy to intercept ES6 getter functions

I have implemented a proxy to track all property access on instances of a class, demonstrated in the code snippet below:

class Person {
  public ageNow: number;

  public constructor(ageNow: number) {
    this.ageNow = ageNow;

    const proxy = new Proxy(this, {
      get: (target, property) => {
        console.log(property);
        return target[property as keyof typeof target];
      },
    });
    return proxy;
  }

  public ageIn10Years1() {return this.ageNow + 10;}
  public get ageIn10Years2() {return this.ageNow + 10;}
}

When I create an instance and call a method like:

const peter = new Person(18);
console.log(peter.ageIn10Years1());

it logs 'ageInYears1', 'ageNow', and 28 (in that order), which aligns with my expectations.

However, when I use a getter like:

console.log(peter.ageIn10Years2);

which also prints 'ageInYears2' and 28 but not 'ageNow', even though this property is being accessed.

What could be causing this behavior and how can it be resolved?

typescript ecmascript-6 proxy getter-setter

Answer 1

Answer №1

Instead of accessing the proxy you created, the getter retrieves data from the original object.

To address this issue, consider invoking the getter function on the proxy itself.


class Person {
  public ageNow: number;

  public constructor(ageNow: number) {
    this.ageNow = ageNow;
    const proxy = new Proxy(this, {
      get: (target, property) => {
        const descriptor = Object.getOwnPropertyDescriptor(Person.prototype, property);
        if (descriptor && typeof descriptor.get === 'function') {
            console.log("calling",property);
          return descriptor.get.call(proxy);
        } else {
          console.log(property);
          return target[property as keyof typeof target];
        }
      },
    });
    return proxy;
  }

  public ageIn10Years1() {return this.ageNow + 10;}
  public get ageIn10Years2() {return this.ageNow + 10;}
}

const peter = new Person(18);
console.log(peter.ageIn10Years1());
console.log(peter.ageIn10Years2);

Answer 2

Instead of accessing the proxy you created, the getter retrieves data from the original object.

To address this issue, consider invoking the getter function on the proxy itself.


class Person {
  public ageNow: number;

  public constructor(ageNow: number) {
    this.ageNow = ageNow;
    const proxy = new Proxy(this, {
      get: (target, property) => {
        const descriptor = Object.getOwnPropertyDescriptor(Person.prototype, property);
        if (descriptor && typeof descriptor.get === 'function') {
            console.log("calling",property);
          return descriptor.get.call(proxy);
        } else {
          console.log(property);
          return target[property as keyof typeof target];
        }
      },
    });
    return proxy;
  }

  public ageIn10Years1() {return this.ageNow + 10;}
  public get ageIn10Years2() {return this.ageNow + 10;}
}

const peter = new Person(18);
console.log(peter.ageIn10Years1());
console.log(peter.ageIn10Years2);

Answer 3

Answer №2

The issue stems from the functionality of this.

When calling your method in the initial scenario with peter.ageIn10Years1(), this refers to peter, acting as a proxy. This explains why all values are properly proxified.

You can confirm this by binding your ageIn10Year1 method:

class Person {
  constructor(ageNow) {
    this.ageNow = ageNow;

    this.ageIn10Years1 = this.ageIn10Years1.bind(this);

    const proxy = new Proxy(this, {
      get(target, property, receiver) {
        console.log(property)
        return target[property];
      },
    });
    return proxy;
  }

  ageIn10Years1() {
    return this.ageNow + 10;
  }
  getAgeIn10Years2() {
    return this.ageNow + 10;
  }
}

const peter = new Person(18);
console.log(peter.ageIn10Years1());

By making this call, it will function similarly to the previous one.

In the alternate case, leveraging a getter doesn't dynamically bind this, resulting in representation of the original object.

To resolve this dilemma, consider refraining from using getters as a straightforward solution.

Answer 4

The issue stems from the functionality of this.

When calling your method in the initial scenario with peter.ageIn10Years1(), this refers to peter, acting as a proxy. This explains why all values are properly proxified.

You can confirm this by binding your ageIn10Year1 method:

class Person {
  constructor(ageNow) {
    this.ageNow = ageNow;

    this.ageIn10Years1 = this.ageIn10Years1.bind(this);

    const proxy = new Proxy(this, {
      get(target, property, receiver) {
        console.log(property)
        return target[property];
      },
    });
    return proxy;
  }

  ageIn10Years1() {
    return this.ageNow + 10;
  }
  getAgeIn10Years2() {
    return this.ageNow + 10;
  }
}

const peter = new Person(18);
console.log(peter.ageIn10Years1());

By making this call, it will function similarly to the previous one.

In the alternate case, leveraging a getter doesn't dynamically bind this, resulting in representation of the original object.

To resolve this dilemma, consider refraining from using getters as a straightforward solution.

Using ES6 proxy to intercept ES6 getter functions

Answer №1

Answer №2

Similar questions

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

What is the reason for not being able to access default props in the react constructor but being able to access them in the render method

Specify the object key type when using a `for-in` loop

Displaying data issue with Typescript typed array

activating serverless.yml for aws-xray

Struggling to dynamically update array values by comparing two arrays

Verify that the Angular service has been properly initialized

Unable to generate paths in Ionic 3

Conditionally typing in TypeScript to check if a string contains a specific value

Error occurred after attempting to make a GET request

Hover shows no response

Issue NG1006: Class has two conflicting decorators applied

Suggestions for efficiently filtering nested objects with multiple levels in RXJS within an Angular environment?

Establishing a default value as undefined for a numeric data type in Typescript

Visibility in classes can shift once a new file is imported

Transform an array of Boolean values into a string array containing only the values that are true

What is the best way to search for and isolate an array object within an array of objects using Javascript?

Hierarchy-based state forwarding within React components

Can someone guide me on configuring Material-UI DataGrid in React to have multiple headers with column span?

Customizing the file path for the PDF worker: A step-by-step guide