Returning ES6 Proxy from the ES6 class constructor

Question

I want user to only set specific properties to an object but as the same time that object should be constructed from custom class.

For example

var row = new Row({
  name : 'John Doe',
  email : 'uhiwarale@gmail.com'
}, Schema);

row can have methods. But when user is trying to set row.password, they are not allowed.

One way to do it is using new Proxy instead of new Row but then we will loose all cool things we are doing inside Row class. I want new Row to return a proxy object with this reference as a target of proxy.

Anybody have any ideas on this? If you know mongoose, how mongoose is doing it?

Can you describe the problem you're trying to solve in much more detail? You seem to be describing some possible solution (using a proxy), but don't really describe what you're trying to accomplish. — jfriend00, Dec 04 '16 at 18:27
This is sooooo helpful: https://exploringjs.com/es6/ch_proxies.html — Andrew, Jun 15 '20 at 07:16

Vahid Hallaji · Answer 1 · 2019-03-14T05:12:27.653

43

If the proxy is certain to happen for you, one possible solution to limit the set functionality is returning an ES6 Proxy instance.

By default, the constructor in javascript returns this object automatically but you could define and return a custom behavior by instantiating a proxy on this as a target. Keep in mind that the set method in proxy should return a boolean value.

MDN: The set method should return a boolean value. Return true to indicate that assignment succeeded. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.

class Row {
  constructor(entry) {
    // some stuff

    return new Proxy(this, {
      set(target, name, value) {
        let setables = ['name', 'email'];
        if (!setables.includes(name)) {
          throw new Error(`Cannot set the ${name} property`);
        } else {
          target[name] = value;
          return true;
        }
      }
    });
  }

  get name() {
    return this._name;
  }
  set name(name) {
    this._name = name.trim();
  }
  get email() {
    return this._email;
  }
  set email(email) {
    this._email = email.trim();
  }
}

So, now you are not allowed to set the non-setable properties according to the proxy.

let row = new Row({
  name : 'John Doe',
  email : 'john@doe.com'
});

row.password = 'blahblahblah'; // Error: Cannot set the password property

It's also possible to have s custom behavior on get method too.

However, beware and take care of overriding the reference that is returned to the calling context.

Note: The sample code has been tested on Node v8.1.3 and modern browsers.

edited Mar 14 '19 at 05:12

answered Jul 26 '17 at 04:07

Vahid Hallaji

7,159
5
42
51

Error: "Unexpected token new"?! I don't think you can use 'new' in a constructor, and it also doesn't like "return Proxy"? – Master James Sep 26 '17 at 23:48
1

Wow it looks like this is working?! Nice. It seemed constructors didn't return new Proxy in other tries, so thanks for this example. – Master James Sep 27 '17 at 01:22
@MasterJames No worries. Yep, it works for me on Node v8.1.3. – Vahid Hallaji Oct 02 '17 at 02:06
2

One potential problem with returning a proxy from the constructor is that this limits your code in the same way that users are limited, i.e. your business logic can't set or update other properties on the instances after they are constructed. One way to get around this would be to proxy the class itself using a [handler.construct](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct) method to wrap & restrict instances returned to the user but still allow your code access to the underlying instance. – Joshua Skrzypek Mar 19 '18 at 08:12
4

why does the mdn page for class constructors (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor) not mention that class constructors can return objects? where does one find this level of information? – junvar Apr 27 '18 at 15:23
To make the code work, you would remove mentions of Schema and schema, and also fix "set name(email) {" to be "set email(email) {". – timkay Mar 14 '19 at 04:55

score 18 · Answer 2 · answered Feb 16 '17 at 21:03

18

You can do this without using Proxies at all.

In your class constructor you can define the password property like this:

constructor(options, schema) {
    this.name = options.name;
    this.email = options.email;
    Object.defineProperty(this, 'password', {
        configurable: false, // no re-configuring this.password
        enumerable: true, // this.password should show up in Object.keys(this)
        value: options.password, // set the value to options.password
        writable: false // no changing the value with this.password = ...
    });
    // whatever else you want to do with the Schema
}

You can find more information about how to use this on the MDN's Object.defineProperty() page.

answered Feb 16 '17 at 21:03

Joshua Skrzypek

448
5
9

1

My desire is to allow Object and Array property operators to be observed. This means any all of unknown name. Returning the Proxy in the constructor makes it possible, defining properties by name does not. – Master James Sep 27 '17 at 01:16
1

Using this, the newly defined property is available right away to use within the class constructor or methods. On the other hand if you return a Proxy object in class constructor, the proxied propertes/methods are only available after the object is fully instanciated. This is a very notable limitation since imo it's very common for the class constructor or method to reference itself or chain down "this" keyword as argument. – Keo Strife May 21 '19 at 18:50

score 0 · Answer 3 · answered Jun 24 '21 at 17:37

A related issue:

More details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Initial thinking was I needed a class, later I realized below was the one I needed:

const getObject = () => new Proxy({}, { get: (o, k) => k in o ? o[k] : 0 });

Usage:

let o1 = getObject();
let o2 = getObject();

Returning ES6 Proxy from the ES6 class constructor

3 Answers3

Linked