JavaScript's Proxy object is a useful tool that opens up a world of possibilities, allowing you to create some really useful behaviors in your appl...
For further actions, you may consider blocking this person and/or reporting abuse
Nice article.
Proxies also find a place in state management, specifically in some UI frameworks, which I guess is a specific case of number 7 above.
To avoid the issues you mention, AI-UI limits use of Proxies to specific cases of
iterable
objects that can't be implemented in any other way.Proxies are cool! I recently used one with the XMLHttpRequest's
open
method (my project uses Axios). I needed global events for whenever a request started or completed, so I replacedXMLHttpRequest.prototype.open
with aProxy
to the real implementation, and before calling the real implementation I add a couple of event listeners to the target (the XHR object).I was going to blog about this but I dont think people are scrambling for content about
XMLHttpRequest
these days :)Great article!
Always curious why would anyone use Axios on browser? It looks like 50 kb of js, just to do the same as fetch.
It's a fair question.
One reason is compatibility - Axios uses
XMLHttpRequest
so it's good for situations wherefetch
isn't supported. That's rare now but a lot of legacy apps probably are using it. Once you have an established app using something like axios it's a lot of work to pull it out and replace with fetch.It also provides some more advanced things that are trickier to do with fetch like request interceptors.
Great article! Proxies are definitely one of the most powerful features of JS. We use them to bridge the gap between the TS type system and concrete values, for example providing type-safe functions for creating string templates (translations, email templates etc). The function receives a callback whose argument is a Proxy of an empty object but acts like the type we're expecting to be passed to template. Then the accessed properties return template variables formatted for the given library.
createTemplate((user) => `Hello ${user.name}`)
returns"Hello {{ user.name }}"
, where theuser
object doesn't actually contain any data, but it makes creating these kinds of static values feel like writing dynamic JS while also providing type safety. (I don't even want to think about how many hours I've wasted debugging randomundefined
s because of small typos in handwritten templates 😄)FYI, this is similar to “magic methods” in PHP:
__call()
__callStatic()
__get()
__set()
__unset()
GENIAL!!!
Gracias por compartirlo.
Bendiciones desde Venezuela
what is the difference between
obj[prop] = value;
return Reflect.set(target, property, value, receiver);
why use one or the other in the cases above?
Helpful article. thank bro.