درک کلمه کلیدی «این» در جاوا اسکریپت: راهنمای کامل

Summarize this content to 400 words in Persian Lang
این this کلمه کلیدی در جاوا اسکریپت یکی از قدرتمندترین جنبه های زبان است که اغلب اشتباه گرفته می شود. ارزش آن توسط چگونه یک تابع به جای جایی که تعریف شده است فراخوانی می شود، که آن را برای مدیریت زمینه در کد شما بسیار مهم می کند.

در این راهنما، تفاوت های ظریف را بررسی خواهیم کرد this با مثال های عملی و نحوه کنترل صریح آن با استفاده از شیرجه رفتن call، apply، و bind.

مبانی this

در جاوا اسکریپت، this به شیئی که در حال حاضر کد را اجرا می کند اشاره دارد. قوانین تعیین مقدار آن به نوع فراخوانی تابع بستگی دارد:

صحافی ضمنی: this شی قبل از فراخوانی متد است.

صحافی صریح: this را می توان به صراحت با استفاده از call، apply، یا bind.

new صحافی: در توابع سازنده، this به شی تازه ایجاد شده اشاره دارد.

جهانی/صحافی پنجره: اگر هیچ یک از قوانین فوق اعمال نشود، this به طور پیش فرض برای شی جهانی (window در مرورگرها یا global در Node.js).

1. Implicit Binding: متن از تماس گیرنده

وقتی تابعی به عنوان متد یک شیء فراخوانی می شود، this به شی قبل از نقطه اشاره دارد.

const car = {
model: “Tesla”,
displayModel: function () {
console.log(this.model);
}
};

car.displayModel(); // Output: “Tesla”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، this.model به model دارایی از car اعتراض کنید زیرا car تماس گیرنده است

2. صریح صحافی: با استفاده از call، apply، و bind

زمانی که به کنترل دقیقی بر روی ارزش نیاز دارید this، می توانید استفاده کنید call، apply، یا bind.

الف call

این call متد بلافاصله یک تابع با یک مشخص شده را فراخوانی می کند this ارزش و استدلال های فردی

function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: “Jack” };

greet.call(person, “Hello”, “!”); // Output: “Hello, Jack!”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا، call تضمین می کند this.name اشاره به name دارایی از person شی

ب apply

این apply روش مشابه است call اما آرگومان ها را به جای آرایه به صورت جداگانه می گیرد.

greet.apply(person, [“Hi”, “.”]); // Output: “Hi, Jack.”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این باعث می شود apply به خصوص زمانی مفید است که آرایه ای از آرگومان ها برای ارسال دارید.

ج bind

این bind متد یک تابع جدید را با this به طور دائم روی یک شی مشخص تنظیم شده است، که امکان فراخوانی تاخیری را فراهم می کند.

const boundGreet = greet.bind(person, “Welcome”);
boundGreet(“?”); // Output: “Welcome, Jack?”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با bind، یک تابع قابل استفاده مجدد ایجاد می کنید که به یک زمینه خاص گره خورده است.

3. new Binding: ایجاد اشیا با توابع سازنده

وقتی تابعی با new کلمه کلیدی، this به شی جدید در حال ایجاد اشاره دارد.

function Person(name) {
this.name = name;
}

const jack = new Person(“Jack”);
console.log(jack.name); // Output: “Jack”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این new مجموعه های اپراتور this به شی جدید ایجاد شده، به شما این امکان را می دهد که طرح های اشیاء قابل استفاده مجدد را تعریف کنید.

4. Global/Window Binding: The Fallback

اگر هیچ یک از قوانین فوق اعمال نمی شود، this به طور پیش فرض برای شی جهانی است. با این حال، در حالت سخت (‘use strict’) this است undefined در چنین مواردی

function showName() {
console.log(this.name);
}

const name = “Global”;
showName(); // Output: “Global” in non-strict mode

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با الزام آور جهانی محتاط باشید زیرا می تواند منجر به رفتار ناخواسته شود.

خلاصه از call، apply، و bind

در اینجا یک مقایسه سریع وجود دارد:

روش
هدف
اعدام
گذراندن استدلال

call
فراخوانی فوری
بله
به صورت انفرادی

apply
فراخوانی فوری
بله
آرایه ای از آرگومان ها

bind
فراخوانی تاخیری (عملکرد جدید را برمی گرداند)
خیر
به صورت انفرادی یا جزئی

نتیجه گیری

تسلط بر this کلمه کلیدی برای نوشتن کد جاوا اسکریپت تمیز و آگاه از متن ضروری است. با درک ضمنی، صریح، newو جهانی الزام آور، شما می توانید با اطمینان مدیریت کنید this در سناریوهای مختلف ابزارهایی مانند call، apply، و bind کنترل دانه ای را ارائه می دهد که عملکردهای شما را انعطاف پذیر و قابل استفاده مجدد می کند.

من را در : Github Linkedin دنبال کنید

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Jack" };

greet.call(person, "Hello", "!"); // Output: "Hello, Jack!"

greet.apply(person, ["Hi", "."]); // Output: "Hi, Jack."

const boundGreet = greet.bind(person, "Welcome");
boundGreet("?"); // Output: "Welcome, Jack?"

function Person(name) {
  this.name = name;
}

const jack = new Person("Jack");
console.log(jack.name); // Output: "Jack"

function showName() {
  console.log(this.name);
}

const name = "Global";
showName(); // Output: "Global" in non-strict mode