سرور مجازی NVMe

عملکردهای پیکان در جاوا اسکریپت اگر یک توسعه دهنده جاوا اسکریپت هستید، ممکن است بدانید که جاوا اسکریپت با استانداردهای ECMAScript (ES) مطابقت دارد. مشخصات ES6 یا ECMAScript 2015 برخی از مشخصات انقلابی جاوا اسکریپت را معرفی کرده بود، مانند توابع پیکان، کلاس ها، عملگرهای Rest و Spread، Promises، let و const و غیره. در این آموزش، ما تمرکز …

JavaScript (JS)برنامه نویسی

توسط مهران در بهمن ۴, ۱۴۰۲

هر N ثانیه یک تابع را در TypeScript فراخوانی کنید

سرفصلهای مطلب

زمان لازم برای مطالعه: 6 دقیقه

معرفی

اگر شما یک توسعه دهنده جاوا اسکریپت هستید، ممکن است بدانید که جاوا اسکریپت با آن مطابقت دارد ECMAScript استانداردهای (ES) مشخصات ES6 یا ECMAScript 2015، برخی از مشخصات انقلابی جاوا اسکریپت را معرفی کرده بود، مانند توابع پیکان، کلاس‌ها، عملگرهای Rest و Spread، Promises، let و const، و غیره.

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

نحو تابع پیکان

همانطور که می دانیم، یک تابع ES5 دارای نحو زیر است:

function square(a) {
    return a * a;
}

در ES6 می‌توانیم همان تابع را تنها با یک خط کد بنویسیم:

let square = (a) => { return a * a; }

علاوه بر این، اگر بدنه تابع فقط یک عبارت داشته باشد که برمی‌گرداند، می‌توانیم از مهاربندهای فرفری بگذریم. {} و return بیانیه:

let square = (a) => a * a

همچنین، اگر تابع فقط یک پارامتر را بگیرد، حتی می‌توانیم از پرانتزها بگذریم () اطراف آن:

let square = a => a * a

از طرف دیگر، اگر تابع هیچ پارامتری را دریافت نکند، ممکن است آن را به صورت زیر بنویسیم:

let results = () => { /* ...some statements */ };

ما باید کد کمتری را با این نحو بنویسیم در حالی که عملکرد مشابهی را ارائه می دهیم، که می تواند به شل شدن و ساده کردن کد شما کمک کند.

مزیت این سینتکس زمانی که در کال بک ها استفاده می شود بیشتر به چشم می خورد. بنابراین یک قطعه کد پرمخاطب و سخت به دنبال آن مانند این است:

function getRepos() {
    return fetch('https://api.github.com/users/rasanegar/repos')
      .then((response) => {
          return response.json();
      }).then((response) => {
          return response.data;
      }).then((repos) => {
          return repos.filter((repo) => {
              return repo.created_at > '2019-06-01';
          });
      }).then((repos) => {
          return repos.filter((repo) => {
              return repo.stargazers_count > 1;
          });
      });
}

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

function getRepos() {
    return fetch('https://api.github.com/users/rasanegar/repos')
      .then(response => response.json())
      .then(response => response.data)
      .then(repos => repos.filter(repo => repo.created_at > '2019-06-01'))
      .then(repos => repos.filter(repo => repo.stargazers_count > 1));
}

مزایای عملکردهای پیکان

استفاده از توابع Arrow دو مزیت عمده دارد. یکی این است که نحو کوتاه تری دارد و بنابراین به کد کمتری نیاز دارد. مزیت اصلی این است که چندین نقطه درد مرتبط با آن را از بین می برد this اپراتور.

بدون اتصال اپراتور “این”.

برخلاف سایر زبان های برنامه نویسی شی گرا، در جاوا اسکریپت (قبل از توابع فلش) هر تابع مرجع خود را تعریف می کند. this و بستگی دارد روی چگونه تابع فراخوانی شد. اگر با زبان های برنامه نویسی مدرن مانند جاوا، پایتون، سی شارپ و غیره تجربه دارید، اپراتور this یا self درون یک متد به شیئی که متد را فراخوانی کرده و نه اشاره دارد چگونه آن روش نامیده می شود.

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

برای درک بهتر مزایای توابع Arrow، اجازه دهید ابتدا روش چگونگی آن را درک کنیم this در ES5 کار می کند.

اپراتور “this” در ES5

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

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

بیایید سعی کنیم آن را با کمک یک مثال درک کنیم:

function test() {
    console.log(this);
}
test();

خروجی این برنامه در مرورگر به صورت زیر خواهد بود console:

Window {...}

همانطور که ما تماس گرفتیم test() از بافت جهانی، this کلمه کلیدی به شی جهانی که a است اشاره دارد Window شی در مرورگرها هر متغیر جهانی که ایجاد می کنیم به آن متصل می شود جهانی است هدف – شی Window.

برای مثال، اگر کد زیر را در مرورگر اجرا کنید console:

let greetings = 'Hello World!';
console.log(greetings);
console.log(window.greetings)

شما با “سلام جهان!” دو برابر:

Hello World!
Hello World!

همانطور که می توانیم متغیر جهانی را ببینیم greetings به شی جهانی متصل است window.

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

function Greetings(msg) {
    this.msg = msg;
};

let greetings = Greetings('Hello World!');
console.log(greetings);

پیام زیر را در قسمت دریافت خواهیم کرد console:

undefined

که منطقی است زیرا ما در حال تماس هستیم Greetings() در window زمینه و مانند مثال قبلی this به شی جهانی اشاره دارد window و this.msg اضافه کرده است msg دارایی به window هدف – شی.

اگر اجرا کنیم می توانیم آن را بررسی کنیم:

window.msg

از ما استقبال خواهد شد:

Hello World!

اما اگر از new اپراتور در حین ایجاد Greetings هدف – شی:

let greetings = new Greetings('Hello World!');
console.log(greetings.msg);

از ما استقبال خواهد شد:

Hello World!

ما می توانیم ببینیم this اپراتور به جهانی اشاره نمی کند window این بار اعتراض آن است new اپراتور که این جادو را انجام می دهد. را new عملگر یک شی خالی ایجاد می کند و می سازد this رجوع به آن شیء خالی شود.

امیدوارم اکنون احساسی نسبت به بیانیه قبلی ما داشته باشید

this بستگی دارد روی چگونه یک تابع فراخوانی می شود.

بگذارید مثال دیگری بزنیم:

let greetings = {
    msg: 'Hello World!',
    greet: function(){
        console.log(this.msg);
    }
}

greetings.greet();

اگر این کد را در مرورگر اجرا کنیم console، مجدداً با استقبال روبرو خواهیم شد:

Hello World!

چرا فکر میکنی this اشاره ای به window مخالفت این بار؟

الزام آور ضمنی: this کلمه کلیدی قبل از نقطه به شیء محدود می شود.

در مثال ما به آن اشاره دارد greetings هدف – شی.

اما اگر مرجع تابع را اختصاص دهیم greetings.greet به یک متغیر:

let greetRef = greetings.greet;
greetRef();

از ما استقبال می شود:

undefined

آیا این چیزی را توضیح می دهد؟ فراخوانی یک تابع در زمینه پنجره از مثال قبلی را به خاطر دارید؟

همانطور که ما تماس می گیریم greetRef() در یک window زمینه، در این مورد this اشاره به window شی و ما می دانیم که آن را ندارد msg ویژگی.

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

let factory = {
    items: (5, 1, 12),
    double: function(){
        return this.items.map(function(item, index){
            let value = item*2;
            console.log(`${value} is the double of ${this.items(index)}`);
            return value;
        });
    }
};

اگر تماس بگیریم factory.double() خطای زیر را دریافت خواهیم کرد:

Uncaught TypeError: Cannot read property '0' of undefined
    at <anonymous>
    at Array.map (<anonymous>)

خطا نشان دهنده آن است this.items تعریف نشده است که به این معنی است this داخل تابع ناشناس map() اشاره ای به factory هدف – شی.

اینها دلایلی است که ما آن را ارزش می نامیم this توسط زمینه اجرای یک تابع تعیین می شود. نمونه های پیچیده تری وجود دارد روی این نقطه درد که خارج از محدوده این آموزش است.

راه های مختلفی برای دور زدن این مشکل وجود دارد مانند عبور از this زمینه یا استفاده bind(). اما استفاده از این راه‌حل‌ها، کد را پیچیده و غیرضروری می‌کند.

خوشبختانه، در ES6 عملکردهای پیکان از نظر ارجاع به آن قابل پیش بینی تر هستند this کلمه کلیدی.

این اپراتور و پیکان در ES6 عمل می کند

ابتدا اجازه دهید تابع ناشناس را در داخل تبدیل کنیم map() به یک تابع پیکان:

let factory = {
    items: (5, 1, 12),
    double: function(){
        return this.items.map((item, index) => {
            let value = item*2;
            console.log(`${value} is the double of ${this.items(index)}`);
            return value;
        });
    }
};

اگر تماس بگیریم factory.double() از ما استقبال می شود:

10 is the double of 5
2 is the double of 1
24 is the double of 12
(10, 2, 24)

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

اگر اشاره کنیم this در جایی در تابع فلش جستجو دقیقاً به همان روشی انجام می شود که گویی یک متغیر معمولی است – در محدوده بیرونی. ما هم صداش می کنیم دامنه واژگانی.

در مثال ما، this در داخل تابع arrow همان مقدار را دارد this خارج یعنی در روش double(). بنابراین، this.items در تابع فلش همان است this.items در روش double() و هست factory.items.

توابع پیکان را نمی توان با آن فراخوانی کرد new اپراتور

همانطور که تابع فلش ندارد this کلمه کلیدی، بدیهی است که آنها نمی توانند از آن پشتیبانی کنند new اپراتور.

نتیجه

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

به‌عنوان یک توسعه‌دهنده جاوا اسکریپت، باید راحت از آن استفاده کنید، زیرا به طور گسترده با فریم‌ورک‌ها/کتابخانه‌های frontend مختلف مانند React، Angular و غیره استفاده می‌شود. امیدوارم این آموزش بتواند به شما کمک کند تصمیم بگیرید که چه زمانی و چگونه توابع پیکان را در خود پیاده‌سازی کنید. پروژه های آینده

(برچسب‌ها برای ترجمه)# جاوا اسکریپت

منتشر شده در 1403-01-24 23:23:05

امتیاز شما به این مطلب