Skip to content

Instantly share code, notes, and snippets.

@rauschma
Last active November 2, 2020 23:16
Show Gist options
  • Save rauschma/b29fbd27d7fea63b9b19 to your computer and use it in GitHub Desktop.
Save rauschma/b29fbd27d7fea63b9b19 to your computer and use it in GitHub Desktop.
ES6 proxies in ES5
//----- The ECMAScript 6 meta object protocol (MOP) implemented in ES5
// This is how getting a property is handled internally.
// Double underscore (__) implies internal operation.
Object.prototype.__Get__ = function (propKey, receiver) {
receiver = receiver || this;
var desc = this.__GetOwnProperty__(propKey);
if (desc === undefined) {
var parent = this.__GetPrototypeOf__();
if (parent === null) return undefined;
return parent.__Get__(propKey, receiver);
}
if ('value' in desc) {
return desc.value;
}
var getter = desc.get;
if (getter === undefined) return undefined;
return getter.__Call__(receiver, []);
};
Object.prototype.__GetOwnProperty__ = function (propKey) {
return Object.getOwnPropertyDescriptor(this, propKey);
};
Object.prototype.__Call__ = function (receiver, argArray) {
this.apply(receiver, argArray);
};
//----- Example: __Get__ in use.
var obj = { bar: 123 };
var x = obj.__Get__('bar'); // obj.bar
console.log(x); // 123
//----- Implementing Proxy
function Proxy(target, handler) {
this.__target__ = target;
this.__handler__ = handler;
}
// Override default __Get__
Proxy.prototype.__Get__ = function (propKey, receiver) {
// Omitted: invariant checks
var getTrap = this.__handler__.get;
if (getTrap) {
return getTrap.call(handler, this.__target__, propKey, receiver);
} else {
return this.__target__.__Get__(propKey, receiver);
}
};
//----- Example: Proxy in use
var handler = {
get: function (target, propKey, receiver) {
console.log('get ' + propKey);
return 123;
}
};
var proxy = new Proxy({}, handler);
console.log(proxy.__Get__('foo'));
// Output:
// get foo
// 123
let handler = {
get(target, propKey, receiver) {
console.log('get ' + propKey);
return 123;
}
};
let proxy = new Proxy({}, handler);
console.log(proxy.foo);
// Output:
// get foo
// 123
@rauschma
Copy link
Author

The only purpose of this code is to illustrate how ECMAScript 6 proxies [1] work internally.

[1] http://www.2ality.com/2014/12/es6-proxies.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment