Proxies in ECMAScript 6.0

1. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

2. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
.property)
=)
in)
new Proxy(target, handler);
Target
Handler
operations

3. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let target = {};
let handler = {
get(target, propKey, receiver) {
console.log('get ' + propKey);
return 123;
},
ownKeys(target) {
console.log('ownKeys');
return ['hello', 'world'];
}
};
let proxy = new Proxy(target, handler);
> proxy.foo
get foo
123
> Object.keys(proxy)
ownKeys
[ 'hello', 'world' ]

4. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
var p = new Proxy({}, {
set: function (target, prop, value, receiver) {
console.log("called: " + prop + " = " + value);
return true;
}
});
p.a = 10; // "called: a = 10

5. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
var target = {};
var p = new Proxy( target , {} );
p.a = 37; // operation forwarded to the proxy
console.log(target.a); // 37. The operation has been
properly forwarded

6. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let handler = {
deleteProperty(target, propKey) {
console.log('DELETE ' + propKey);
return delete target[propKey];
},
has(target, propKey) {
console.log('HAS ' + propKey);
return propKey in target;
},
// Other traps: similar
}

7. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let handler = {
deleteProperty(target, propKey) {
console.log('DELETE ' + propKey);
return Reflect.deleteProperty(target, propKey);
},
has(target, propKey) {
console.log('HAS ' + propKey);
return Reflect.has(target, propKey);
},
// Other traps: similar
}

8. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let handler = new Proxy({}, {
get(target, trapName, receiver) {
// Return the handler method named trapName
return function (...args) {
// Slice away target object in args[0]
console.log(trapName.toUpperCase()+' '+args.slice(1));
// Forward the operation
return Reflect[trapName](...args);
}
}
});
let p =
new Proxy( {} , handler );
Target
Handler
operations
Handler
getin, delete, = , .

9. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

10. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let target = {}; // Start with an empty object
let handler = {}; // Don’t intercept anything
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
console.log( proxy.foo ); // 123
revoke();
console.log( proxy.foo ); // TypeError: Revoked

11. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let proto = new Proxy({}, {
get(target, propertyKey, receiver) {
console.log('GET '+propertyKey);
return target[propertyKey];
}
});
let obj = Object.create( proto );
obj.bla; // Output: GET bla

12. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
http://www.2ality.com/
Understanding ECMAScript 6
http://ecmascript6.org/
A Few New Things Coming To JavaScript
HARMONY OF DREAMS COME TRUE
Harmony specification_drafts

13. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
eyalvardi.wordpress.com