Chapter 22 — Classes (ES6)

Chapter 21'da Prototype mexanizmini o'rgandik. class — ES6'da qo'shilgan, aynan shu mexanizmni yanada tushunarli va tanish sintaksis bilan yozish imkonini beruvchi vosita.

---

22.1 Class nima?

Simple Explanation

class — object yaratish uchun "shablon" (blueprint). U Chapter 21'dagi Constructor Function + Prototype naqshining zamonaviy, chiroyli yozilish shakli.

Real-Life Analogy

🏗️ Class — bu bino qurish uchun loyiha (chizma). Loyihaning o'zi — bino emas, lekin undan bir nechta bir xil tuzilishdagi bino (object) qurish mumkin.

Example

script.js
JavaScriptNusxalash
01class Person {
02    constructor(name, age) {
03        this.name = name;
04        this.age = age;
05    }
06 
07    greet() {
08        console.log(`Salom, men ${this.name}man`);
09    }
10}
11 
12let user = new Person("Ali", 25);
13user.greet(); // "Salom, men Aliman"

How It Works

• constructor — new bilan object yaratilganda avtomatik chaqiriladigan maxsus metod, unda boshlang'ich propertylar belgilanadi.
• greet() — bu metod, aslida "sahna orqasida" Person.prototype.greet sifatida saqlanadi (Chapter 21'dagidek).

🔗 Connection
class — Chapter 21'da o'rgangan Prototype mexanizmining ustiga qurilgan syntactic sugar (sintaksisni "shirin" qilib ko'rsatish). Ichki mexanizm bir xil, faqat yozilishi qulayroq.

22.2 Class vs Constructor Function — solishtirish

Jadval

Example — class xavfsizroq

script.js
JavaScriptNusxalash
01class Person {
02    constructor(name) {
03        this.name = name;
04    }
05}
06 
07Person("Ali"); // ❌ TypeError: Class constructor Person cannot be invoked without 'new'

💡 Key Idea
Bu — Chapter 21'dagi "Debugging Challenge"da ko'rgan muammoning (constructor function'ni newsiz chaqirish) class bilan avtomatik oldini olinishi. class bu turdagi xatoni "sukut bo'yicha" oldini oladi.

22.3 Class metodlari va propertylar

Instance property'lar (constructor ichida)

script.js
JavaScriptNusxalash
01class Product {
02    constructor(name, price) {
03        this.name = name;
04        this.price = price;
05    }
06}

Class Fields (ES2022 — constructor'siz to'g'ridan-to'g'ri)

script.js
JavaScriptNusxalash
01class Product {
02    category = "General"; // default qiymat bilan property
03 
04    constructor(name, price) {
05        this.name = name;
06        this.price = price;
07    }
08}
09 
10let item = new Product("Laptop", 1200);
11console.log(item.category); // "General"

22.4 Getters va Setters

Simple Explanation

Getter — propertyni "o'qish" (kabi ko'rinadigan, lekin aslida function bo'lgan) usuli. Setter — propertyga "qiymat berish" jarayonini nazorat qilish usuli.

Why Does It Exist?

Ba'zida property qiymati to'g'ridan-to'g'ri saqlanmaydi, balki boshqa propertylardan hisoblanadi, yoki qiymat berilishidan oldin tekshirilishi kerak bo'ladi.

Example

script.js
JavaScriptNusxalash
01class Circle {
02    constructor(radius) {
03        this._radius = radius;
04    }
05 
06    get area() {
07        return Math.PI * this._radius ** 2;
08    }
09 
10    set radius(value) {
11        if (value <= 0) {
12            throw new Error("Radius musbat bo'lishi kerak");
13        }
14        this._radius = value;
15    }
16 
17    get radius() {
18        return this._radius;
19    }
20}
21 
22let circle = new Circle(5);
23 
24console.log(circle.area);   // 78.53... (function emas, property kabi chaqiriladi!)
25circle.radius = 10;         // setter ishga tushadi
26console.log(circle.area);   // 314.15...

Explanation

E'tibor bering: circle.area — qavs () bilan emas, oddiy property kabi o'qilyapti, lekin aslida bu — har safar _radius asosida qayta hisoblanadigan getter.

⚠️ Common Mistake
Property nomi (radius) bilan ichki saqlash uchun ishlatiladigan nom (_radius) bir xil bo'lsa, infinite loop yuzaga keladi (getter o'zini-o'zi cheksiz chaqiraveradi). Shuning uchun ichki saqlash uchun odatda oldiga _ qo'yiladi.

🔗 Connection
Getter/Setter — Chapter 24'da o'rganiladigan Encapsulation tushunchasining asosiy vositalaridan biri.

22.5 Static Metodlar va Propertylar

Simple Explanation

static — class'ning o'zida mavjud bo'ladigan (instance'larda emas) metod yoki property. Bu haqda Chapter 25'da chuqurroq to'xtalamiz, lekin qisqacha ko'rib chiqamiz.

Example

script.js
JavaScriptNusxalash
01class MathHelper {
02    static square(x) {
03        return x * x;
04    }
05}
06 
07console.log(MathHelper.square(5)); // 25
08 
09let helper = new MathHelper();
10helper.square(5); // ❌ Xatolik — instance'da mavjud emas

Explanation

static metodlar — object yaratmasdan, to'g'ridan-to'g'ri class nomi orqali chaqiriladi. Bu ko'pincha "yordamchi" (utility) function'lar uchun ishlatiladi.

22.6 Private Fields (ES2022)

Simple Explanation

# belgisi bilan boshlangan propertylar — private, ya'ni class tashqarisidan mutlaqo kirib bo'lmaydi.

Example

script.js
JavaScriptNusxalash
01class BankAccount {
02    #balance = 0;
03 
04    deposit(amount) {
05        this.#balance += amount;
06    }
07 
08    getBalance() {
09        return this.#balance;
10    }
11}
12 
13let account = new BankAccount();
14account.deposit(100);
15 
16console.log(account.getBalance()); // 100
17console.log(account.#balance);     // ❌ SyntaxError — tashqaridan kirib bo'lmaydi

🔥 Important
Bu — Chapter 12'da Closure orqali erishilgan "private variable" g'oyasining, class sintaksisidagi rasmiy va zamonaviy ifodasi. Farqi shundaki, # bilan private field'lar closure'dan farqli, class strukturasining rasmiy qismi hisoblanadi va IDE/debugger'lar tomonidan yaxshiroq qo'llab-quvvatlanadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Animal nomli class yarating, constructorda name va sound qabul qilsin, makeSound() metodi "{name} {sound} deydi" chiqarsin.
Required Concepts:

• class, constructor, method
  Hint:
  this.name, this.sounddan foydalaning.

---

🟡 Exercise 2 — Medium

Task:
Rectangle class yarating, width va height bilan, get area() va get perimeter() getter'larini qo'shing.
Required Concepts:

• Getters
  Hint:
  get area() { return this.width * this.height; }

---

🔴 Exercise 3 — Hard

Task:
#pin (private field) bilan ATM class yarating. constructorda PIN kod belgilansin. withdraw(amount, enteredPin) metodi — agar enteredPin mos kelmasa xatolik chiqarsin, mos kelsa va balansda yetarli mablag' bo'lsa pul yechilsin.
Required Concepts:

• Private fields
• Error handling (Chapter 18)
  Hint:
  #balance va #pinni ikkalasini ham private qiling.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01class Counter {
02    #count = 0;
03 
04    increment() {
05        this.#count++;
06        return this.#count;
07    }
08}
09 
10let c1 = new Counter();
11let c2 = new Counter();
12 
13console.log(c1.increment());
14console.log(c1.increment());
15console.log(c2.increment());

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

<details> <summary>Answer</summary> 1 2 1

Why?
c1 va c2 — ikkalasi ham Counterning alohida instance'lari, shuning uchun har biri o'zining alohida #count qiymatiga ega. Bu — Chapter 12'da closure orqali ko'rgan createCounter() misolining class ko'rinishidagi analogi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01class Circle {
02    constructor(radius) {
03        this.radius = radius;
04    }
05 
06    get radius() {
07        return this.radius;
08    }
09 
10    set radius(value) {
11        this.radius = value;
12    }
13}
14 
15let c = new Circle(5);

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun bu infinite loop yaratishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: Getter va setter aynan radius nomini ishlatmoqda, xuddi constructor ham this.radius = radius deb yozgan. this.radius = radius chaqirilganda, bu aslida setterni chaqiradi, setter esa yana this.radius = value deb yozgani uchun, bu o'zini-o'zi cheksiz chaqiraveradi — "Maximum call stack size exceeded" xatoligiga olib keladi.

Yechim: Ichki saqlash uchun boshqa nom (masalan, _radius) ishlatish kerak:

script.js
JavaScriptNusxalash
01class Circle {
02    constructor(radius) {
03        this._radius = radius;
04    }
05 
06    get radius() {
07        return this._radius;
08    }
09 
10    set radius(value) {
11        this._radius = value;
12    }
13}
14 
15let c = new Circle(5);
16console.log(c.radius); // 5

</details>

📌 Chapter Summary

• class — Prototype mexanizmining zamonaviy, tushunarli sintaksisi.
• constructor — object yaratilganda avtomatik chaqiriladi.
• Getter/Setter — propertyga "murojaat" ko'rinishida, lekin aslida function orqali ishlaydigan mexanizm.
• static — instance'larsiz, to'g'ridan-to'g'ri class orqali chaqiriladigan metod/property.
• # bilan private field'lar — class tashqarisidan kirib bo'lmaydigan ma'lumot.

🎯 Key Takeaways

• class — ichki jarayoni Prototype bilan bir xil, faqat yozilishi qulayroq va xavfsizroq.
• classni newsiz chaqirish — avtomatik xatolik beradi (Constructor Function'dan farqli).
• Getter/Setter'da ichki saqlash uchun property nomi bilan bir xil nom ishlatish — infinite loop yaratadi.
• Private field'lar (#) — zamonaviy va rasmiy encapsulation usuli.
• static metodlar — instance yaratmasdan foydalaniladigan "yordamchi" function'lar uchun ideal.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01class Person {
02    #secret = "hidden";
03 
04    constructor(name) {
05        this.name = name;
06    }
07 
08    greet() {
09        return `Salom, ${this.name}`;
10    }
11 
12    get info() {
13        return `Ism: ${this.name}`;
14    }
15 
16    static create(name) {
17        return new Person(name);
18    }
19}
20 
21let p = new Person("Ali");
22p.greet();
23p.info;
24Person.create("Vali");

---