JavaScript'da this nima va u strelka funksiyalarda qanday xatti-harakat qiladi?

Savol

JavaScript'da this nima va uning xatti-harakati oddiy va strelka funksiyalarda nimasi bilan farq qiladi?

Qisqa javob

Oddiy funksiyada this funksiya qanday chaqirilganiga qarab aniqlanadi (dinamik, chaqirish paytida). Strelka funksiyada o'z thisi yo'q — u thisni leksik jihatdan, e'lon qilingan o'rab turuvchi ko'rinish sohasidan oladi.

Batafsil javob

Oddiy funksiyalar uchun this chaqirish usuliga bog'liq:

• Obyekt metodi sifatida (obj.method()) — this objga teng.
• Oddiy funksiya sifatida (fn()) — this strict rejimda undefinedga teng (strict rejimsiz globalThisga).
• new orqali — this yangi yaratilayotgan obyektga teng.
• call/apply/bind orqali — this birinchi argument sifatida aniq beriladi.

Strelka funksiyalar o'z thisiga ega emas: ular yangi kontekst yaratmaydi, balki e'lon qilingan paytda eng yaqin o'rab turuvchi oddiy funksiyadan thisni ushlab oladi — xuddi closure o'zgaruvchilarni ushlab olganidek. Shu sababli, agar ichida obyektning o'z thisi kerak bo'lsa, strelka funksiyalarni obyekt metodlari sifatida ishlatib bo'lmaydi, lekin ular metodlar ichidagi callback'lar uchun qulay.

Misol

const timer = {
  seconds: 0,
  // Oddiy funksiya — `this` setInterval chaqirilishi orqali aniqlanadi,
  // callback ichida this !== timer
  startBroken() {
    setInterval(function () {
      this.seconds++ // this — timer emas, xato/NaN bo'ladi
    }, 1000)
  },
  // Strelka funksiya — this'ni startFixed()'dan oladi, ya'ni timer
  startFixed() {
    setInterval(() => {
      this.seconds++ // this === timer, to'g'ri ishlaydi
    }, 1000)
  }
}

class Button {
  label = 'OK'
  // Klass maydoni sifatidagi strelka funksiya — this doim instansga bog'langan,
  // .bind(this)siz hodisa ishlovchisi sifatida uzatish qulay
  handleClick = () => {
    console.log(this.label)
  }
}

Qo'shimcha savollar

• Nega global ko'rinish sohasida e'lon qilingan strelka funksiya ichidagi this undefined/globalThisga teng?
• bind call va applydan nimasi bilan farq qiladi?
• DOM hodisa ishlovchisi (element.addEventListener) ichida oddiy va strelka funksiya uchun this qanday xatti-harakat qiladi?