Wrapping Up
Method synthesis is a way to add members to objects, at runtime, based on context and the current state of the object. Using this capability, you can enhance and alter the API and the behavior of objects, at runtime, far beyond the facilities offered by the author of a class. This powerful metaprogramming feature is now possible in JavaScript due to the addition of two classes: Reflect and Proxy. The Reflect class provides convenience methods to query for different metadata of a class. The Proxy class is an interceptor that can wrap around objects and manipulate interactions with the object. Decorators offer another way to do metaprogramming—when placed on a target, they are executed by the runtime to add predefined metadata and members to their target.
Exercises
Use these exercises to deepen your understanding of proxy and method synthesis. You can find answers to these exerciseshere.
Exercise 1
Complete the following code to get the desired result.
| | 'use strict'; |
| | |
| | class Counter { |
| | constructor() { |
| | this.count = 0; |
| | } |
| | |
| | incrementBy(value) { this.count += value; return this.count; } |
| | decrementBy(value) { this.count -= value; return this.count; } |
| | } |
| | |
| | //Implement the call method here |
| | |
| | const counter = new Counter(); |
| | |
| | console.log(call(counter, 'incrementBy', 10)); //10 |
| | console.log(call(counter, 'decrementBy', 7)); //3 |
| | console.log(counter.count); //3 |
Exercise 2
Given the handler
| | const handler = { |
| | get: function(target, propertyName, receiver) {} |
| | }; |
and the following code to use a proxy:
| | const sample = {}; |
| | const proxy = new Proxy(sample, handler); |
| | const value = proxy.foo; |
what do the three parameters—target, propertyName, and receiver—in the get trap refer to during the execution of the last line of this code?
Exercise 3
Implement the createRevocableProxy() method in the following code to create a proxy that may be used for up to 3 seconds. During that time, any method calls on the proxy should be directed to the target instance.
| | 'use strict'; |
| | |
| | const createRevocableProxy = function(instance) { |
| | //Your code goes here |
| | }; |
| | |
| | const proxy = createRevocableProxy(new Date()); |
| | |
| | const callGetYear = function() { |
| | try { |
| | console.log(1900 + proxy.getYear()); |
| | } catch(ex) { |
| | console.log(ex.message); |
| | } |
| | }; |
| | |
| | callGetYear(); //current year like 2018 |
| | |
| | setTimeout(callGetYear, 1000); //current year like 2018 |
| | |
| | setTimeout(callGetYear, 5000); |
| | //Cannot perform 'get' on a proxy that has been revoked |
Exercise 4
Create a proxy that will receive a method that starts with play and return a string "I love to play ..." message if the part after play is contained in an activities array field. For example, when playTennis() is called, the returned message will be "I love to play Tennis". If the activity is not contained in the array, then the "I don’t play ..." message is returned. For any call that does not start with play, an exception should be thrown.
| | 'use strict'; |
| | |
| | const createPlayMethodProxy = function(instance) { |
| | //Your code goes here |
| | }; |
| | |
| | const proxy = createPlayMethodProxy({ activities: ['Football', 'Tennis'] }); |
| | |
| | console.log(proxy.playTennis()); //I love to play Tennis |
| | console.log(proxy.playFootball()); //I love to play Football |
| | console.log(proxy.playPolitics()); //I don't play Politics |
| | |
| | try { |
| | console.log(proxy.dance()); |
| | } catch(ex) { |
| | console.log(ex.message); //dance is not a function |
| | } |
Exercise 5
Complete the following code to synthesize dynamic properties on Set to return true if the property exists as an element and false otherwise. If the property invoked is a predefined property on Set, then use that.
| | 'use strict'; |
| | |
| | //Your code goes here |
| | |
| | const fruits = new Set(['Apple', 'Banana', 'Orange', 'Jack Fruit']); |
| | |
| | console.log(fruits.size); //4 |
| | console.log(fruits.Apple); //true |
| | console.log(fruits.Banana); //true |
| | console.log(fruits.Orange); //true |
| | console.log(fruits['Jack Fruit']); //true |
| | console.log(fruits.Tomato); //false |