سلام،

پارامتر ورودی Decorator همان تابع اصلیست که میخواهیم تغییراتی بهش اضافه کنیم بدون اینکه بصورت مستقیم دستی به تابع اصلی بزنیم.

دو مثال ساده میارم تا این مسئله رو باز کنم:

فرض کن یه دکوریتور می‌خوایم که قبل و بعد از اجرای یه تابع، یه پیغام نشون بده.

1. تعریف تابع اصلی: این همون تابعیه که می‌خوایم تغییرش بدیم.

function greet() {
    console.log("Hello, world!");
}

این تابع فقط یه پیغام "Hello, world!" رو نشون میده.

2. تعریف دکوریتور:

function myDecorator(func) {
    return function() {
        console.log("Starting...");
        func();
        console.log("Finished.");
    }
}

این دکوریتور میاد تابع greet رو میگیره و یه تابع جدید میسازه که قبل و بعد از اجرای greet پیغام‌های "Starting..." و "Finished." رو نشون میده.

3. استفاده از دکوریتور:

const decoratedGreet = myDecorator(greet);
decoratedGreet();

حالا وقتی decoratedGreet رو اجرا میکنی، این اتفاق میوفته:

Starting...
Hello, world!
Finished.

این روش میزاره ما بدون اینکه کد اصلی (تابع greet) رو تغییر بدیم، بهش قابلیت‌های جدیدی اضافه کنیم.

یه مثال دیگه

فرض کن میخوای دکوریتوری داشته باشی که بگه چند بار یه تابع اجرا شده.

1. تعریف تابع اصلی:

function sayHello() {
    console.log("Hello!");
}

2. تعریف دکوریتور:

function callCountDecorator(func) {
    let count = 0;
    return function() {
        count++;
        console.log(`Function called ${count} times`);
        func();
    }
}

3. استفاده از دکوریتور:

const countedSayHello = callCountDecorator(sayHello);
countedSayHello();
countedSayHello();
countedSayHello();

حالا وقتی countedSayHello رو اجرا میکنی، این اتفاق میوفته:

Function called 1 times
Hello!
Function called 2 times
Hello!
Function called 3 times
Hello!

ضمناً بجای پارامتر func هر اسم دیگه ای میتونی بذاری.مثلا fn, test, a, ...