JavaScript this kalit so'zi

this — JavaScript’dagi eng ko’p chalkashlik tug’diradigan kalit so’z. Sababi sodda: uning qiymati funksiya qayerda yozilganiga emas, qanday chaqirilganiga bog’liq.

Asosiy qoida

JavaScript

const talaba = {
ism: "Aziz",
tanishtir() {
  return "Men " + this.ism;
},
};

console.log(talaba.tanishtir());

talaba.tanishtir() — nuqtadan oldin talaba turibdi, demak this = talaba.

Bir xil funksiya, turli this

JavaScript

function tanishtir() {
return "Men " + this.ism;
}

const a = { ism: "Aziz", tanishtir };
const b = { ism: "Dilnoza", tanishtir };

console.log(a.tanishtir());
console.log(b.tanishtir());

Funksiya bitta, natija ikki xil — this chaqiruvchi obyektga qarab o’zgardi.

this yo’qolishi — asosiy muammo

Metodni obyektdan ajratib olsangiz, bog’lanish uziladi:

JavaScript

const talaba = {
ism: "Aziz",
tanishtir() {
  return "Men " + this.ism;
},
};

console.log(talaba.tanishtir());

const ajratilgan = talaba.tanishtir;
console.log(ajratilgan());

Ikkinchi holatda nuqtadan oldin obyekt yo’q — this obyektni topa olmadi.

Bu callback uzatishda tez-tez uchraydi:

JavaScript

const talaba = {
ism: "Aziz",
tanishtir() {
  console.log("Men " + this.ism);
},
};

setTimeout(talaba.tanishtir, 100);

setTimeout funksiyani obyektsiz chaqiradi — this yo’qoldi.

bind — this ni biriktirish

JavaScript

const talaba = {
ism: "Aziz",
tanishtir() {
  console.log("Men " + this.ism);
},
};

const bogliq = talaba.tanishtir.bind(talaba);

bogliq();
setTimeout(bogliq, 100);

bind yangi funksiya qaytaradi — uning this i doim berilgan obyekt.

Arrow funksiya bilan o’rash ham ishlaydi:

setTimeout(() => talaba.tanishtir(), 100);

Bu yerda chaqiruv talaba. bilan bo’lgani uchun bog’lanish saqlanadi.

call va apply — darhol chaqirish

JavaScript

function tanishtir(shahar, yosh) {
return this.ism + ", " + shahar + ", " + yosh + " yosh";
}

const talaba = { ism: "Aziz" };

console.log(tanishtir.call(talaba, "Toshkent", 20));

console.log(tanishtir.apply(talaba, ["Buxoro", 22]));

Ikkalasi ham this ni belgilab funksiyani darhol chaqiradi. Farq faqat argumentlarda: call — vergul bilan, apply — massiv bilan.

Arrow funksiyada this

Arrow funksiya this ni o’zi hosil qilmaydi — tashqi muhitdan oladi:

JavaScript

const talaba = {
ism: "Aziz",

oddiy() {
  console.log("oddiy:", this.ism);
},

strelka: () => {
  console.log("strelka:", this?.ism);
},
};

talaba.oddiy();
talaba.strelka();

Arrow metod uchun yaramaydi. Lekin metod ichidagi callback uchun aynan shu xususiyat qutqaradi:

JavaScript

const guruh = {
nom: "IT-21",
talabalar: ["Aziz", "Dilnoza"],

korsat() {
  this.talabalar.forEach((t) => {
    console.log(this.nom + ": " + t);
  });
},
};

guruh.korsat();

forEach callback’i arrow bo’lgani uchun this tashqi metoddan olindi.

Hodisa tinglovchisida

JavaScript

const tugma = document.querySelector("#tugma");

tugma.addEventListener("click", function () {
console.log("oddiy funksiya, this:", this.id);
});

tugma.addEventListener("click", () => {
console.log("arrow, this element emas:", typeof this);
});

tugma.click();

Sahifa

Hodisa tinglovchisida oddiy funksiyaning this i — hodisa yuz bergan element. Arrow’da esa yo’q; u yerda event.currentTarget ishlatiladi.

Qoidalar jadvali

Chaqiruv shakli	`this` qiymati
`obyekt.metod()`	`obyekt`
`funksiya()`	`undefined` (strict) yoki global
`yangi.bind(obj)`	`obj` — doimiy
`f.call(obj)` / `f.apply(obj)`	`obj`
Arrow funksiya	Tashqi muhitdan olingan
Hodisa tinglovchisi (oddiy)	Hodisa elementi

Amaliy mashq

Obyekt metodida this.ism ni chiqaring;
shu metodni o’zgaruvchiga ajratib chaqiring — nima o’zgardi?
bind bilan tuzating;
bitta funksiyani call orqali ikki xil obyektga qo’llang;
obyekt metodini arrow bilan yozib, natijani solishtiring;
metod ichidagi forEach da arrow va oddiy funksiyani almashtirib ko’ring.

2- va 6-qadamlar this bilan bog’liq eng ko’p uchraydigan xatolarni ko’rsatadi.

Qisqacha xulosa

this funksiya qanday chaqirilganiga qarab aniqlanadi.
obyekt.metod() da this — nuqtadan oldingi obyekt.
Metod ajratib olinsa, this yo’qoladi — bind bilan biriktiriladi.
call va apply this ni belgilab darhol chaqiradi.
Arrow funksiya this ni tashqaridan oladi: callback uchun yaxshi, metod uchun yaroqsiz.

Keyingi darsda klasslar — obyektlarni shablon asosida yaratish.