Summarize this content to 400 words in Persian Lang یادگیری call()، apply()، و bind() روش‌ها مهم هستند زیرا به شما اجازه می‌دهند تا زمینه را کنترل کنید this در جاوا اسکریپت در شرایطی که پیش فرض است this رفتار آن‌طور که انتظار می‌رود کار نمی‌کند، مانند زمانی که روش‌ها را از یک شی به شیء دیگر وام می‌گیرید یا زمینه صحیح را در داخل callbackها حفظ می‌کنید، این روش‌ها انعطاف‌پذیری و کنترل را فراهم می‌کنند. با تسلط بر آنها می توانید توابع کارآمدتر، قابل استفاده مجدد و آگاه به زمینه بنویسید که به ویژه در برنامه های پیچیده مفید است.

قبل از اینکه وارد متدهای call()، application() و bind() شویم، بیایید کلمه کلیدی “this” و مکانیسم آن را درک کنیم.

کلمه کلیدی “این”.

بیایید بفهمیم چه زمانی و چه زمانی this کلمه کلیدی با نقاط گلوله زیر در اینجا به آن اشاره می کند:

در یک روش شی، this اشاره به شیء دارد. در یک روش تعریف شده در یک شی، this به شیء صاحب متد اشاره خواهد کرد.
در یک عملکرد منظم، this به شی جهانی اشاره دارد. در حالت غیر دقیق، اگر تابعی در زمینه جهانی (نه به عنوان روش یک شی) فراخوانی شود. this به شی جهانی اشاره دارد (window در مرورگرها).
در یک عملکرد حالت سخت، this است undefined. اگر تابع متد یک شی نباشد و به یک زمینه خاص محدود نشده باشد (از طریق call، apply، یا bind) this خواهد بود undefined در حالت سخت

در گردانندگان رویداد، this به عنصری اشاره دارد که رویداد را دریافت کرده است. هنگامی که یک رویداد تحریک می شود، this به عنصر HTML اشاره دارد که رویداد را فراخوانی کرده است.

<button onclick=”this.style.display=’none'”>
Click to Remove Me!
</button>

در این مورد، this اشاره به خود عنصر دکمه دارد که دریافت کرده است onclick رویداد

در توابع پیکان، this متفاوت رفتار می کند توابع پیکان خود را ندارند this زمینه در عوض، this در زمان ایجاد تابع فلش از نظر لغوی از محدوده اطراف به ارث می رسد. این یعنی this در داخل یک تابع فلش به this ارزش تابع یا زمینه محصور آن.

const person = {
name: “Alice”,
greet: function() {
setTimeout(() => {
console.log(`Hi, I’m ${this.name}`);
}, 1000);
}
};

person.greet(); // Output: Hi, I’m Alice

در این مورد، عملکرد فلش در داخل setTimeout ارث می برد this از greet روش، که به person شی

call() روش

را call() متد به شما امکان می دهد یک تابع یا متد را از یک شی “قرض بگیرید” و با ارسال شی دیگر به عنوان اولین آرگومان، آن را با یک شی دیگر استفاده کنید. اولین استدلال تبدیل می شود this مقدار در داخل تابع، و آرگومان های اضافی پس از آن.

را call() متد یک تابع جدید ایجاد نمی کند. تابع موجود را با زمینه و آرگومان های ارائه شده اجرا می کند.

const person = {
fullName: function(city, country) {
console.log(this.firstName + ” ” + this.lastName + ” is going to ” + city + “, ” + country + “.”);
}
}

const person1 = {
firstName: “John”,
lastName: “Doe”
}

person.fullName.call(person1, “Oslo”, “Norway”);
// Output: John Doe is going to Oslo, Norway.

در این مثال، call() برای اجرای متد fullName شخص با داده های person1 (firstName و lastName) استفاده می شود و آرگومان های اضافی “Oslo” و “Norway” هستند.

apply() روش

را apply() روش بسیار شبیه به call() روش تفاوت اصلی در نحوه ارسال آرگومان ها به تابع است. با apply()، آرگومان ها را به جای یک آرایه (یا یک شی آرایه مانند) ارسال می کنید.

مانند call()، apply() متد تابع جدیدی ایجاد نمی کند. بلافاصله تابع را با زمینه ارائه شده اجرا می کند (this ارزش) و آرگومان ها.

const person = {
fullName: function(city, country) {
console.log(this.firstName + ” ” + this.lastName + ” is going to ” + city + “, ” + country + “.”);
}
}

const person1 = {
firstName: “John”,
lastName: “Doe”
}

person.fullName.apply(person1, [“Oslo”, “Norway”]);
// Output: John Doe is going to Oslo, Norway.

در این مثال، apply() برای فراخوانی متد fullName شی person استفاده می شود، اما با متن (this) person1. آرگومان های “Oslo” و “Norway” به عنوان یک آرایه ارسال می شوند.

bind() روش

متد bind() در جاوا اسکریپت به شما امکان می دهد که متن (این مقدار) را برای یک تابع یا متد تنظیم کنید، درست مانند call() و application(). با این حال، بر خلاف call() و application()، متد bind() بلافاصله تابع را فراخوانی نمی کند. درعوض، یک تابع جدید را با مقدار این مقدار به شی ای که شما مشخص می کنید، برمی گرداند.

const person = {
fullName: function(city, country) {
console.log(this.firstName + ” ” + this.lastName + ” is going to ” + city + “, ” + country + “.”);
}
}

const person1 = {
firstName: “John”,
lastName: “Doe”
}

const func = person.fullName.bind(person1);
func(“Oslo”, “Norway”);
// Output: John Doe is going to Oslo, Norway.

در این مثال bind() یک تابع تابع جدید با این مقدار روی person1 ایجاد می کند. این تابع فوراً فراخوانی نمی شود، اما می توانید بعداً آن را فراخوانی کنید و آرگومان های “Oslo” و “Norway” را وارد کنید.

مثال: Logger متمرکز با زمینه های متعدد

در اینجا یک مثال کاربردی کوچک اما پیچیده در هنگام استفاده آورده شده است call()، apply()، یا bind() کارایی را به ارمغان می آورد – به ویژه در حمل و نقل کاربرد جزئی از توابع برای اهداف ورود به سیستم:

فرض کنید شما یک تابع ثبت مرکزی دارید که اطلاعات مربوط به کاربران مختلف را در حال انجام اقدامات ثبت می کند. با استفاده از bind() به شما اجازه می دهد تا تنظیم کنید this زمینه برای کاربران مختلف به طور موثر، اجتناب از کدهای تکراری.

const logger = {
logAction: function(action) {
console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
}
};

const user1 = { name: “Alice”, id: 101 };
const user2 = { name: “Bob”, id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1(“login”);
// Output: Alice (ID: 101) performed: login

logForUser2(“purchase”);
// Output: Bob (ID: 202) performed: purchase

چرا کارآمد است:

استفاده مجدد از زمینه: لازم نیست هر بار که اقدامی را ثبت می کنید، متن کاربر را به صورت دستی ارسال کنید. زمینه (this) یک بار صحافی می شود و لاگ قابل استفاده مجدد و تمیز می شود.

مدولاریت: اگر نیاز به افزودن کاربران یا اقدامات بیشتری دارید، می‌توانید به سرعت آنها را به آن متصل کنید logger بدون تغییر خود عملکرد، کد خود را خشک نگه دارید (خودتان را تکرار نکنید).

یادگیری call()، apply()، و bind() روش‌ها مهم هستند زیرا به شما اجازه می‌دهند تا زمینه را کنترل کنید this در جاوا اسکریپت در شرایطی که پیش فرض است this رفتار آن‌طور که انتظار می‌رود کار نمی‌کند، مانند زمانی که روش‌ها را از یک شی به شیء دیگر وام می‌گیرید یا زمینه صحیح را در داخل callbackها حفظ می‌کنید، این روش‌ها انعطاف‌پذیری و کنترل را فراهم می‌کنند. با تسلط بر آنها می توانید توابع کارآمدتر، قابل استفاده مجدد و آگاه به زمینه بنویسید که به ویژه در برنامه های پیچیده مفید است.

قبل از اینکه وارد متدهای call()، application() و bind() شویم، بیایید کلمه کلیدی “this” و مکانیسم آن را درک کنیم.

کلمه کلیدی “این”.

بیایید بفهمیم چه زمانی و چه زمانی this کلمه کلیدی با نقاط گلوله زیر در اینجا به آن اشاره می کند:

• در یک روش شی، this اشاره به شیء دارد. در یک روش تعریف شده در یک شی، this به شیء صاحب متد اشاره خواهد کرد.

• در یک عملکرد منظم، this به شی جهانی اشاره دارد. در حالت غیر دقیق، اگر تابعی در زمینه جهانی (نه به عنوان روش یک شی) فراخوانی شود. this به شی جهانی اشاره دارد (window در مرورگرها).

• در یک عملکرد حالت سخت، this است undefined. اگر تابع متد یک شی نباشد و به یک زمینه خاص محدود نشده باشد (از طریق call، apply، یا bind) this خواهد بود undefined در حالت سخت

• در گردانندگان رویداد، this به عنصری اشاره دارد که رویداد را دریافت کرده است. هنگامی که یک رویداد تحریک می شود، this به عنصر HTML اشاره دارد که رویداد را فراخوانی کرده است.

  <button onclick="this.style.display='none'">
    Click to Remove Me!
  </button>
  

  در این مورد، this اشاره به خود عنصر دکمه دارد که دریافت کرده است onclick رویداد

در توابع پیکان، this متفاوت رفتار می کند توابع پیکان خود را ندارند this زمینه در عوض، this در زمان ایجاد تابع فلش از نظر لغوی از محدوده اطراف به ارث می رسد. این یعنی this در داخل یک تابع فلش به this ارزش تابع یا زمینه محصور آن.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

در این مورد، عملکرد فلش در داخل setTimeout ارث می برد this از greet روش، که به person شی

call() روش

را call() متد به شما امکان می دهد یک تابع یا متد را از یک شی “قرض بگیرید” و با ارسال شی دیگر به عنوان اولین آرگومان، آن را با یک شی دیگر استفاده کنید. اولین استدلال تبدیل می شود this مقدار در داخل تابع، و آرگومان های اضافی پس از آن.

را call() متد یک تابع جدید ایجاد نمی کند. تابع موجود را با زمینه و آرگومان های ارائه شده اجرا می کند.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

در این مثال، call() برای اجرای متد fullName شخص با داده های person1 (firstName و lastName) استفاده می شود و آرگومان های اضافی “Oslo” و “Norway” هستند.

apply() روش

را apply() روش بسیار شبیه به call() روش تفاوت اصلی در نحوه ارسال آرگومان ها به تابع است. با apply()، آرگومان ها را به جای یک آرایه (یا یک شی آرایه مانند) ارسال می کنید.

مانند call()، apply() متد تابع جدیدی ایجاد نمی کند. بلافاصله تابع را با زمینه ارائه شده اجرا می کند (this ارزش) و آرگومان ها.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

در این مثال، apply() برای فراخوانی متد fullName شی person استفاده می شود، اما با متن (this) person1. آرگومان های “Oslo” و “Norway” به عنوان یک آرایه ارسال می شوند.

bind() روش

متد bind() در جاوا اسکریپت به شما امکان می دهد که متن (این مقدار) را برای یک تابع یا متد تنظیم کنید، درست مانند call() و application(). با این حال، بر خلاف call() و application()، متد bind() بلافاصله تابع را فراخوانی نمی کند. درعوض، یک تابع جدید را با مقدار این مقدار به شی ای که شما مشخص می کنید، برمی گرداند.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

در این مثال bind() یک تابع تابع جدید با این مقدار روی person1 ایجاد می کند. این تابع فوراً فراخوانی نمی شود، اما می توانید بعداً آن را فراخوانی کنید و آرگومان های “Oslo” و “Norway” را وارد کنید.

مثال: Logger متمرکز با زمینه های متعدد

در اینجا یک مثال کاربردی کوچک اما پیچیده در هنگام استفاده آورده شده است call()، apply()، یا bind() کارایی را به ارمغان می آورد – به ویژه در حمل و نقل کاربرد جزئی از توابع برای اهداف ورود به سیستم:

فرض کنید شما یک تابع ثبت مرکزی دارید که اطلاعات مربوط به کاربران مختلف را در حال انجام اقدامات ثبت می کند. با استفاده از bind() به شما اجازه می دهد تا تنظیم کنید this زمینه برای کاربران مختلف به طور موثر، اجتناب از کدهای تکراری.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

چرا کارآمد است:

استفاده مجدد از زمینه: لازم نیست هر بار که اقدامی را ثبت می کنید، متن کاربر را به صورت دستی ارسال کنید. زمینه (this) یک بار صحافی می شود و لاگ قابل استفاده مجدد و تمیز می شود.

مدولاریت: اگر نیاز به افزودن کاربران یا اقدامات بیشتری دارید، می‌توانید به سرعت آنها را به آن متصل کنید logger بدون تغییر خود عملکرد، کد خود را خشک نگه دارید (خودتان را تکرار نکنید).