درک این موضوع در جاوا اسکریپت: مشکلات و رفع مشکلات مشترک

جاوا اسکریپت this کلمه کلیدی یکی از قدرتمندترین و در عین حال سوء تفاهم مفاهیم است. مقدار آن بسته به تغییر می کند چگونه وت کجا یک تابع نامیده می شود و منجر به سردرگمی برای توسعه دهندگان در تمام سطوح می شود. در این وبلاگ ، ما تغییر شکل می دهیم this، مشکلات رایج مشترک را کاوش کنید و با استفاده از اصلاحات عملی استفاده کنید bind()، توابع فلش ، و self متغیر

چیست this؟

this اشاره به زمینه اعدام از یک تابع بر خلاف سایر زبانها ، مقدار آن ثابت نیست – مشخص می شود که این عملکرد نامیده می شود. بیایید رفتار آن را در زمینه های مختلف تجزیه کنیم.

this در زمینه های مختلف

1 زمینه جهانی

خارج از هر عملکردی ، this اشاره به موضوع جهانی (window در مرورگرها ، global در node.js).

console.log(this); // window (browser)

2 زمینه تابع

در یک عملکرد مستقل ، this بستگی دارد حالت سخت:

function regularFunc() {
  console.log(this); // window (non-strict), undefined (strict)
}

3 روشهای شیء

هنگامی که یک تابع یک روش یک شی است ، this اشاره به خود شیء:

const user = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}!`); // "Hello, Alice!"
  }
};
user.greet();

4 شنوندگان رویداد

در دستگیرندگان رویداد DOM ، this اشاره به عنصری که باعث ایجاد این رویداد شد:

button.addEventListener("click", function() {
  console.log(this); //  element
});

5 توابع سازنده

در سازندگان (با نام new) this اشاره به نمونه تازه ایجاد شده:

function Person(name) {
  this.name = name;
}
const bob = new Person("Bob"); // this = bob

مشکلات و رفع مشکلات مشترک

خط 1: از دست دادن this در تماس تلفنی

هنگام عبور از یک روش به عنوان پاسخ به تماس ، this دیگر به شیء اشاره نمی کند:

const user = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};
setTimeout(user.greet, 100); // "Hello, undefined!"

رفع 1: bind()

اتصال this به روش قفل کردن زمینه خود:

setTimeout(user.greet.bind(user), 100); // "Hello, Alice!"

رفع 2: توابع فلش

توابع فلش به ارث می برد this از دامنه اطراف آنها:

const user = {
  name: "Alice",
  greet: () => {
    // ❌ Avoid! Arrow functions don’t bind their own `this`.
    console.log(`Hello, ${this.name}!`); // "Hello, undefined!"
  }
};

// Correct use case: Preserve `this` in callbacks
setTimeout(() => user.greet(), 100); // "Hello, Alice!"

تعمیر 3: فروشگاه this در یک متغیر

تصرف this خارج از عملکرد تو در تو:

const user = {
  name: "Alice",
  greet() {
    const self = this; // self = user
    setTimeout(function() {
      console.log(`Hello, ${self.name}!`); // "Hello, Alice!"
    }, 100);
  }
};

گودال 2: this در توابع فلش

توابع فلش نه خودشان را داشته باشند thisبشر آنها آن را از محدوده والدین به ارث می برند:

const obj = {
  value: "Hello",
  regularFunc: function() {
    console.log(this.value); // "Hello"
  },
  arrowFunc: () => {
    console.log(this.value); // undefined (inherits global `this`)
  }
};

چه موقع از توابع فلش استفاده کنید

• تماس تلفنی/بسته شدن: بیرونی را حفظ کنید this:

  const timer = {
    start() {
      setInterval(() => {
        console.log(this); // timer object
      }, 1000);
    }
  };

• به عنوان روش های شیء خودداری کنید: به جای آن از توابع معمولی استفاده کنید.

گودال 3: فراموش کردن new در سازندگان

تماس با سازنده بدون new اختصاص دادن this به موضوع جهانی:

function Person(name) {
  this.name = name;
}
const alice = Person("Alice"); // this = window (name becomes global variable)!

رفع: اجرای new

استفاده کردن class نحو یا بررسی برای new:

class Person {
  constructor(name) {
    this.name = name;
  }
}

غذای اصلی

1. bind(): صریح قفل this هنگام عبور از روش ها به عنوان تماس تلفنی.
2. توابع فلش: برای حفظ بیرونی استفاده کنید this در بسته شدن/تماس تلفنی.
3. const self = this: میراث رفع کد Prees6.
4. اجتناب کردن this خطرات:
   • استفاده کردن class برای سازندگان شی.
   • توابع فلش را برای تماس های غیر متداول ترجیح دهید.
   • برای جلوگیری از تصادفی جهانی ، حالت سخت را فعال کنید thisبشر

با تسلط بر این الگوهای ، کد JavaScript را تمیز و قابل پیش بینی تر می نویسید. درک خود را با آزمایش با آزمایش کنید this در سناریوهای مختلف – و تماشای آن اشکالات ناپدید می شوند!

با خیال راحت سؤال کنید ….