ES6 arrow funksiyalar

Ok funksiyalari

Ok funksiyalari qisqaroq funksiya sintaksisini yozishga imkon beradi:

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

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

U qisqaradi! Agar funksiyada faqat bitta operator bo‘lsa va operator qiymat qaytarsa, qavslar va return kalit so‘zini olib tashlashingiz mumkin:

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

Agar sizda parametrlar bo‘lsa, ularni qavs ichiga o‘tkazasiz:

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

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

hello = val => "Hello " + val;

this haqida nima deyish mumkin?

this bilan ishlash ham oddiy funksiyalardan farq qiladi funksiyalari.

Qisqa qilib aytganda, arrow funksiyalarida this bog‘lanishi yo‘q.

Muntazam funksiyalarda this kalit so‘zi funksiya deb ataladigan obyektni ifodalaydi, bu oyna, hujjat, tugma yoki boshqa narsa bo‘lishi mumkin.

Arrow funksiyalarida this kalit so‘zi har doim arrow funksiyasini aniqlagan obyektni ifodalaydi.

Farqni tushunish uchun ikkita misolni ko‘rib chiqaylik.

Ikkala misol ham usulni ikki marta chaqiradi, avval sahifa yuklanganda va yana bir marta foydalanuvchi tugmani bosganida.

Birinchi misolda oddiy funksiya, ikkinchi misolda esa arrow funksiyasi qo‘llaniladi.

Natija shuni ko‘rsatadiki, birinchi misol ikki xil obyektni (window va button) qaytaradi, ikkinchi misol esa Header obyektini ikki marta qaytaradi.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

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

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

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

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Funksiyalar bilan ishlayotganda bu farqlarni yodda tuting. Ba’zan oddiy funksiyalarning xatti-harakati aynan sizga kerak bo‘lgan narsa bo‘ladi, aks holda arrow funksiyalaridan foydalaning.