Arrow Function در جاوا اسکریپت

خلاصه: در این آموزش چگونگی استفاده از تابع arrow جاوا اسکریپت برای نوشتن کدهای مختصر تر برای عبارات تابع را فراخواهید گرفت.

مقدمه ای بر تابع  arrow جاوا اسکریپت

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

var add = function(x,y) {
  return x + y;
}
console.log(add(10,20)); // 30

در این مثال عبارت تابع add() جمع دو عدد را باز می گرداند.  مثال زیر از تابع arrow استفاده می کند که برابر با تابع add() در مثال قبل است.

var add = (x,y) => x + y;
console.log(add(10,20)); // 30;

عملگر typeof ، function را باز می گرداند که نشان دهنده نوعی از تابع arrow است.

console.log(typeof add); // function

همچنین یک تابع arrow همانطور که در مثال زیر نشان داده شده، نمونه ای از Function type است:

console.log(add instanceof Function); // true

تابع arrow جاوا اسکریپت با پارامترهای چندگانه

برای تابع arrow که دو یا تعداد بیشتر نشانگر می گیرد، از دستور زیر استفاده می کنیم:

(p1, p2, ..., pn) => expression;

عبارت زیر:

=> expression

برابر است با عبارتی که در ادامه آمده است:

=> { return expression; }

به عنوان مثال، برای مرتب کردن آرایه ای از اعداد در دستورهای نزولی، از متد sort()  شی array استفاده می کنید، مانند مثال زیر:

var numbers = [4,2,6];
numbers.sort(function(a,b){ 
    return b - a; 
});
console.log(numbers); // [6,4,2]

با استفاده از تابع arrow ، دستور بصورت زیر کوتاهتر می شود:

var numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers); // [6,4,2]

تابع arrow جاوااسکریپت با یک تک پارامتر

برای تابع arrow که یک تک پارامتر می گیرد، از دستور زیر استفاده کنید:

(p1) => { statements }

نکته اینکه می توانید پرانتزها را حذف کنید:

p => { statements }

در مثال زیر از یک تابع arrow به عنوان نشانگر متد map() استفاده شده که  آرایه ای از رشته ها را به طول رشته ها تبدیل می کند:

var names = ['John', 'Mac', 'Peter'];
var lengths = names.map(name => name.length);
 
console.log(lengths);

تابع arrow جاوااسکریپت بدون پارامتر

اگر تابع arrow هیچ پارامتری نداشته باشد مانند نمونه از پرانتزها استفاده کنید:

() => { statements }

به مثال زیر توجه کنید:

var logDoc = () => console.log(window.document);
logDoc();

سطر جدید بین تعریف پارامتر و  arrow

جاوا اسکریپت به شما اجازه نمی دهد از یک سطر جدید بین تعریف پارامتر و arrow (=>) تابع arrow استفاده کنید. به عنوان مثال کد زیر باعث خطای SyntaxError  می شود:

var multiply = (x,y) 
=> x * y;

اما، مثال زیر به خوبی کار می کند:

var multiply = (x,y) => 
x * y;

جاوا اسکریپت به شما اجازه می دهد از سطر جدید بین پارامترهایی که در مثال زیر نشان داده شده استفاده کنید:

var multiply = (
  x,
  y
) => 
x * y;

دستورات و تعاریف در بدنه تابع arrow

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

۱۰ + ۲۰;

همچنین یک عبارت وظیفه خاصی دارد، مانند نمونه:

if (x === y) {
    console.log('x equals y');
}

اگر از یک عبارت در بدنه تابع arrow استفاده کنید، نیازی به استفاده از کروشه ندارید:

var square = x => x * x;

اما، اگر از دستور استفاده کنید، باید آن را مانند مثال زیر داخل دو کروشه قرار دهید:

var except = msg => {
    throw msg;
};

تابع arrow جاوا اسکریپت و object literal

به مثال زیر توجه کنید:

var setColor = function (color) {
    return {value: color}
};
 
var backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"

عبارت تابع setColor() شی ای را باز می گرداند که دارای مقدار ویژگی set برای نشانگر رنگ است. اگر دستور زیر را برای بازگرداندن یک object literal  از یک تابع arrow امتحان کنید، با پیغام خطا روبرو خواهید شد:

p => {object:literal}

به عنوان مثال، کد زیر باعث خطا می شود:

var setColor = color => {value: color };

چون بلوک و object literal  هردو از کروشه استفاده می کنند، موتور جاوا اسکریپت نمی تواند بلوک و یک شی را از هم تشخیص دهد.

برای رفع این موضوع، نیاز است که object literal را مانند نمونه در پرانتز قرار دهید:

var setColor = color => ({value: color });

تابع arrow در برابر یک تابع عادی

دو تفاوت اصلی میان یک تابع arrow و یک تابع عادی وجود دارد:

۱- اول اینکه، در تابع arrow this, arguments, super, new.target لغوی هستند. به این معنی که تابع arrow این متغیرها را از محدوده حرفی (لغوی) محصور شده استفاده می کند.

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

تابع arrow جاوا اسکریپت و this

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

function Car() {
    this.speed = 0;
 
    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(function () {
            console.log(this.speed); // undefined
        }, ۱۰۰۰);
 
    };
}
 
var car = new Car();
car.speedUp(50);

در هر تابع بی نامِ تابع setTimeOut() ، this.speed ، undefined است. به این دلیل که this تابع بی نام this متد speedUp() را پنهان می کند.

برای رفع این مورد، معمولا this را به یک متغیر که داخل تابعی ناشناس و بی نام پنهان نشده، ارجاع می دهید، مانند مثال زیر:

function Car() {
    this.speed = 0;
 
    this.speedUp = function (speed) {
        this.speed = speed;
        var self = this;
        setTimeout(function () {
            console.log(self.speed);
        }, ۱۰۰۰);
 
    };
}
 
var car = new Car();
car.speedUp(50); // 50;

برخلاف یک تابع بی نام، یک تابع arrow ، this از فضای محصو شده را به جای ایجاد فضای خود در برمی گیرد. کد زیر باید همانطور که انتظار دارید کار کند:

function Car() {
    this.speed = 0;
 
    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(
            () => console.log(this.speed),
            ۱۰۰۰);
 
    };
}
 
var car = new Car();
car.speedUp(50); // 50;

تابع  arrow جاوا اسکریپت و نشانگرها

یک تابع arrow شی نشانگر ندارد. بنابراین arguments اشاره دارد به نام در محدوده محصور شده است. مثال زیر را مشاهده کنید:

function foo() {
    return x => x + arguments[0];
}
 
var bar = foo(10, 20);
var result = bar(5);
console.log(result); // 15

تابع arrow داخل تابع foo به شی نشانگر اشاره دارد. اما این شی های نشانگر متعلق به تابع foo() است، نه تابع arrow.

در عمل، پیشنهاد شده که برای فراخوانی تابع از تابع  arrow استفاده کنید، چون دستور تابع arrow برای استفاده از مقدار this مرتب تر و امن تر است.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5٫00 out of 5)
Loading...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit