Interfere Constructor calls with ES6 Proxies

1 min read

This post is part of my Today I learned series in which I share all my learnings regarding web development.

I came along ES6 Proxies and asked myself how to interfere a new call. Here we go!

// proxy handler
const handler = {
  // let's interfere the `new` call
  // log out which object was called with which arguments
  construct : ( target, args ) => {
    console.log( `Initializing ${ target.name } with:`, args );
    return new target();
  }
};

/**
 * Interfere a constructor function
 */
function ConstructorFunction() {
  this.call = () => {
    console.log( 'method call 1' );
  };
}

const ProxiedConstructorFn = new Proxy( ConstructorFunction, handler );
const foo = new ProxiedConstructorFn( 'foo' );
// logs "Initializing ConstructorFunction", [ "foo" ]
foo.call();
// logs "method call 1"

/**
 * Interfere a class constructor
 */
class ClassConstruct {
  constructor() {}

  call() {
    console.log( 'method call 2' );
  }
}

const ProxiedClass = new Proxy( ClassConstruct, handler );
const bar = new ProxiedClass( 'bar' );
// logs "Initializing ClassConstruct", [ "bar" ]
bar.call();
// logs "method call 2"

It's not only get, set and new that can be interfered. You can find a complete list on MDN.

Load time