تابع پیکانی JS

قبلی بعدی

تابع پیکانی - Arrow Function

نکته: پیش نیاز این آموزش، تابع JS است.

تابع پیکانی باعث کوتاه نویسی و افزایش سرعت کدنویسی می شود.

let multi = function (para) { 
    return para * 2;
}

let multi = (para) => { 
    return para * 2;
}

نکته: تابع پیکانی حالت کوتاه شده تابع بیانی است.

اگر تابع پیکانی:

فقط شامل یک خط (عبارت) باشد.
و مقدار برگشتی داشته باشد. (شامل کلمه return باشد)

می توانیم براکت و کلمه کلیدی return را حذف کنیم.

let multi = (para) => para * 2;

اگر فقط یک پارامتر داشته باشیم، می توانیم پرانتز را نیز حذف کنیم.

let multi = para => para * 2;

کلمه کلیدی this در تابع پیکانی

کلمه کلیدی this در تابع عادی و بیانی، شیء که آن را فراخوانی کرده اشاره می کند. مانند شیء window، المان، document و ...

<button id="btn1" onclick="multi()">btn1</button>
<!--
رویدادهایی که درون المان تعریف می شوند به شیء 
window
اشاره می کنند
window
-->

<script>
    function multi () { 
        document.getElementById('demo').innerHTML = this;
    }

    multi();
    // window.multy();
    // window

    window.addEventListener("load", multi);
    // window

    document.getElementById("btn2").addEventListener("click", multi);
    // HTMLButtonElement (btn2)
</script>

کلمه کلیدی this در تابع پیکانی، به شیء سراسری window اشاره می کند.

<button id="btn1" onclick="multi()">btn1</button>
<!--
رویدادهایی که درون المان تعریف می شوند به شیء 
window
اشاره می کنند
window
-->

<script>
    let multi = () => { 
        document.getElementById('demo').innerHTML = this;
    }

    multi();
    // window.multy();
    // window

    window.addEventListener("load", multi);
    // window

    document.getElementById("btn2").addEventListener("click", multi);
    // HTMLButtonElement (btn2)
</script>

خلاصه درس

در این درس با تابع پیکانی (Arrow Function) در JavaScript آشنا شدیم.
همچنین به کاربرد های کلمه کلیدی (this) پی بردیم.

قبلی بعدی

توسعه دهندگان

دیبا جلالی