JavaScript this Keyword

this چیست؟

در جاوا اسکریپت کلیدواژه this به شیء‌ای که به آن تعلق دارد اشاره می‌کند. مقدار آن بسته به اینکه کجا استفاده شود متفاوت خواهد بود:

در تابع شیء، به شیء مالک اشاره دارد.
به تنهایی، به شیء سراسری (global) اشاره دارد.
در یک تابع، به شیء سراسری اشاره دارد.
در یک رخداد، به عنصری که رخداد را دریافت می‌کند اشاره دارد.
توابع شیء نظیر call() یا apply() می‌توانند this را به هر شیء‌ای ارجاع دهند.

this در تابع شیء

در یک تابع شیء، this به مالک (owner) تابع شیء اشاره دارد. در مثال زیر this به شیء person اشاره می‌کند. شیء person مالک تابع شیء fullName است.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> The JavaScript <i>this</i> Keyword </h2>
    <p> In this example, <b>this</b> represents the <b>person</b> object. </p>
    <p> Because the person object "owns" the fullName method. </p>
    <p id = "demo"> </p>
    <script>
      const person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566,
        fullName : function() {
          return this.firstName + " " + this.lastName;
        }
      };
      document.getElementById("demo").innerHTML = person.fullName();
    </script>
  </body>
</html>

خروجی:

this به تنهایی

زمای که به تنهایی مورد استفاده قرار گیرد، مالک، شیء سراسری (Global object) است و بنابراین this به شیء سراسری اشاره خواهد داشت.

در یک مرورگر شیء سراسری [object window] است.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> The JavaScript <i>this</i> Keyword </h2> </h2>
    <p> In this example, <b>this</b> refers to the window Object: </p>
    <p id = "demo"> </p>
    <script>
      let x = this;
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

خروجی:

this در یک تابع

در یک تابع جاوا اسکریپت، this به صورت پیش‌فرض به مالک تابع یعنی همان شیء سراسری که [object window] است اشاره دارد.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> The JavaScript <i>this</i> Keyword </h2> </h2>
    <p> In this example, <b>this</b> represents the object that "owns" myFunction: </p>
    <p id = "demo"> </p>
    <script>
      document.getElementById("demo").innerHTML = myFunction();
      function myFunction() {
        return this;
      }
    </script>
  </body>
</html>

خروجی:

this در یک رخداد

در این جا this به عنصری که رخداد را دریافت می‌کند اشاره دارد.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> The JavaScript <i>this</i> Keyword </h2> </h2>
    <button onclick="this.style.display='none'"> Click to Remove Me! </button>
  </body>
</html>

خروجی:

The JavaScript this Keyword

ارتباط صریح بین توابع

توابع شیء call() و apply() توابع از پیش تعریف شده جاوا اسکریپت هستند. از هر دوی آن‌ها می‌توان برای فراخواندن یک تابع شیء به عنوان آرگومان یک شیء دیگر استفاده کرد.

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

در مثال زیر هنگامی که person1.fullName با آرگومان person2 فراخوانی می‌شود، this به person2 اشاره می‌کند، حتی اگر تابع شیء person1 باشد.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> The JavaScript <i>this</i> Keyword </h2> </h2>
    <p> In this example, <strong>this</strong> refers to person2, even if it is a method of person1: </p>
    <p id = "demo"> </p>
    <script>
      const person1 = {
        fullName: function() {
          return this.firstName + " " + this.lastName;
        }
      }
      const person2 = {
        firstName:"John",
        lastName: "Doe",
      }
      let x = person1.fullName.call(person2);
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

خروجی:

<< مبحث قبلی مبحث بعدی >>