JavaScript Arrow Function

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

تابع arrow

تابع Arrow در ES6 معرفی شد. این تابع به ما این امکان را می‌دهد که توابع را به صورت کوتاهتری بنویسیم.

قبل از معرفی این تابع، توابع را به صورت زیر می‌نوشتیم:

hello = function() {
return "Hello World!";
}

اما به کمک تابع Arrow می‌توان کد بالا را به صورت زیر نوشت:

hello = () => {
return "Hello World!";
}

اگر تابع تنها دارای یک عبارت باشد و آن عبارت مقداری را برگرداند، می‌توانید آکولاد و کلید واژه return را هم حذف کنید:

hello = () => "Hello World!";

اگر پارامترهایی داشته باشید می‌توانید آن‌ها را داخل پرانتز قرار دهید:

hello = (val) => "Hello " + val;

البته در صورتی که تنها یک پارامتر داشته باشید می‌توانید پرانتز را هم ننویسید.

hello = val => "Hello " + val;

this در تابع Arrow

در توابع معمولی چنانکه دیدیم کلید واژه this نماینده شیء است که تابع را فرا می‌خواند که می‌تواند window, document, button و یا هر چیز دیگری باشد.

در تابع arrow کلید واژه this نماینده شیء است که تابع arrow را تعریف کرده است.

برای درک بهتر مسئله، به دو مثال زیر توجه کنید. هر دو مثال یک تابع شیء را دو بار فرا می‌خوانند. اول زمانی که صفحه بارگذاری می‌شود و بار دیگر زمانی که کاربر دکمه‌ای را کلیک می‌کند.

مثال اول تابع معمولی را استفاده کرده و مثال دوم تابع arrow. نتیجه نشان می‌دهد که مثال اول 2 شیء متفاوت را برمی‌گرداند (window و button) ولی مثال دوم شیء window را دو بار برمی‌گرداند زیرا این شیء مالک تابع است.

مثال اول با استفاده از تابع معمولی:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript "this" </h2>
    <p> This example demonstrate that in a regular function,
      the "this" keyword represents different objects depending on how the function was called.
    </p>
    <p> Click the button to execute the "hello" function again,
      and you will see that this time "this" represents the button object.
    </p>
    <button id="btn"> Click Me! </button>
    <p id = "demo"> </p>
    <script>
     var hello;
      hello = function() {
        document.getElementById("demo").innerHTML += this;
      }

      //The window object calls the function:
      window.addEventListener("load", hello);

      //A button object calls the function:
      document.getElementById("btn").addEventListener("click", hello);
    </script>
  </body>
</html>

خروجی:

JavaScript "this"

This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.

Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.


مثال دوم با استفاده از تابع arrow:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript "this" </h2>
    <p>This example demonstrate that in Arrow Functions,
      the "this" keyword represents the object that owns the function, no matter who calls the function.
    </p>
    <p> Click the button to execute the "hello" function again,
      and you will see that "this" still represents the window object.
    </p>
    <button id="btn"> Click Me! </button>
    <p id = "demo"> </p>
    <script>
     var hello;
      hello = () => {
        document.getElementById("demo").innerHTML += this;
      }

      //The window object calls the function:
      window.addEventListener("load", hello);

      //A button object calls the function:
      document.getElementById("btn").addEventListener("click", hello);
    </script>
  </body>
</html>

خروجی:

JavaScript "this"

This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.

Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.


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