کلمه کلیدی “this” جاوا اسکریپت: درک قدرت و کاربرد آن

💡 در ابتدا، ممکن است گیج کننده باشد، اما وقتی مفهوم و کاربرد آن را درک کنید، آن را ابزار قدرتمندی خواهید یافت. در این وبلاگ، کلمه کلیدی این را ابهام زدایی می کنیم و توضیح می دهیم که چیست، چگونه کار می کند و موارد استفاده متفاوت آن.

“این” در جاوا اسکریپت چیست؟

در جاوا اسکریپت، این یک کلمه کلیدی ویژه است که به زمینه اجرای فعلی یا به طور دقیق تر، شی مالک کد در حال اجرا اشاره دارد. مقدار این بسته به نحوه فراخوانی یک تابع به صورت پویا در زمان اجرا تعیین می شود.

زمینه جهانی:

وقتی از این خارج از هر تابع یا شی استفاده می شود، به شی سراسری اشاره دارد. در مرورگرها، شی سراسری، شی پنجره است. مثلا:

console.log(this); // Points to the 'window' object in the browser

فراخوانی تابع:

هنگامی که این در داخل یک تابع معمولی (نه یک تابع فلش) استفاده می شود، مقدار آن به نحوه فراخوانی تابع بستگی دارد:

• تماس تابع منظم:

  هنگامی که یک تابع بدون هیچ زمینه ای فراخوانی می شود (مثلاً به هیچ شیئی متصل نیست)، این همچنین به شیء سراسری (پنجره در مرورگرها) در حالت غیر دقیق اشاره می کند. با این حال، در حالت سخت، این تعریف نشده خواهد بود.

  function greet() {
    console.log(this); // 'this' points to 'window' or is 'undefined' in strict mode
  }
  
  greet();
  

• فراخوانی روش:

  هنگامی که یک تابع به عنوان متد یک شیء فراخوانی می شود، این به خود شی اشاره می کند.

  const person = {
    name: 'John',
    greet: function() {
      console.log(this.name); // 'this' points to the 'person' object
    }
  };
  
  person.greet(); // Output: John
  

• توابع پیکان:

  برخلاف توابع معمولی، توابع پیکانی این مقدار را به صورت لغوی از محدوده اطراف خود می گیرند. این به این معنی است که مقدار این در داخل یک تابع فلش با مقدار این در خارج از تابع فلش یکسان است.

  const obj = {
    name: 'Alice',
    sayHello: function() {
      setTimeout(() => {
        console.log(this.name); // 'this' still refers to the 'obj' object
      }, 1000);
    }
  };
  
  obj.sayHello(); // Output: Alice
  

• توابع سازنده:

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

  function Person(name) {
    this.name = name;
  }
  
  const person1 = new Person('Bob');
  console.log(person1.name); // Output: Bob
  

• مسئولین رویداد:

  در کنترل کننده های رویداد، این معمولاً به عنصری اشاره می کند که رویداد را راه اندازی کرده است.

  <button id="myButton">Click Me</button>
  
  <script>
  document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // Points to the button element
  });
  </script>
  

نتیجه

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