DarslarWeb dasturlash

Hoisting va prototiplar

JS kodi bajarilishidan oldin nima bo'ladi? Prototip zanjiri qanday ishlaydi?

45 daqiqa

JavaScript — Dars 13

Hoisting va prototiplar

JS ichida nima kechadi — var va let farqi, funksiyalarning «ko'tarilishi», meros zanjiri.

hoistingprototype__proto__TDZ

Dars rejasi

6 ta mavzu

01Hoisting nima?
02var vs let/const
03Funksiya hoisting
04Prototip nima?
05Prototip zanjiri
06Object.create va meros

1. Hoisting nima?

Hoisting — JS kod bajarilishidan oldin deklaratsiyalarni scope boshiga «ko'taradi». Bu sababli funksiya/o'zgaruvchini e'lon qilmasdan oldin ham ishlatish mumkin bo'lishi mumkin.

1// Siz yozgan kod
2console.log(x);   // undefined (xato EMAS!)
3var x = 5;
4console.log(x);   // 5
5
6// JS uni shunday ko'radi
7var x;            // «ko'tarildi» (declaration)
8console.log(x);   // undefined
9x = 5;            // qiymat shu yerda beriladi
10console.log(x);   // 5

2. var vs let/const

1// var — hoisting bor, boshlang'ich undefined
2console.log(a);   // undefined
3var a = 10;
4
5// let/const — hoisting bor, lekin «Temporal Dead Zone» (TDZ)
6console.log(b);   // ReferenceError!
7let b = 20;
8
9// const ham xuddi shunday
10console.log(c);   // ReferenceError!
11const c = 30;

var

Hoisting + undefined. Eski, muammoli.

let

Hoisting + TDZ. Modern tanlov (o'zgaradi).

const

Hoisting + TDZ + o'zgarmas. Default tanlov.

3. Funksiya hoisting

Declaration — to'liq ko'tariladi

1salom();   // "Salom!" — ishlaydi!
2
3function salom() {
4  console.log("Salom!");
5}

Expression — faqat o'zgaruvchi ko'tariladi

1salom();   // TypeError: salom is not a function
2
3var salom = function() {
4  console.log("Salom!");
5};
6
7// let bilan esa — ReferenceError
8salom2();   // ReferenceError
9
10let salom2 = function() {};

4. Prototip nima?

Har bir JS obyektning yashirin «ota-obyekti» bor — bu uning prototipi. Agar obyektda biror xossa topilmasa, JS prototipdan qidiradi.

1const ota = {
2  familiya: "Valiyev",
3  tanishtir() {
4    return "Men " + this.ism + " " + this.familiya;
5  },
6};
7
8const bola = Object.create(ota);
9bola.ism = "Ali";
10
11console.log(bola.ism);          // "Ali"
12console.log(bola.familiya);     // "Valiyev" — ota'dan olindi!
13console.log(bola.tanishtir());  // "Men Ali Valiyev"
14
15// Prototipni ko'rish
16Object.getPrototypeOf(bola) === ota   // true
17bola.__proto__ === ota                // true (eski usul)

5. Prototip zanjiri

Prototipning ham prototipi bo'lishi mumkin. JS xossa topilmagunicha zanjir bo'ylab yuqoriga chiqadi. Oxirida Object.prototype, undan keyin — null.

1const hayvon = {
2  nafas() { return "Nafas olmoqda"; },
3};
4
5const sut = Object.create(hayvon);
6sut.sut = () => "Sut beradi";
7
8const mushuk = Object.create(sut);
9mushuk.ism = "Moshka";
10mushuk.miyov = () => "Miyov!";
11
12console.log(mushuk.ism);      // "Moshka" (o'zidan)
13console.log(mushuk.miyov());  // "Miyov!" (o'zidan)
14console.log(mushuk.sut());    // "Sut beradi" (sut'dan)
15console.log(mushuk.nafas());  // "Nafas olmoqda" (hayvon'dan)
16
17// Zanjir: mushuk → sut → hayvon → Object.prototype → null

6. Object.create va meros

1// Prototip asosida obyekt yaratish
2const hayvonProto = {
3  yur() { return this.ism + " yurmoqda"; },
4  uyquga() { return this.ism + " uxladi"; },
5};
6
7function hayvonYarat(ism) {
8  const yangi = Object.create(hayvonProto);
9  yangi.ism = ism;
10  return yangi;
11}
12
13const sher = hayvonYarat("Simba");
14console.log(sher.yur());      // "Simba yurmoqda"
15console.log(sher.uyquga());   // "Simba uxladi"
16
17// hasOwnProperty — faqat o'zining xossasi?
18sher.hasOwnProperty("ism")    // true
19sher.hasOwnProperty("yur")    // false (prototipdan)

Prototip zanjirini ko'rish

HTML

<button onclick="ishlat()">Zanjirni ko'rish</button>
<pre id="out">...</pre>

const lines = [];
    lines.push("mushuk.ism     = " + mushuk.ism);
    lines.push("mushuk.sut()   = " + mushuk.sut() + "  (sut'dan)");
    lines.push("mushuk.nafas() = " + mushuk.nafas() + "  (hayvon'dan)");
    lines.push("");
    lines.push("Zanjir:");
    let cur = mushuk, d = 0;
    while (cur) {
      const nomi = cur === mushuk ? "mushuk" :
                   cur === sut ? "sut" :
                   cur === hayvon ? "hayvon" :
                   cur === Object.prototype ? "Object.prototype" : "null";
      lines.push("  " + "  ".repeat(d) + "↳ " + nomi);
      cur = Object.getPrototypeOf(cur);
      d++;
    }
    document.getElementById("out").innerText = lines.join("\n");
  }
</script>

Natijajonli

Kichik test

0 / 5

1.console.log(x); var x = 5; — natija?

2.console.log(x); let x = 5; — natija?

3.Obyektda xossa topilmasa, JS qayerdan qidiradi?

4.Object.create(ota) nima qaytaradi?

5.Prototip zanjiri oxirida nima bor?

Mustaqil ish

0 / 5