Proxy and Reflect Article — Arrow Functions or `this` in Class constructor

Source: https://javascript.info/proxy
Date Accessed: 1 March 2022

A serious limitation in ES6 Proxy is the inability to proxy internal use of the this context inside a class. In the password example, if we use a class, then the differences in behaviour from using an arrow function vs a method is clear:

class User {

  name = "John";
  _password = "***";

  checkPassword(value: string) {
    return value === this._password;
  }

  checkPassword2 = (value: string) => {
    return value === this._password;
  }
};

const user = new Proxy(new User(), {

  get(target: any, prop: string) {

    if (prop.startsWith('_')) {
      throw new Error("Access denied");
    }
    let value = target[prop];

    // Commenting out the workaround
    return value; // (typeof value === 'function') ? value.bind(target) : value; // (*)
  },
});

console.log(user.checkPassword2('***')); // Arrow function works without the workaround because `this` is the internal context
console.log(user.checkPassword('***')); // Method fails with `Access denied` as expected

The point here is that if your class passes this somewhere in the constructor then that this cannot be proxied. This is a significant limitation of Proxy and should probably be mentioned in the article.

A good write up BTW.

Thanks

Commencez par l’article sur Proxy à l’adresse https://javascript.info/proxy et examinez l’exemple du mot de passe ainsi que le comportement signalé des classes et des arrow functions. Mettez à jour l’article pour expliquer la limitation liée à l’utilisation interne de this et à l’accès via Proxy ; le travail est terminé lorsque la distinction et le contexte de la solution de contournement sont documentés avec précision.