ES6 Arrow Funktsiyalar

React ES6 Arrow Funktsiyalar

Arrow Funktsiyalar

Arrow funktsiyalar qisqaroq funksiya sintaksisini yozishga imkon beradi:

Misol Oldingi versiya:

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

Arrow Funktsiya bilan:

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

Yana qisqaroq! Agar funktsiya faqat bitta bayonotga ega bo‘lsa va bayonot qiymat qaytaradigan bo‘lsa, qavslar va return kalit so‘zini olib tashlashingiz mumkin:

Misol Arrow Funktsiyalar Avtomatik Qaytaradi:

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

Agar sizda parametrlar bo‘lsa, ularni qavs ichida uzatishingiz kerak:

Misol Parametrlar bilan Arrow Funktsiya:

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

Aslida, agar faqat bitta parametr bo‘lsa, qavslarni ham o‘tkazib yuborishingiz mumkin:

Misol Qavslariz O‘tkazib Yuborilgan Arrow Funktsiya:

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

this Qanday Bo‘ladi?

Arrow funktsiyalarda thisning ishlash tarzi oddiy funktsiyalardan farq qiladi.

Qisqacha qilib aytganda, Arrow funktsiyalarda this bog‘lanishi yo‘q.

Oddiy funktsiyalarda this kalit so‘zi funktsiyani chaqirgan obyektni anglatadi, bu window, document, tugma yoki boshqa narsalar bo‘lishi mumkin.

Arrow funktsiyalarda this kalit so‘zi har doim Arrow funktsiya aniqlangan obyektni anglatadi.

Farqni tushunish uchun ikkita misolni ko‘rib chiqamiz.

Har ikkala misolda ham metod ikki marta chaqiriladi, birinchi marta sahifa yuklanganda va yana bir marta foydalanuvchi tugmani bosganda.

Birinchi misolda oddiy funksiya, ikkinchi misolda Arrow funksiya ishlatilgan.

Natija shuni ko‘rsatadiki, birinchi misolda ikki xil obyekt (window va tugma) qaytariladi, ikkinchi misolda esa Header obyekti ikki marta qaytariladi.

Misol Oddiy funksiya bilan, this funktsiyani chaqirgan obyektni anglatadi:

class Header {
  constructor() {
    this.color = 'Red';
  }
 
  // Oddiy funksiya:
  changeColor = function () {
    document.getElementById('demo').innerHTML += this;
  };
}
 
const myheader = new Header();
 
// `window` obyekti funksiyani chaqiradi:
window.addEventListener('load', myheader.changeColor);
 
// Tugma obyekti funksiyani chaqiradi:
document.getElementById('btn').addEventListener('click', myheader.changeColor);

Misol Arrow funktsiya bilan, this har doim Header obyektini anglatadi, kim chaqirganidan qat'iy nazar:

class Header {
  constructor() {
    this.color = 'Red';
  }
 
  // Arrow funksiya:
  changeColor = () => {
    document.getElementById('demo').innerHTML += this;
  };
}
 
const myheader = new Header();
 
// `window` obyekti funksiyani chaqiradi:
window.addEventListener('load', myheader.changeColor);
 
// Tugma obyekti funksiyani chaqiradi:
document.getElementById('btn').addEventListener('click', myheader.changeColor);

Funktsiyalar bilan ishlayotganda bu farqlarni yodda tuting. Ba'zan oddiy funktsiyalarning xatti-harakatlari sizga kerak bo‘ladi, agar kerak bo‘lmasa, Arrow funktsiyalardan foydalaning.