> 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/func/kind/higher/decorator.md).

# decorator

takes a function and alters/extends its behavior. 🚧 under construction

* [JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [function](/web/js/val/func.md) ⟩ decorator
* [JS](/web/js.md) ⟩ [technique](/web/js/tech.md) ⟩ decorator

{% hint style="success" %}
([function](/web/js/val/func.md)) <mark style="color:yellow;">**alters**</mark>/<mark style="color:yellow;">**extends**</mark> the behavior of <mark style="color:yellow;">**another function**</mark>.
{% endhint %}

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

* [saveCallHistory(f)](/web/js/val/func/kind/higher/decorator/savecallhistory-f.md) - make function save its call history ("arguments").
* [memoize(f)](/web/js/val/func/kind/higher/decorator/memoize/memoize-by-decorator/memoize-f.md) - make function "remember" its "return values".
* [benchmark(f)](/web/js/val/func/kind/higher/decorator/benchmark-f.md)
* [delay(f, s)](/web/js/val/func/kind/higher/decorator/delay-f-s.md) - delay the execution of a function by s seconds.
* [debounce(f, s)](/web/js/val/func/kind/higher/decorator/debounce-f-s.md) - debounce function calls for s seconds.
* [throttle(f, s)](/web/js/val/func/kind/higher/decorator/throttle-f-s.md) - throttle function calls by every s seconds.
* [debounce vs. throttle](/web/js/val/func/kind/higher/decorator/debounce-vs.-throttle.md) - difference between the two.
  {% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="warning" %}

* if the <mark style="color:yellow;">**original function**</mark> had <mark style="color:red;">**properties**</mark> on it, like <mark style="color:blue;">`func.calledCount`</mark> or whatever, then the <mark style="color:purple;">**decorated**</mark>**&#x20;**<mark style="color:yellow;">**one**</mark> will <mark style="color:red;">**not**</mark> provide them:exclamation:
* there's a way to create <mark style="color:purple;">**decorators**</mark> that <mark style="color:yellow;">**keep access**</mark> to <mark style="color:yellow;">**function properties**</mark>, but this requires using a special `Proxy` object to wrap a function.  👉 [Proxy and Reflect](https://javascript.info/proxy#proxy-apply).
  {% endhint %}
  {% endtab %}

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

* [memoize by decorator](/web/js/val/func/kind/higher/decorator/memoize/memoize-by-decorator.md)
  {% endtab %}

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

* [ ] JS.info ⟩ [Decorators and forwarding, call/apply](https://javascript.info/call-apply-decorators) ⭐️
  {% endtab %}

{% tab title="🚧" %}

* benchmark(f) - timed version of a function.
  {% endtab %}
  {% endtabs %}