Chapter 13 — this kalit so'zi

this — JavaScript'dagi eng ko'p chalkashtiriluvchi tushunchalardan biri, chunki uning qiymati qayerda yozilganiga emas, balki qanday chaqirilganiga bog'liq. Bu boshqa ko'plab dasturlash tillaridan farq qiladi, shuning uchun batafsil o'rganamiz.

---

13.1 this nima?

Simple Explanation

this — functionni chaqirayotgan object'ga ishora qiluvchi maxsus kalit so'z.

Nega bu tushuncha qiyin?

Chunki thisning qiymati 4 xil holatda 4 xil bo'lishi mumkin, va buni aniqlash uchun "functionning yozilgan joyi"ga emas, "functionning qanday chaqirilishiga" qarash kerak.

Real-Life Analogy

🪞 thisni oyna deb tasavvur qiling — oyna har doim "kim oldida turibdi" o'shani aks ettiradi. Xuddi shunday, this "function kim tomonidan chaqirilyapti" o'shani aks ettiradi.

13.2 thisning 4 ta asosiy holati

Holat 1 — Method sifatida chaqirilganda

Agar function object'ning methodi sifatida chaqirilsa, this — o'sha object'ga ishora qiladi.

script.js
JavaScriptNusxalash
01let person = {
02    name: "Ali",
03    greet: function () {
04        console.log(this.name);
05    }
06};
07 
08person.greet(); // "Ali"

Explanation
greet() — person orqali chaqirilgani uchun, this — personga ishora qiladi.

Holat 2 — Oddiy function sifatida chaqirilganda

Agar function hech qanday object orqali emas, mustaqil chaqirilsa, this — global object'ga ishora qiladi (browser'da window), yoki strict modeda undefined bo'ladi.

script.js
JavaScriptNusxalash
01function showThis() {
02    console.log(this);
03}
04 
05showThis(); // window (yoki undefined, strict mode'da)

⚠️ Common Mistake
Method ichidan oddiy function chaqirish — thisni "yo'qotadi":

script.js
JavaScriptNusxalash
01let person = {
02    name: "Ali",
03    greet: function () {
04        function inner() {
05            console.log(this.name); // undefined!
06        }
07        inner();
08    }
09};
10person.greet();

Nima uchun? inner() — person orqali emas, mustaqil chaqirilyapti, shuning uchun uning thisi personga emas, global object'ga (yoki undefinedga) ishora qiladi.

Holat 3 — new kalit so'zi bilan chaqirilganda (Constructor)

new bilan chaqirilganda, this — yangi yaratilayotgan objectga ishora qiladi.

script.js
JavaScriptNusxalash
01function Person(name) {
02    this.name = name;
03}
04 
05let user = new Person("Vali");
06console.log(user.name); // "Vali"

Explanation
new Person("Vali") chaqirilganda, JavaScript avtomatik ravishda bo'sh object yaratadi va thisni o'sha object'ga bog'laydi. Bu — Chapter 22'da (Classes) chuqurroq o'rganiladi.

Holat 4 — Arrow Function'da this

Bu — eng ko'p chalkashtiriluvchi holat. Arrow function o'zining thisiga ega emas — u thisni tashqi (uni o'rab turgan) scope'dan meros oladi (lexical this deb ataladi).

script.js
JavaScriptNusxalash
01let person = {
02    name: "Ali",
03    greet: function () {
04        let inner = () => {
05            console.log(this.name);
06        };
07        inner();
08    }
09};
10 
11person.greet(); // "Ali"

Explanation
Oddiy function'dan farqli o'laroq (Holat 2'da ko'rganimizdek), arrow function inner o'zining thisini yaratmaydi, balki uni o'rab turgan greet functionining thisidan "meros" oladi. greet() — person orqali chaqirilgani uchun, uning thisi person, shuning uchun inner ham xuddi shu thisni ko'radi.

Diagram — Arrow function this qanday "meros" oladi

code.text
TEXTNusxalash
01person.greet()  →  this = person
02    │
03    └── inner = () => { this.name }
04              (o'z this'i yo'q, greet'dan meros oladi)
05              →  this hali ham person

🔥 Important
Aynan shu xususiyat tufayli, arrow function'lar callback sifatida (masalan, setTimeout, event handler ichida) juda foydali — chunki ular tashqi thisni "yo'qotmaydi".

Solishtirish — Regular function vs Arrow function this

script.js
JavaScriptNusxalash
01let timer = {
02    seconds: 0,
03    start: function () {
04        setInterval(function () {
05            this.seconds++;           // ❌ this — window, xato!
06            console.log(this.seconds); // NaN
07        }, 1000);
08    }
09};

script.js
JavaScriptNusxalash
01let timer = {
02    seconds: 0,
03    start: function () {
04        setInterval(() => {
05            this.seconds++;           // ✅ this — timer, to'g'ri!
06            console.log(this.seconds); // 1, 2, 3...
07        }, 1000);
08    }
09};

Explanation
Birinchi misolda, setIntervalga berilgan oddiy function o'zining thisini yaratadi (bu holatda windowga ishora qiladi), shuning uchun this.seconds ishlamaydi. Ikkinchi misolda esa, arrow function start methodining thisini (ya'ni timerni) meros oladi, shuning uchun to'g'ri ishlaydi.

13.3 thisni qo'lda boshqarish: call, apply, bind

Simple Explanation

Ba'zida thisning qanday chaqirilishidan qat'i nazar, uni qo'lda "majburiy" belgilash kerak bo'ladi. Buning uchun 3 ta metod bor.

Jadval

Example

script.js
JavaScriptNusxalash
01function introduce(city) {
02    console.log(`Men ${this.name}man, ${city}dan`);
03}
04 
05let person = { name: "Aziz" };
06 
07introduce.call(person, "Toshkent");   // "Men Azizman, Toshkentdan"
08introduce.apply(person, ["Buxoro"]);  // "Men Azizman, Buxorodan"
09 
10let boundIntroduce = introduce.bind(person);
11boundIntroduce("Xiva");                // "Men Azizman, Xivadan"

Explanation

Har uchala metod ham introduce function ichidagi thisni majburan personga bog'laydi, garchi introduce personning methodi bo'lmasa ham.

💡 Key Idea
bind() ayniqsa foydali, chunki u kelajakda chaqirish uchun "tayyor" function qaytaradi — bu ko'pincha event handler'larda ishlatiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
car nomli object yarating, unda brand propertysi va showBrand methodi bo'lsin, method this.brandni chiqarsin.
Required Concepts:

• Object methods
• this (Holat 1)
  Hint:
  Method ichida console.log(this.brand) yozing.

---

🟡 Exercise 2 — Medium

Task:
Quyidagi kodni arrow function yordamida tuzating, shunda this.name to'g'ri ishlasin:

script.js
JavaScriptNusxalash
01let user = {
02    name: "Nodira",
03    greetLater: function () {
04        setTimeout(function () {
05            console.log("Salom, " + this.name);
06        }, 1000);
07    }
08};
09 
10user.greetLater(); // "Salom, undefined" — xato

Required Concepts:

• Arrow function
• this (Holat 4)
  Hint:
  setTimeoutga berilgan oddiy functionni arrow functionga almashtiring.

🔴 Exercise 3 — Hard

Task:
introduce(greeting) nomli mustaqil function yozing, u this.name va berilgan greetingni birlashtirib chiqarsin. Keyin uni call, apply va bind orqali uchta xil object (person1, person2, person3) bilan ishlating.
Required Concepts:

• call, apply, bind
  Hint:
  Har bir usulni alohida sinab ko'ring va natijalarni solishtiring.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let obj = {
02    value: 42,
03    getValue: function () {
04        return this.value;
05    }
06};
07 
08let extractedFunction = obj.getValue;
09 
10console.log(obj.getValue());
11console.log(extractedFunction());

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> 42 undefined (yoki xatolik, strict mode'da)

Why?
obj.getValue() — obj orqali chaqirilgani uchun this — objga ishora qiladi, natija 42.
extractedFunction() esa — function objdan "ajratib olingan" va mustaqil chaqirilyapti, shuning uchun this endi objga emas, global object'ga (yoki undefinedga) ishora qiladi. Bu — thisning "qanday chaqirilishiga bog'liqligi"ning yorqin misoli.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01let button = {
02    label: "Bosish",
03    clicks: 0,
04    handleClick: function () {
05        setTimeout(function () {
06            this.clicks++;
07            console.log(this.label + ": " + this.clicks);
08        }, 500);
09    }
10};
11 
12button.handleClick();

Your Task:

• Kod nima natija berishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni ikki xil usulda tuzating (arrow function bilan va bind bilan).

<details> <summary>Solution</summary> Muammo: setTimeoutga berilgan oddiy function o'zining thisini yaratadi (global object'ga ishora qiladi), buttonga emas. Shuning uchun this.clicks — undefined++ bo'lib, NaN chiqadi.

Yechim 1 — Arrow function:

script.js
JavaScriptNusxalash
01handleClick: function () {
02    setTimeout(() => {
03        this.clicks++;
04        console.log(this.label + ": " + this.clicks);
05    }, 500);
06}

Yechim 2 — bind:

script.js
JavaScriptNusxalash
01handleClick: function () {
02    setTimeout(function () {
03        this.clicks++;
04        console.log(this.label + ": " + this.clicks);
05    }.bind(this), 500);
06}

</details>

📌 Chapter Summary

• thisning qiymati function qanday chaqirilishiga bog'liq, qayerda yozilganiga emas.
• 4 ta asosiy holat: method sifatida, oddiy function sifatida, new bilan, arrow function ichida.
• Arrow function thisni tashqi scope'dan meros oladi (lexical this).
• call, apply, bind — thisni qo'lda boshqarish uchun ishlatiladi.

🎯 Key Takeaways

• this — dinamik, chaqirish usuliga qarab o'zgaradi.
• Method ichida oddiy (nested) function chaqirilsa, this "yo'qoladi" — buning yechimi arrow function.
• Arrow function callback'larda thisni saqlab qolish uchun juda foydali.
• bind() — kelajakda ishlatish uchun thisi "qulflangan" function yaratadi.
• Functionni object'dan "ajratib olib" mustaqil chaqirish — thisni yo'qotadi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01obj.method();          // this = obj
02 
03standalone();          // this = window/undefined
04 
05new Constructor();     // this = yangi object
06 
07() => {}               // this = tashqi scope'dan meros
08 
09fn.call(obj, a, b);
10fn.apply(obj, [a, b]);
11let bound = fn.bind(obj);

---