{"id":5489,"date":"2020-03-30T12:10:36","date_gmt":"2020-03-30T06:40:36","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=5489"},"modified":"2020-03-30T12:10:41","modified_gmt":"2020-03-30T06:40:41","slug":"what-is-a-proxy-in-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/what-is-a-proxy-in-javascript\/","title":{"rendered":"What is a proxy in javascript"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What is a proxy in javascript<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Date: 30\/03\/2020<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"369\" height=\"136\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/proxy-js.png\" alt=\"\" class=\"wp-image-5491\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/proxy-js.png 369w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/proxy-js-300x111.png 300w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Introduction<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Proxy in javascript is used to define custom behaviour for fundamental operations. We will have a proxy object where we will define our desired behaviour and wrap the object with proxy API.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Basic Example<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const handler = {\n  get: function(obj, prop) {\n    return prop in obj ?\n      obj[prop] :\n      37;\n  }\n};\n\nconst p = new Proxy({}, handler);\np.a = 1;\np.b = undefined;\n\nconsole.log(p.a, p.b); \n\/\/  1, undefined\n\nconsole.log('c' in p, p.c); \n\/\/  false, 37<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The above example has an object that has a getter method. It acts as a getter method with setter only if the property doesn&#8217;t exist. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Syntax<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><code>const p = new Proxy(target, handler)<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It has method revocable. The&nbsp;<code><strong>Proxy.revocable()<\/strong><\/code>&nbsp;method is used to create a revocable&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Proxy\" target=\"_blank\" rel=\"noopener\"><code>Proxy<\/code><\/a>&nbsp;object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can also use methods such as set, apply in the handler and write our rules based on need and wrap it with Proxy API. <br>Check here for more info here <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/javascript.info\/proxy\" target=\"_blank\">https:\/\/javascript.info\/proxy<\/a><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Conclusion<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using pheonixsolutions. Share it with your friends to keep it alive if you find it useful.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is a proxy in javascript Date: 30\/03\/2020 Introduction Proxy in javascript is used to define custom behaviour for fundamental [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[661,758],"class_list":["post-5489","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-javascript","tag-proxy","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1qx","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5489"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5489\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}