# JavaScript this kalit so'zi

> this nima va u qanday aniqlanadi: obyekt metodi, oddiy chaqiruv, arrow funksiya, bind, call va apply. this yo'qolishi muammosi hamda yechimi.

Manba: https://learncode.uz/javascript/this-kalit-sozi/
Sana: 2026-06-03

`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

> **Atama**
>
> **this** — funksiya bajarilayotgan paytdagi **kontekst** obyekti. Oddiy
> funksiyalarda uning qiymati chaqiruv paytida aniqlanadi: nuqtadan **oldin**
> turgan obyekt `this` bo'ladi.

```js
const student = {
  name: "Aziz",
  introduce() {
    return "Men " + this.name;
  },
};

console.log(student.introduce());
```

`student.introduce()` — nuqtadan oldin `student` turibdi, demak `this` =
`student`.

## Bir xil funksiya, turli this

```js
function introduce() {
  return "Men " + this.name;
}

const a = { name: "Aziz", introduce };
const b = { name: "Dilnoza", introduce };

console.log(a.introduce());
console.log(b.introduce());
```

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

## this yo'qolishi — asosiy muammo

Metodni obyektdan **ajratib olsangiz**, bog'lanish uziladi:

```js
const student = {
  name: "Aziz",
  introduce() {
    return "Men " + this.name;
  },
};

console.log(student.introduce());

const detached = student.introduce;
console.log(detached());
```

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

Bu callback uzatishda tez-tez uchraydi:

```js
const student = {
  name: "Aziz",
  introduce() {
    console.log("Men " + this.name);
  },
};

setTimeout(student.introduce, 100);
```

`setTimeout` funksiyani obyektsiz chaqiradi — `this` yo'qoldi.

## bind — this ni biriktirish

```js
const student = {
  name: "Aziz",
  introduce() {
    console.log("Men " + this.name);
  },
};

const bound = student.introduce.bind(student);

bound();
setTimeout(bound, 100);
```

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

Arrow funksiya bilan o'rash ham ishlaydi:

```js
setTimeout(() => student.introduce(), 100);
```

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

## call va apply — darhol chaqirish

```js
function introduce(city, age) {
  return this.name + ", " + city + ", " + age + " age";
}

const student = { name: "Aziz" };

console.log(introduce.call(student, "Toshkent", 20));

console.log(introduce.apply(student, ["Buxoro", 22]));
```

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

> **Eslab qolish**
>
> `call` — **c**omma (vergul), `apply` — **a**rray (massiv), `bind` —
> bog'laydi, lekin chaqirmaydi.

## Arrow funksiyada this

[Arrow funksiya](https://learncode.uz/javascript/arrow-funksiyalar) `this` ni **o'zi hosil
qilmaydi** — tashqi muhitdan oladi:

```js
const student = {
  name: "Aziz",

  plain() {
    console.log("plain:", this.name);
  },

  arrow: () => {
    console.log("arrow:", this?.name);
  },
};

student.plain();
student.arrow();
```

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

```js
const group = {
  title: "IT-21",
  students: ["Aziz", "Dilnoza"],

  show() {
    this.students.forEach((t) => {
      console.log(this.title + ": " + t);
    });
  },
};

group.show();
```

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

## Hodisa tinglovchisida

```js
const button = document.querySelector("#button");

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

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

button.click();
```

```html
<button id="button">Bosing</button>
```

[Hodisa](https://learncode.uz/javascript/hodisalar) 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 |
|---|---|
| `obj.method()` | `obj` |
| `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

1. Obyekt metodida `this.name` ni chiqaring;
2. shu metodni o'zgaruvchiga ajratib chaqiring — nima o'zgardi?
3. `bind` bilan tuzating;
4. bitta funksiyani `call` orqali ikki xil obyektga qo'llang;
5. obyekt metodini arrow bilan yozib, natijani solishtiring;
6. 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](https://learncode.uz/javascript/klasslar) — obyektlarni shablon
asosida yaratish.