> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/builtin/proxy.md).

# Proxy

[JS](/web/js.md) ⟩ [object](/web/js/val/obj.md) ⟩ [built-in](/web/js/val/builtin.md) ⟩ Proxy

{% hint style="success" %}
A <mark style="color:purple;">**Proxy**</mark> <mark style="color:yellow;">**wraps**</mark>**&#x20;another object/function** and <mark style="color:yellow;">**intercepts**</mark>&#x20;

* [**object creation**](/web/js/val/func/create.md)
* <mark style="color:yellow;">**property**</mark> [**creation**](/web/js/val/obj/prop/create.md)<mark style="color:yellow;">**/**</mark>[**access**](/web/js/val/obj/prop/access.md)<mark style="color:yellow;">**/**</mark>[**enumeration**](/web/js/val/obj/prop/enumerate.md)<mark style="color:yellow;">**/**</mark>[**testing**](/web/js/val/obj/prop/test.md)
* <mark style="color:yellow;">**method invocation**</mark>

```javascript
// ⭐️ proxy should shadow the original (target) object/function.
obj = new Proxy(obj, {
    // handler methods
    __proto__: null,     // prevent from inheriting unnecessary methods.
});
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
a <mark style="color:purple;">**Proxy**</mark> object <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**have**</mark>**&#x20;**<mark style="color:red;">**own**</mark>**&#x20;**<mark style="color:yellow;">**properties**</mark>.
{% endhint %}

{% hint style="info" %}
JavaScript enforces some <mark style="color:yellow;">**invariants**</mark> – conditions that must be fulfilled by [**internal methods**](/web/js/val/obj/prop/internal.md) and [**traps**](/web/js/val/builtin/proxy/handler-method.md). 📗 [javascript.info](https://javascript.info/proxy#proxy)&#x20;
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [handler method](/web/js/val/builtin/proxy/handler-method.md)
* [Reflect](/web/js/val/builtin/proxy/reflect.md) API
* [Proxy examples](/web/js/val/builtin/proxy/ex.md)
  {% endtab %}

{% tab title="👥 相關" %}

* <mark style="color:purple;">**Proxy**</mark> <mark style="color:yellow;">**intercepts property**</mark> [**creation**](/web/js/val/obj/prop/create.md)<mark style="color:yellow;">**/**</mark>[**access**](/web/js/val/obj/prop/access.md)<mark style="color:yellow;">**/**</mark>[**enumeration**](/web/js/val/obj/prop/enumerate.md)<mark style="color:yellow;">**/**</mark>[**testing**](/web/js/val/obj/prop/test.md).
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [Proxy and Reflect](https://javascript.info/proxy)
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 14.7 Proxy Objects
  {% endtab %}

{% tab title="📘 手冊" %}

* [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
  {% endtab %}
  {% endtabs %}