DEV Community

Cover image for Proxy in JavaScript | Part 1
Late Night Coder
Late Night Coder

Posted on

Proxy in JavaScript | Part 1

A Proxy object wraps another object and intercepts operations on it. While intercepting operations like reading, writing properties on the object, the proxy may choose to handle these operations and modify results.

Proxy

Syntax: let proxy = new Proxy(target, handler);

target: the object that has to be proxied. 

handler: the proxy configuration object, it may register traps. A trap is a handler for a particular kind of operation. By registering a trap handler it can intercept the operation and do its own thing.

If there is a trap for the operation onhandler only then the operation will be trapped and handled by proxy else operation directly occurs on the object itself.

let user = {}; 
// target object -- object to be proxied
let userProxy = new Proxy(user, {}); 
// proxy for user, note empty handler

// operations on proxy
userProxy.name = 'Aniket'; 
// set operation
// should be intercepted by
// `set` trap on handler
// no `set` trap registerd so 
// operations are performed on object itself 
console.log(userProxy.name); // 'Aniket;
// get opertaion
// should be intercepted by `get` trap
// no `get` trap registerd so opertaion 
// is performed on object directly
console.log(user.name); // 'Aniket'
// Thus we can see name property 
// directly on target itself
Enter fullscreen mode Exit fullscreen mode

For most of the operations on objects, there are “Internal Methods” in JavaScript that describes how operations work at a low level, what proxy trap does is that it can intercept these methods and do its own thing.

Proxy visualisation

Below we show some of the “Internal Methods” and their corresponding proxy traps.

Proxy trap and corresponding Internal method

Internal Methods have some rules that our traps must follow, for eg: set the trap must return true if property setting was success else false.[[GetPrototypeOf]] must always return the target’s prototype when applied on proxy as well.

The problem statement

It is common practice to use *_* is in the beginning of the property name to denote a private property. You cannot get/set/loop this property. Write a proxy to achieve this.

let user = {
  name: 'Aniket',
  _password: 'Password', // private property
  isCorrectPassword(pswd) {
    return this._password === pswd;
    // `this` here is a gotcha
  },
};
Enter fullscreen mode Exit fullscreen mode

“set” trap

We will register a set trap on the handler to intercept write operation on the object.

Syntax: set(target, prop, value, receiver).

target : target object. 

prop : property name that is being set. 

value : the value of the property to be set. 

receiver : the object that is utilised as in getters.

let userProxy = new Proxy(user, {
  set(target, prop, value, reciver) { 
    // intercepts property write
    if (prop.startsWith('_')) {
      // check if property name start with `_`
      // then it is a private property so
      // don't allow to write or create a property
      throw new Error("Access denied 💣 ");
    } else {
      target[prop] = val;
      // normally write on object
      return true; // must return true [[Set]] rule
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

“get” trap

We will register a get trap to prevent direct access user._password to private property. Also, we have to ensure that isCorrectpassword works correctly as it does indirect access this._password.

Syntax: get(target, property, receiver)

The arguments mean the same as above.

let userProxy = new Proxy(user, {
  get(target, prop, receiver) {
    // intercept property read
    if (prop.startsWith('_')) {
      // if property name starts with `_` then
      // we don't allow to read and raise an error
      throw new Error("Access denied 💣 ");
    } else {
      // the property value may be a function or something else
      let propValue = target[prop];
      // in case it is a function
      // it may have `this` inside it
      // where `this` will ref to `userProxy` 
      // as it will be invoked as `userProxy.isCorrectPassword(pswd)` 
      // so `this == userProxy` but that will 🔥 our code
      // so we need to make sure that our function `this` ref `user`
      // and so we bind it
      return (
        typeof propValue === "function" 
          ? propValue.bind(target) : propValue
      );
    }
  }  
});
Enter fullscreen mode Exit fullscreen mode

“deleteProperty” trap

We will register deleteProperty so that we can't delete a private property.

Syntax: deleteProperty(target, property)

let userProxy = new Proxy(user, {
  deleteProperty(target, prop) {
    // deleteProperty trap to handle property delete
    if(prop.startsWith('_')) {
      throw new Error("Access denied 💣 ");
    } else {
      // delete property on object
      delete target[prop];
      return true; // successfully deleted
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

“ownKeys” trap

for..in, Object.keys, Object.values and other methods utilise an “Internal Method” called [[OwnPropertyKeys]] to get a list of keys. For eg:

Object.getOwnPropertyNames() to get a list of non-symbol keys,

Object.getOwnPropertySymbols() to get a list of symbol keys, 

Object.keys() to get a list of non-symbol enumerable keys, etc.

They all call [[OwnPropertyKeys]] but tweak it a bit to return keys according to their use case. So we will register ownKeys(target) trap to return only public keys.

let userProxy = new Proxy(user, {
  ownKeys(target) {
    // ownKeys will return a list of keys
    // we must get keys on target then filter
    // to remove all private keys
    return Object.keys(target).filter((key)=>!key.startsWith('_'));
  }
});
Enter fullscreen mode Exit fullscreen mode

Note: Our traps must follow the rules defined for “Internal Method”. The rule defined for ownKeys with Object.keys() is that it must return non-symbol enumerable keys. Look at the example below to understand this gotcha.

let userProxy = new Proxy(user, {
  ownKeys(target) {
    // this will return list of keys 
    // and the calling method (Object.keys) tweak this list
    // to select and return a list of 
    // non-symbolic and enumberable: true keys
    // thus for each item in list returned by ownKeys
    // it will only select item which is 
    // non-symbolic and enumberable: true
    return ['email', 'phone'];
  }
});
console.log(Object.keys(userProxy)); // [] empty 😱 gotcha

// solution 
let userProxy = new Proxy(user, {
  ownKeys(target) {
    // Object.keys will check property descriptor
    // for each key returned by ownKeys and see if
    // enumberable: true
    return ['email', 'phone'];
  },
  getOwnPropertyDescriptor(target, prop) {
    // checking for enumberablity of keys
    // is accessing its descriptor and seeing
    // if enumberable is true
    // here we are returning descriptor obj
    // with enumberable true in all cases
    return {
      enumerable: true,
      configurable: true,
    };
  }
});```



#### “has” trap

This trap work with the `in` operator that intercepts the `[[hasProperty]]` Internal Method. Let’s register a `has(target, property)` trap.



```js
let range = {
  from: 1,
  to: 10,
};
// we need to check if 5 in range
// 5 in range if 5 >= range.from && 5 <= range.to
let rangeProxy = new Proxy(range, {
  has(target, prop) {
    // 5 >= 1 && 5 <= 10
    return prop >= target.from && prop <= target.to;
  },
});
console.log(5 in rangeProxy); // true
Enter fullscreen mode Exit fullscreen mode

“apply” trap

Until now all examples we have seen were on objects and now we will see an example of function as target.

Syntax: apply(target, thisArgs, args)

thisArgs : it is the value of this 

args : it is a list of arguments for function

// Let us write a function `delay`
// that delay exceution of any 
// function `f` by `ms` milliseconds


// solution 1 closure way
function delay(f, ms) {
   return function (name) { // *
    setTimeout(() => f.bind(this, arguments), ms);
   }
}

var hi = (name) => {
  console.log('Hi! ' + name);
};
console.log(hi.length); // 1
// function.length returns number a params 
hi = delay(hi, 3000);
// hi is now function at line *
console.log(hi.length); // 0 😱
// we lost orignal hi function 
// and function at line * has no params so 0 
hi('Aniket'); // 'Hi! Aniket'
// runs after 3s

// solution 2 proxy way
function delay(f, ms) {
  return new Proxy(f, {
    apply(target, thisArgs, args) {
      setTimeout(() => target.bind(thisArgs, args), ms);
    }
  });
}
var hi = (name) => {
  console.log('Hi! ' + name);
};
console.log(hi.length); // 1
hi = delay(hi, 3000);
console.log(hi.length); // 1 😎
hi('Aniket'); // 'Hi! Aniket'
Enter fullscreen mode Exit fullscreen mode

The End

Now teach the Proxy you learnt here to your friend for whom you have put proxy 😂. Here is the next part of the post Part 2. Stay tuned for more content.

Top comments (0)