Chapter 21 — Prototypes & Prototypal Inheritance

Bu — JavaScript'ning eng o'ziga xos va ko'pchilik boshqa tillardan (Java, C#) kelgan dasturchilarni chalg'itadigan mavzusi. JavaScript'da klassik OOP tillaridagidek "class" tushunchasi asl holida mavjud emas — uning o'rniga Prototype mexanizmi ishlaydi.

---

21.1 Prototype nima?

Simple Explanation

Har bir JavaScript object'i boshqa bir object'ga — o'zining prototipiga — "bog'langan" bo'ladi. Agar object'da biror property yoki metod topilmasa, JavaScript uni avtomatik ravishda prototipdan qidiradi.

Why Does It Exist?

Agar 1000 ta object yaratilsa va har biri bir xil metodga ega bo'lishi kerak bo'lsa, har bir object'ga alohida-alohida metod nusxasini yozish — xotirani behuda sarflaydi. Prototype orqali metod bitta joyda saqlanadi va barcha object'lar uni "bo'lishadi" (share qiladi).

Real-Life Analogy

🧬 Prototype'ni oilaviy meros deb tasavvur qiling: agar sizda biror narsa (masalan, familiya) bo'lmasa, siz uni ota-onangizdan (prototipdan) "meros olasiz". Agar ota-onada ham bo'lmasa, bobo-buvidan qidiriladi — va hokazo, toki topilmaguncha.

Example

script.js
JavaScriptNusxalash
01let animal = {
02    eats: true
03};
04 
05let rabbit = Object.create(animal);
06rabbit.jumps = true;
07 
08console.log(rabbit.jumps); // true (o'zida bor)
09console.log(rabbit.eats);  // true (prototipdan meros olingan)

Explanation

rabbitning o'zida eats propertysi yo'q, lekin Object.create(animal) orqali uning prototipi animal qilib belgilangan, shuning uchun rabbit.eats so'ralganda, JavaScript uni animaldan topib beradi.

21.2 Prototype Chain (Prototip Zanjiri)

Simple Explanation

Agar property bir necha darajali prototiplar orqali qidirilishi kerak bo'lsa, bu jarayon Prototype Chain deb ataladi — bu, aslida, Chapter 11'da o'rgangan Scope Chain'ga juda o'xshash tushuncha, faqat variable'lar emas, object propertylari uchun.

Example

script.js
JavaScriptNusxalash
01let grandparent = { canWalk: true };
02let parent = Object.create(grandparent);
03parent.canTalk = true;
04let child = Object.create(parent);
05child.canCode = true;
06 
07console.log(child.canCode);  // true (o'zida bor)
08console.log(child.canTalk);  // true (parent'dan)
09console.log(child.canWalk);  // true (grandparent'dan)

Diagram

code.text
TEXTNusxalash
01child      → canCode: true
02   │ (prototype)
03parent     → canTalk: true
04   │ (prototype)
05grandparent → canWalk: true
06   │ (prototype)
07  null (zanjir shu yerda tugaydi)

Explanation

child.canWalk so'ralganda: avval childning o'zida qidiriladi (topilmaydi) → parentda qidiriladi (topilmaydi) → grandparentda qidiriladi (topiladi!). Agar hech qayerda topilmasa, undefined qaytadi.

⚠️ Common Mistake
Prototype chain juda uzun bo'lishi — dasturning sekinlashishiga olib kelishi mumkin, chunki har safar property qidirilganda, JavaScript butun zanjir bo'ylab "yugurishi" kerak bo'ladi.

21.3 ⚠️ Qiyin mavzu: proto vs prototype

Simple Explanation

Bu ikkisi — JavaScript'da eng ko'p chalkashtiriladigan ikki tushuncha, chunki ular bir-biriga o'xshash nomlanadi, lekin butunlay boshqa narsalarni anglatadi.

Jadval — Asosiy farq

Example

script.js
JavaScriptNusxalash
01function Person(name) {
02    this.name = name;
03}
04 
05Person.prototype.greet = function () {
06    console.log("Salom, men " + this.name);
07};
08 
09let user = new Person("Ali");
10 
11user.greet(); // "Salom, men Ali"
12 
13console.log(user.__proto__ === Person.prototype); // true

How It Works — bosqichma-bosqich

1. Person.prototype — bu object, unga greet metodi qo'shildi.
2. new Person("Ali") chaqirilganda, JavaScript yangi user object yaratadi.
3. Yangi object'ning ichki prototipi (__proto__) — Person.prototypega bog'lanadi.
4. user.greet() chaqirilganda, JavaScript avval userning o'zida greetni qidiradi (yo'q) → keyin user.__proto__ (ya'ni Person.prototype)dan qidiradi (topiladi!).

Diagram

code.text
TEXTNusxalash
01Person.prototype ──┐
02    greet: function │
03                     │
04user ────────────────┘ (__proto__ orqali bog'langan)
05    name: "Ali"

🔥 Important
__proto__ni to'g'ridan-to'g'ri ishlatish (obj.__proto__ = ...) hozirgi zamonaviy kodda tavsiya etilmaydi — buning o'rniga Object.getPrototypeOf() va Object.setPrototypeOf() ishlatish afzalroq, yoki (eng yaxshisi) Chapter 22'da o'rganiladigan class sintaksisidan foydalanish.

21.4 Constructor Function'lar

Simple Explanation

new kalit so'zi bilan chaqirish uchun mo'ljallangan, katta harf bilan boshlanadigan function'lar — Constructor Function deb ataladi.

Example

script.js
JavaScriptNusxalash
01function Car(brand, model) {
02    this.brand = brand;
03    this.model = model;
04}
05 
06Car.prototype.getInfo = function () {
07    return `${this.brand} ${this.model}`;
08};
09 
10let car1 = new Car("Toyota", "Camry");
11let car2 = new Car("Honda", "Civic");
12 
13console.log(car1.getInfo()); // "Toyota Camry"
14console.log(car2.getInfo()); // "Honda Civic"

new kalit so'zi ichida nima sodir bo'ladi? (Technical Explanation)

new Car("Toyota", "Camry") chaqirilganda, JavaScript quyidagi 4 qadamni bajaradi:

1. Yangi bo'sh object yaratiladi: {}
2. Yangi object'ning __proto__si Car.prototypega bog'lanadi.
3. Car function ichidagi kod ishga tushadi, this — yangi yaratilgan object'ga ishora qiladi.
4. Agar function o'zi biror object qaytarmasa, avtomatik ravishda yangi yaratilgan object (this) qaytariladi.

💡 Key Idea
Barcha Car orqali yaratilgan object'lar (car1, car2) — getInfo metodini bitta xuddi shu Car.prototypedan meros oladi, ya'ni metod xotirada faqat bir marta saqlanadi, har bir object uchun alohida nusxa yaratilmaydi.

21.5 hasOwnProperty() — o'z propertysi yoki meros olinganmi?

Simple Explanation

hasOwnProperty() — property object'ning o'zida mavjudmi yoki prototipdan meros olinganmi, shuni tekshiradi.

Example

script.js
JavaScriptNusxalash
01let car = new Car("BMW", "X5");
02 
03console.log(car.hasOwnProperty("brand"));   // true (o'zida bor)
04console.log(car.hasOwnProperty("getInfo")); // false (prototipdan meros)

🔗 Connection
Bu metod — Chapter 8'dagi for...in loop bilan ishlaganda, faqat object'ning o'z propertylarini (prototipdan meros olinganlarni emas) ajratib olishda foydali.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Object.create() yordamida vehicle ({ hasWheels: true }) va undan meros oluvchi bicycle object yarating. bicycle.hasWheelsning true ekanini tekshiring.
Required Concepts:

• Object.create()
  Hint:
  let bicycle = Object.create(vehicle);

---

🟡 Exercise 2 — Medium

Task:
Book(title, author) nomli constructor function yozing, Book.prototypega getSummary() metodini qo'shing — u "title — author" formatida matn qaytarsin. Ikkita kitob object yarating va metodni sinab ko'ring.
Required Concepts:

• Constructor function
• prototype
  Hint:
  Chapter 21.4'dagi Car misolidan namuna oling.

---

🔴 Exercise 3 — Hard

Task:
3 darajali prototype chain yarating: LivingThing (canDie: true) → Animal (canMove: true, Object.create(LivingThing) orqali) → Dog (canBark: true, Object.create(Animal) orqali). Yangi myDog object yaratib, uning barcha 3 xususiyatga ega ekanini tekshiring.
Required Concepts:

• Prototype chain
• Object.create()
  Hint:
  Har bir keyingi obyektni oldingisidan Object.create() orqali yarating.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function Animal(name) {
02    this.name = name;
03}
04 
05Animal.prototype.speak = function () {
06    console.log(this.name + " ovoz chiqarmoqda");
07};
08 
09let dog = new Animal("Ola");
10let cat = new Animal("Mushuk");
11 
12Animal.prototype.speak = function () {
13    console.log(this.name + " YANGI ovoz chiqarmoqda");
14};
15 
16dog.speak();

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

<details> <summary>Answer</summary> "Ola YANGI ovoz chiqarmoqda"

Why?
dog va cat — speak metodining nusxasini emas, balki Animal.prototypega havolani meros oladi. Shuning uchun Animal.prototype.speak keyinchalik o'zgartirilsa, bu o'zgarish barcha mavjud (va yangi) Animal object'lariga ham darhol ta'sir qiladi — chunki ular hammasi bitta xuddi shu prototipga bog'langan.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function Person(name) {
02    this.name = name;
03}
04 
05Person.prototype.greet = function () {
06    console.log("Salom, " + this.name);
07};
08 
09let user = Person("Ali"); // "new" kalit so'zisiz chaqirilgan
10 
11user.greet();

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: Person("Ali") — new kalit so'zisiz chaqirilgan. Bunday holatda, this — yangi object'ga emas, balki global object'ga (yoki strict mode'da undefinedga) ishora qiladi, va Person funksiyasi hech narsa qaytarmaydi (return yo'q), shuning uchun user — undefined bo'lib qoladi. undefined.greet() chaqirilganda xatolik yuz beradi.

Yechim:

script.js
JavaScriptNusxalash
01let user = new Person("Ali"); // "new" bilan to'g'ri chaqirilgan
02 
03user.greet(); // "Salom, Ali"

🔥 Important: Constructor function'ni newsiz chaqirish — ko'p uchraydigan va aniqlashi qiyin xatolardan biri, chunki JavaScript bu haqda ba'zida hech qanday ogohlantirish bermaydi.

</details>

📌 Chapter Summary

• Har bir object o'zining prototipiga ega, va prototipdan property/metod meros oladi.
• Prototype Chain — property topilmasa, tashqi prototiplardan izlash jarayoni.
• prototype — faqat function'larda, new bilan yaratiladigan object'larning shablon-prototipi.
• __proto__ — har qanday object'ning haqiqiy ichki prototipiga havola.
• Constructor function + prototype — metodlarni barcha object'lar orasida "bo'lishish" imkonini beradi.

🎯 Key Takeaways

• Prototype orqali metodlar xotirada faqat bir marta saqlanadi — bu xotirani tejaydi.
• Constructor function'ni newsiz chaqirish — jiddiy xatolarga olib keladi.
• Object.create() — to'g'ridan-to'g'ri prototip zanjiri yaratishning oddiy usuli.
• hasOwnProperty() — object'ning o'z propertysi yoki meros olinganini ajratadi.
• Chapter 22'da o'rganiladigan class sintaksisi — aslida shu prototype mexanizmining "chiroyli qadoqlangan" (syntactic sugar) shakli, xolos.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01function Person(name) {
02    this.name = name;
03}
04 
05Person.prototype.greet = function () {
06    console.log("Salom, " + this.name);
07};
08 
09let user = new Person("Ali");
10 
11user.hasOwnProperty("name");   // true
12user.hasOwnProperty("greet");  // false
13 
14Object.create(parentObj);      // yangi object, prototipi parentObj

---