在内部访问代理属性

Access proxied properties internally

我正在使用扩展基础 Model class 的模型 classes。 Model class returns 来自构造函数的 Proxy 允许我访问传递给构造函数的属性,而不必在 class 上显式定义它们。

使用它,我可以从外部访问 data 对象的 属性,但试图在内部访问它 returns 未定义。如何从 class 本身访问代理属性?

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

您需要使用 Reflect.get() 来访问原始对象的属性

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 接受 3 个参数:对象、键和可选的 this 上下文。

这里Reflect.get(...arguments)相当于Reflect.get(model, prop)

如何使用Reflect.get

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