Access proxied properties internally

Question

I'm using model classes that extend a base Model class. The Model class returns a Proxy from the constructor that allows me to access properties passed into the constructor without having to explicitly define them on the class.

Using this, I can access a property of the data object externally, but attempting to access it internally returns undefined. How can I access the proxied properties from within the class itself?

class Model {
  constructor(data) {
    this.data = data;

    return new Proxy(this, {
      get(model, prop) {
        if (model.hasOwnProperty(prop) || prop in model) {
          return model[prop];
        }

        if (model.data.hasOwnProperty(prop)) {
          return model.data[prop];
        }
      }
    });
  }
}

class User extends Model {
  get name() {
    return `${this.first_name} ${this.last_name}`;
  }
}


const user = new User({
  first_name: 'Bob',
  last_name: 'Smith'
});

console.log(user.first_name); // 'Bob'
console.log(user.name); // undefined undefined

Answer 1

You need to use Reflect.get() to access properties on the original object

Reflect

Reflect is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect is not a function object, so it's not constructible.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

Reflect.get()

The static Reflect.get() method works like getting a property from an object (target[propertyKey]) as a function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/get

class Model {
  constructor(data) {
    this.data = data

    return new Proxy(this, {
      get(model, prop) {
        if (model.data.hasOwnProperty(prop)) {
          return model.data[prop]
        }
        return Reflect.get(...arguments)
      },
    })
  }
}

class User extends Model {
  get name() {
    return `${this.first_name} ${this.last_name}`
  }
}

const user = new User({
  first_name: 'Bob',
  last_name: 'Smith',
})

console.log(user.first_name) // 'Bob'
console.log(user.name) // 'Bob Smith'

Reflect.get takes 3 arguments: the object, the key, and and optional this context.

Here Reflect.get(...arguments) is equivalent to Reflect.get(model, prop)

How to use Reflect.get

Reflect.get({ x: 1, y: 2 }, 'x')  // 1
Reflect.get(['zero', 'one'], 1)  // "one"