IlmHamroh
JavaScript Full-stack/10-qism. JavaScript chuqur26/65-dars18 daqiqa
Mundarija (32)

JavaScript global obyekt va globalThis: window, global va nomlar to'qnashuvi

Qisqacha: Global obyekt — scope zanjirining eng oxiridagi umumiy obyekt: unda console, setTimeout, Math kabi tayyor narsalar turadi va u har joydan ko'rinadi. Brauzerda u window, Node'da — global, va hamma muhitda bitta universal nomi bor — globalThis. Oddiy <script> dagi var va function e'lonlari unga yoziladi, let/const esa yozilmaydi. Global'ga yozish nomlar to'qnashuviga olib keladi — shuning uchun undan o'qing, lekin unga yozmang.

Bu darsda

  • Global obyekt nima ekanini va u brauzerda, Node'da va boshqa muhitlarda qanday atalishini bilasiz.
  • globalThis nega paydo bo'lganini va qachon ishlatilishini tushuntira olasiz.
  • Global muhitning ikki qavatini — window ga yoziladigan va yozilmaydigan e'lonlarni — farqlaysiz.
  • Brauzer nomlari va boshqa skriptlar bilan to'qnashuvlarni tanib, ularning oldini olasiz.
  • vazifalar global muhitga nechta nom qo'shayotganini DevTools'da o'lchaysiz.

Oldin bilishingiz kerak: var va nega undan voz kechildi, Leksik scope va scope zanjiri, Closure amaliyotda, Brauzer muhiti: window va document.

1. Nega bu kerak?

Leksik scope darsida scope zanjirini ko'rdik: JavaScript nomni ichkaridan tashqariga qarab qidiradi. Closure darslarida bu zanjirning ichki qavatlari bilan ishladik. Bugun — eng tashqi qavat: global muhit.

Bu qavat bilan siz allaqachon tanishsiz. var darsida var name = 2026 ning name + 1 dan "20261" berganini ko'rdingiz. Brauzer muhiti darsida window === globalThis ekanini tekshirdingiz. Lekin bitta savol ochiq qolgan: o'zingiz yozgan kod global muhitga qancha narsa "to'kadi" va bu qachon muammo bo'ladi?

Bir misol. «Bahor» saytiga marketolog Nodira mehmonlar sonini sanaydigan tayyor skript qo'shdi. Saytingizda render degan funksiya bor, uning skriptida ham — render. Ikkalasi oddiy <script>:

html
<script>
  function render() {
    console.log("Menyu chizildi");
  }
</script>
<script>
  // Nodira qo'shgan statistika skripti
  function render() {
    console.log("Statistika yuborildi");
  }
</script>
<script>
  render();
</script>

Konsolda:

text
Statistika yuborildi

Menyu chizilmadi! Ikkinchi render birinchisini jimgina almashtirdi — na xato, na ogohlantirish. Ikki skript bitta global muhitni bo'lishadi va oxirgi yozilgani yutadi.

Hayotdan o'xshatish: yotoqxonadagi umumiy oshxona muzlatkichi. Har kim unga o'z ovqatini qo'yadi. Ikki talaba idishiga "Osh" deb yozib qo'ysa — kimdir boshqaning oshini yeb qo'yadi. Muzlatkich qancha to'la bo'lsa, to'qnashuv ehtimoli shuncha katta. Global muhit — o'sha umumiy muzlatkich. Bugun uning ichini ko'ramiz va o'z "idishlarimizni" u yerga qo'ymaslikni o'rganamiz.

2. Global obyekt nima?

2.1 Tayyor asboblar qutisi

Kodingizda console, setTimeout, Math, JSON ni e'lon qilmasdan ishlatasiz. Ular qayerdan keladi? Scope zanjirining eng oxiridan — global obyektdan.

Global obyekt (global object) — dastur ishga tushganda JavaScript muhiti yaratadigan bitta maxsus obyekt. Unda tilning va muhitning tayyor narsalari turadi. Scope zanjiri bo'ylab qidiruv hech qayerda topmagan nomni oxirida shu obyektdan qidiradi. Shuning uchun console.log aslida globalThis.console.log:

js
console.log(globalThis.console === console); // true
console.log(globalThis.Math === Math); // true
console.log(typeof globalThis.setTimeout); // function

Bu kod brauzerda ham, Node'da ham bir xil ishlaydi. Farq — global obyekt ichidagi qo'shimcha narsalarda: brauzerda document, alert, localStorage bor, Node'da esa process va boshqa server asboblari.

2.2 Ichida qancha narsa bor?

Global obyekt — oddiy obyekt, uning kalitlarini sanab ko'rsa bo'ladi. Node'da:

js
console.log(Object.keys(globalThis).length); // 15
console.log(Object.keys(globalThis).includes("Math")); // false
console.log("Math" in globalThis); // true
console.log(Object.getOwnPropertyNames(globalThis).length); // 135

Qiziq natija: Object.keys atigi 15 ta kalit berdi va ular orasida Math yo'q. Lekin "Math" in globalThis — true. Sababi Xususiyat deskriptorlari darsida: tilning o'rnatilgan narsalari (Math, JSON, Array, console) sanalmaydigan (enumerable: false) qilib qo'yilgan. Object.keys faqat sanaladiganlarini ko'rsatadi, Object.getOwnPropertyNames esa hammasini — Node 24 da 135 ta. Brauzerda bu son bir necha yuzta bo'ladi: window da DOM bilan ishlaydigan hamma asboblar ham bor.

Bu raqamlarni yodlash shart emas. Asosiysi: global obyekt allaqachon yuzlab nom bilan to'la. Unga qo'shgan har bir nomingiz o'sha olomonga qo'shiladi.

2.3 Har muhitda — boshqa nom

Tarixda global obyekt har muhitda boshqacha atalgan:

Muhit Nomi Izoh
Brauzer sahifasi window Yana self va frames — bir xil obyekt
Web Worker self window yo'q
Node.js global window yo'q
Hamma joyda globalThis 2020-yildan

Web Worker — sahifadan alohida, fonda ishlaydigan JavaScript; uni Web Workers darsida o'rganamiz, hozir bilish shart emas. Asosiysi: "brauzerda ishlayotgan JavaScript" ham har doim window ni ko'rmaydi.

Node'da tekshiramiz:

js
console.log(typeof window); // undefined
console.log(typeof global); // object
console.log(global === globalThis); // true

Brauzerda esa:

html
<p>Global obyektning brauzerdagi nomlari</p>
<script>
  console.log(window === globalThis);
  console.log(self === window, frames === window);
  console.log(typeof global);
</script>

Konsolda:

text
true
true true
undefined

Brauzerda global yo'q, Node'da window yo'q. Bitta kodni ikkala joyda ishlatmoqchi bo'lgan kutubxona mualliflari uchun bu og'riq edi. 2020-yilgacha ular bunday "sehrli" qatorlar yozishardi:

js
const umumiy =
  typeof window !== "undefined" ? window
  : typeof self !== "undefined" ? self
  : global;

globalThis shu muammoni yopdi: ES2020 standartida qo'shilgan, har qanday muhitda global obyektni beradigan yagona nom. Inglizcha "global this" — "global darajadagi this". Barcha zamonaviy brauzerlarda 2020-yil yanvardan beri bor, 2022-yil iyulidan esa "Baseline: keng qo'llaniladi" holatida — ya'ni xavfsiz ishlatsa bo'ladi. Node'da 12-versiyadan beri.

Qoida: global obyektga murojaat kerak bo'lsa — globalThis yozing. window faqat aniq brauzer oynasiga tegishli narsada (window.innerWidth, window.addEventListener("resize", ...)) — u yerda "bu oyna haqida" degan ma'no aniqroq.

Tekshirib ko'ring: Node'da console.log(window.innerWidth) yozsangiz nima bo'ladi?

Javob

ReferenceError: window is not defined — "window aniqlanmagan". Scope zanjirining hech bir qavatida, global obyektda ham window degan nom yo'q. Node — server muhiti, unda oyna ham, sahifa ham yo'q. Brauzer va Node'da ishlashi kerak bo'lgan kodda window ga to'g'ridan-to'g'ri murojaat qilmang.

3. Global muhitning ikki qavati

3.1 Qaysi e'lon window ga yoziladi?

var darsida ko'rdik: oddiy <script> dagi tashqi var window ga yoziladi, let esa yo'q. Endi to'liq rasm — to'rt xil e'lon:

html
<p>Qaysi e'lon window'ga yozildi?</p>
<script>
  var eskiUsul = "var";
  function salomBer() {}
  let yangiUsul = "let";
  const narx = 35000;

  console.log(window.eskiUsul, typeof window.salomBer);
  console.log(window.yangiUsul, window.narx);
</script>
<script>
  console.log(yangiUsul, narx);
</script>

Konsolda:

text
var function
undefined undefined
let 35000

Ikkinchi qatorga qarang: let va const window da yo'q. Lekin uchinchi qator — boshqa <script> tegidan — ularni bemalol ko'rdi. Demak ular ham global, faqat global obyektning ichida emas.

3.2 Obyekt qismi va "Script" qismi

Spetsifikatsiya bo'yicha global muhit ikki qavatdan iborat:

  • Obyekt qismi — global obyektning o'zi (window). Bu yerga tayyor asboblar, tashqi var, tashqi function e'lonlari va e'lonsiz tayinlangan nomlar tushadi. Oxirgisi — faqat oddiy rejimda; uni to'xtatadigan qat'iy rejimni keyingi darsda ko'ramiz.
  • E'lonlar qismi — let, const va class. Ular hamma skriptlarga ko'rinadi, lekin window ning xususiyati bo'lmaydi. Chrome DevTools buni Script deb ko'rsatadi — Closure darsida [[Scopes]] ichida ko'rgan o'sha qavat.
flowchart TB
  K["Kod nomni qidiradi"] --> D
  subgraph G["Global muhit"]
    D["E'lonlar qismi (Script)<br/>let, const, class"]
    O["Obyekt qismi: window<br/>console, document,<br/>var, function"]
  end
  D -- "topilmasa" --> O
  O -- "topilmasa" --> X["ReferenceError"]

Diagrammadagi tartibga e'tibor bering: qidiruv avval e'lonlar qismiga, keyin window ga boradi. Shuning uchun let name = 2026 brauzerning window.name ini to'sib qo'yadi — name + 1 to'g'ri 2027 beradi. var name esa window.name ning o'ziga yozadi, u esa har qanday qiymatni satrga aylantiradi.

Tekshirib ko'ring: Oddiy <script> da const til = "uz"; va function tilniAyt() {} yozildi. "til" in window va "tilniAyt" in window nima beradi?

Javob

false va true. const — e'lonlar qismida (DevTools'dagi Script), window ga tushmaydi. function e'loni esa — xuddi var kabi — window ning xususiyatiga aylanadi. Ikkalasi ham boshqa skriptlarga ko'rinadi.

4. Nomlar to'qnashuvi

4.1 Brauzerning o'z nomlari bilan

window da yuzlab tayyor nom bor: name, status, top, location, history, screen, event… Ular bilan uch xil to'qnashuv bo'ladi.

Jimgina o'zgarish. window.status — name kabi, hamma narsani satrga aylantiradi:

html
<p>var status</p>
<script>
  var status = 404;
  console.log(typeof status, status + 1);
</script>

Konsolda:

text
string 4041

Xato kodi 404 satrga aylandi va qo'shish yopishtirishga aylandi. var — brauzerning xususiyatiga yozdi.

Qulflangan nomlar. Ba'zi nomlarni brauzer "qulflab" qo'ygan — ularni hatto let bilan ham e'lon qilib bo'lmaydi:

html
<p>let top</p>
<script>
  let top = "yuqori";
  console.log(top);
</script>
<script>
  console.log("2-skript ishladi");
</script>

Konsolda:

text
Uncaught SyntaxError: Identifier 'top' has already been declared
2-skript ishladi

Tarjimasi: "top nomi allaqachon e'lon qilingan". Siz uni e'lon qilmagansiz — brauzer qilgan: window.top (eng yuqori oyna) o'chirib ham, almashtirib ham bo'lmaydigan xususiyat. location, document, window ham shunday. SyntaxError bo'lgani uchun birinchi skript butunlay ishlamadi — hatto console.log gacha ham yetmadi. Ikkinchi skript esa alohida, u ishladi.

Xavfli o'zgarish. var location = "Toshkent" yozsangiz, brauzer buni manzil satriga yozish deb tushunadi va sahifani boshqa manzilga yuboradi. Bu misolni sinab ko'rmang — sahifa yo'qoladi.

4.2 Boshqa skriptlar bilan

«Nega bu kerak?» bo'limidagi render — birinchi xil to'qnashuv: function va var jimgina almashtiriladi. let va const bilan esa boshqacha:

html
<script>
  let narx = 35000;
</script>
<script>
  // Boshqa dasturchining skripti
  let narx = 28000;
  console.log("Ikkinchi skript:", narx);
</script>
<script>
  console.log(narx);
</script>

Konsolda:

text
Uncaught SyntaxError: Identifier 'narx' has already been declared
35000

Ikkinchi skript umuman ishlamadi — birinchi qatoridan oldin to'xtadi. Sababi: skriptlar e'lonlar qismini ham bo'lishadi, bitta nom esa ikki marta e'lon qilinmaydi. Real saytda bu "qandaydir tugma ishlamay qoldi" degani — va xato boshqa birovning faylida ko'rinadi.

Ikkala holatning ham ildizi bitta: oddiy <script> lar o'zaro ajratilmagan.

4.3 id — yashirin global o'zgaruvchi

Yana bir kutilmagan narsa: id li har bir element global nom sifatida ham ko'rinadi:

html
<ul id="menyu"><li>Osh</li></ul>
<script>
  console.log(menyu === document.getElementById("menyu"));
  console.log(menyu.children.length);
</script>

Konsolda:

text
true
1

menyu ni hech kim e'lon qilmadi, lekin u element. Bu — eski brauzerlardan qolgan xulq ("named access", nom orqali murojaat). Unga tayanmang: chiziqchali id (yangi-forma) bu yo'l bilan olinmaydi, shu nomli o'zgaruvchi yoki window xususiyati uni to'sib qo'yadi, va kodni o'qigan odam menyu qayerdan kelganini topolmaydi. Elementni doim aniq oling — getElementById yoki querySelector bilan (Elementlarni tanlash).

Tekshirib ko'ring: Nega «Nega bu kerak?» bo'limidagi render misolida xato chiqmadi, narx misolida esa chiqdi?

Javob

function render — global obyektga yoziladigan e'lon. Obyekt xususiyatini qayta yozish — oddiy tayinlash kabi, ruxsat etilgan. let narx esa e'lonlar qismida, va bitta muhitda bitta nomni ikki marta let bilan e'lon qilish taqiqlangan. Natija: birinchi holatda jim, xavfli almashtirish; ikkinchisida baland, lekin butun skriptni o'ldiradigan xato.

5. Kim global'ni ifloslantiradi?

5.1 Faqat oddiy skript

Yaxshi xabar: bu muammolarning hammasi faqat brauzerdagi oddiy <script> ga tegishli.

Modul skript (<script type="module">) da har fayl o'z muhitiga ega: undagi tashqi var, function, let — hech biri global'ga tushmaydi va boshqa skriptlarga ko'rinmaydi:

html
<p>Modul skript</p>
<script type="module">
  var eskiUsul = "var";
  function salomBer() {}
  console.log(window.eskiUsul, typeof window.salomBer);
</script>

Konsolda:

text
undefined undefined

Modullarni Nega modullar va Modul semantikasi darslarida to'liq o'rganamiz — hozir bitta xulosa yetarli: modul — global muzlatkich emas, har kimning o'z sovutgichi.

Node'da ham shunday: oddiy node fayl.js har faylni o'z muhitida ishlatadi, shuning uchun tashqi var global ga yozilmaydi (var darsidagi maslahat). Istisno — Node'ning interaktiv rejimi (terminalda node deb yozib kiradigan joy) va node -e "...": ular oddiy skript kabi ishlaydi.

5.2 E'lonsiz tayinlash

Global'ni ifloslantirishning eng yashirin yo'li — kalit so'zni unutish. Funksiya ichida bo'lsa ham:

js
function chekniHisobla() {
  jami = 35000 + 5000;
  return jami;
}

chekniHisobla();
console.log(globalThis.jami); // 40000

jami e'lon qilinmagan. Oddiy (qat'iy bo'lmagan) rejimda JavaScript uni jimgina global obyektga yozadi — funksiya tugagach ham u yerda qoladi. Bir harfi xato yozilgan nom (jamii) ham shunday yangi global yaratadi. Buni to'xtatadigan vosita — keyingi darsdagi qat'iy rejim.

6. globalThis qachon kerak?

6.1 O'qish — ha

Imkoniyatni tekshirish. Kod eski brauzerda yoki boshqa muhitda ham ishlashi kerak bo'lsa, avval kerakli asbob bormi — tekshiriladi. globalThis bu savolni har muhitda bir xil so'rash imkonini beradi:

js
if ("structuredClone" in globalThis) {
  console.log("Nusxa olsa bo'ladi"); // Nusxa olsa bo'ladi
}

console.log("document" in globalThis); // false

Node'da structuredClone bor (Sayoz va chuqur nusxalash), document esa yo'q. Brauzerda ikkalasi ham true. in — "shu kalit obyektda bormi?" (Obyekt bo'ylab yurish). E'tibor bering: typeof document ham ishlaydi, lekin if (document) — Node'da ReferenceError bilan to'xtaydi; globalThis orqali so'rash esa doim xavfsiz.

Muhitni aniqlash. Brauzer va server uchun umumiy kodda — masalan, ba'zi narsalarni faqat brauzerda bajarish uchun — xuddi shu usul ishlatiladi. Buni mashqlarda yozasiz.

6.2 Yozish — deyarli hech qachon

Global obyektga yozishning qonuniy holatlari kam:

  • Vaqtinchalik debug. DevTools'dan holatga qarash uchun bir daqiqaga globalThis.vazifalarHolati = holat; — keyin o'chiriladi (Debugging metodologiyasi).
  • Polyfill — eski brauzerga yetishmayotgan standart imkoniyatni qo'shadigan kod. U ataylab global'ga yozadi (globalThis.structuredClone = ...). Odatda polyfill'larni kutubxonalar yozadi; uning qoidalarini va o'zingiz yozib ko'rishni O'rnatilgan prototiplar darsida ko'ramiz.
  • Bitta nomlar maydoni. Kutubxona global'ga faqat bitta nom qo'yadi va hamma narsasini uning ichida saqlaydi. jQuery'ning $, eski Google Analytics'ning ga — shunday. Bu Closure amaliyotda darsidagi modul naqshi: bitta obyekt — ochiq qism, qolgani closure ichida.

Qoida: global'dan o'qing, unga yozmang. Yozish kerak tuyulsa — avval modul yoki closure bilan yechib bo'lmasligiga ishonch hosil qiling.

Tekshirib ko'ring: Kutubxona globalThis.Bahor = { menyu, narxlar } deb bitta nom qo'ydi. Bu 20 ta alohida global funksiyadan nega yaxshiroq?

Javob

To'qnashuv ehtimoli 20 tadan bitta nomga tushdi. Boshqa skript menyu yoki render deb funksiya e'lon qilsa ham, Bahor.menyu ga tegmaydi. Faqat Bahor nomini tanlashda ehtiyot bo'lish kerak — shuning uchun kutubxonalar o'ziga xos, kam uchraydigan nom tanlaydi.

7. Ko'p uchraydigan xatolar

7.1 Node'da window

js
console.log(window.innerWidth);
text
ReferenceError: window is not defined

Brauzer uchun yozilgan kodni Node'da ishga tushirsangiz yoki serverda bajariladigan kodga window qo'shsangiz — shu xato. Keyinroq Next.js bilan ishlaganda bu xabarni tez-tez ko'rasiz. Next.js — sayt kodining bir qismini serverda bajaradigan freymvork (23-qismda o'rganamiz, hozir bilish shart emas). Tuzatish: global obyektga murojaat — globalThis; brauzerga xos kod — avval "window" in globalThis tekshiruvi bilan.

7.2 Brauzer nomini var bilan e'lon qilish

var name, var status, var top — «Brauzerning o'z nomlari bilan» bo'limidagi uch xil to'qnashuv. Tuzatish: var ishlatmang. let/const ko'p holatda brauzer nomini to'sib qo'yadi, lekin top, location, document kabi qulflangan nomlarni ular ham ololmaydi — boshqa nom tanlang (yuqori, manzil).

7.3 Ikki skriptda bir xil nom

«Boshqa skriptlar bilan» bo'limidagi holat. Belgisi: sahifadagi bitta funksiya "o'z-o'zidan" boshqacha ishlay boshlaydi yoki butun bir skript ishlamaydi, konsolda esa Identifier '...' has already been declared. Tuzatish: skriptlarni modulga o'tkazing yoki har birini modul naqshi bilan o'rang.

7.4 id ga to'g'ridan-to'g'ri murojaat

royxat.append(...) — royxat e'lon qilinmagan bo'lsa ham ishlaydi, lekin faqat "omad" tufayli. Tuzatish: const royxat = document.getElementById("royxat"); — aniq va ishonchli.

8. Mashqlar

1-mashq (oson): Qaysi biri window da?

Oddiy <script> da quyidagi e'lonlar bor. Har biri uchun window.X nima bo'lishini ayting, keyin "Tahrirlab ko'rish" bilan tekshiring.

js
var shahar = "Toshkent";
let viloyat = "Samarqand";
const tuman = "Chilonzor";
function manzilniAyt() {}
const narxniAyt = () => {};
Yechim
html
<p>1-mashq</p>
<script>
  var shahar = "Toshkent";
  let viloyat = "Samarqand";
  const tuman = "Chilonzor";
  function manzilniAyt() {}
  const narxniAyt = () => {};

  console.log(window.shahar, window.viloyat, window.tuman);
  console.log(typeof window.manzilniAyt, typeof window.narxniAyt);
</script>

Konsolda:

text
Toshkent undefined undefined
function undefined

var va function e'loni — window ga. let, const — yo'q. narxniAyt ham funksiya, lekin u const o'zgaruvchiga saqlangan — e'lon turi const, shuning uchun window da yo'q.

2-mashq (o'rta): Qayerda ishlayapman?

muhitniAniqla() funksiyasini yozing. U brauzerda "brauzer", Node'da "node", boshqa joyda "noma'lum" qaytarsin. Faqat globalThis va in dan foydalaning — window yoki process ga to'g'ridan-to'g'ri murojaat qilmang.

Ishora: brauzerda document bor, Node'da — process.

Yechim
js
function muhitniAniqla() {
  if ("document" in globalThis) {
    return "brauzer";
  }
  if ("process" in globalThis) {
    return "node";
  }
  return "noma'lum";
}

console.log(muhitniAniqla()); // node

Node'da node chiqadi. Natija oynasida (<script> ichida) chaqirsangiz — brauzer. Nega window emas, document tekshirildi? Web Worker'da window ham, document ham yo'q — u "brauzer sahifasi" emas. Bizga sahifa kerak bo'lsa, document — aniqroq belgi. Funksiya hech qayerda ReferenceError bermaydi: in faqat so'raydi.

3-mashq (qiyin): To'qnashuvni yo'qoting

Ikki skript bitta sahifada. Ikkalasida ham hisob va render bor, shuning uchun sahifa noto'g'ri ishlayapti. Har birini modul naqshi bilan shunday o'rangki, global'ga bitta-bittadan nom qo'shilsin: Menyu va Statistika. Har biri render() metodini ochsin.

js
// 1-skript
let hisob = 0;
function render() {
  hisob++;
  console.log(`Menyu ${hisob}-marta chizildi`);
}

// 2-skript
let hisob = 0;
function render() {
  hisob++;
  console.log(`Statistika: ${hisob} ta tashrif`);
}
Yechim
html
<script>
  const Menyu = (() => {
    let hisob = 0;
    function render() {
      hisob++;
      console.log(`Menyu ${hisob}-marta chizildi`);
    }
    return { render };
  })();
</script>
<script>
  const Statistika = (() => {
    let hisob = 0;
    function render() {
      hisob++;
      console.log(`Statistika: ${hisob} ta tashrif`);
    }
    return { render };
  })();
</script>
<script>
  Menyu.render();
  Menyu.render();
  Statistika.render();
</script>

Konsolda:

text
Menyu 1-marta chizildi
Menyu 2-marta chizildi
Statistika: 1 ta tashrif

Har skript global'ga bitta nom qo'shdi. hisob va render — IIFE ichida, closure'da: ikki hisob bir-birini ko'rmaydi, ikki render bir-birini bosib ketmaydi. Bu — modullardan oldingi davrning standart yechimi. Modullar bilan esa o'rash ham kerak bo'lmaydi.

4-mashq: Vazifalar qadami — global auditi

vazifalar.js oddiy <script defer> bilan ulangan. U global muhitga nechta nom qo'shyapti? Bu qadamda kodni o'zgartirmaymiz — o'lchaymiz va xulosa qilamiz.

Saytni oching va DevTools Console'da quyidagi parchani bajaring. U toza, bo'sh oyna (iframe) yaratib, uning global nomlarini sizning sahifangiznikidan ayiradi. contentWindow — ramka ichidagi oynaning window i:

js
const ramka = document.createElement("iframe");
document.body.append(ramka);
const toza = Object.getOwnPropertyNames(ramka.contentWindow);
ramka.remove();
const bizniki = Object.getOwnPropertyNames(window)
  .filter((nom) => !toza.includes(nom));
console.log(bizniki.length, bizniki);

Object.getOwnPropertyNames — obyektning barcha o'z xususiyatlari nomlari (Object.* metodlari). Natijaga qarab uch savolga javob bering:

  1. Ro'yxatda nima bor — qaysi turdagi e'lonlar?
  2. holat, royxat, yangiId ro'yxatda bormi? Ular qayerda?
  3. Bu ro'yxatni qanday qilib nolga tushirsa bo'ladi?
Yechim

Natija — 30 dan ortiq nom. Aniq son kodingizdagi funksiyalar soniga bog'liq, brauzer kengaytmalari ham bir-ikkitasini qo'shishi mumkin. Boshi va oxiri taxminan shunday:

text
32 ['idYasovchiYarat', 'xatoniTop', 'mosmi', 'korinadiganlar',
'statistika', 'vazifaniTop', 'tugmaYasa', 'oddiyQator', …,
'render', 'vazifaQosh', …, 'tahrirniSaqla', 'tahrirniBekorQil']
  1. Faqat function e'lonlari. vazifalar.js dagi har bir function ...() {} — window ning xususiyati. Ular orasida render, mosmi, elonQil kabi umumiy nomlar ham bor — «Nega bu kerak?» bo'limidagi to'qnashuv uchun tayyor nomzodlar.
  2. Yo'q. holat, royxat, yangiId, boshMatnlar — const. Ular e'lonlar qismida: Console'da holat deb yozsangiz ko'rinadi, "holat" in window esa false. DevTools'da istalgan funksiyani console.dir qilsangiz, [[Scopes]] dagi Script ichida ularni ko'rasiz. Ular ham global — boshqa skript const holat desa, xuddi «Boshqa skriptlar bilan» bo'limidagidek, uning skripti ishlamay qoladi.
  3. Modulga o'tkazish. <script type="module"> da bu nomlar ham, const lar ham global'dan yo'qoladi. vazifalar ni modullarga bo'lishni 10-qism oxirida — Nega modullar darsidan boshlab — qilamiz. IIFE bilan o'rash ham ishlaydi, lekin modul — zamonaviy va to'g'ri yo'l.

Hozircha bitta ehtiyot chorasi: saytga boshqa skript qo'shsangiz, uning global nomlari shu ro'yxatdagilar bilan to'qnashmasligini tekshiring. Commit kerak emas — kod o'zgarmadi.

9. Real ishda

  • Server va brauzer uchun umumiy kod. Next.js'da bitta komponent avval serverda, keyin brauzerda ishlaydi. window is not defined — Next.js'ga o'tgan har bir dasturchi uchraydigan birinchi xato, yechimi esa — bugungi "window" in globalThis tekshiruvi. Next.js'ni 23-qismda o'rganamiz.
  • Uchinchi tomon skriptlari. Statistika, chat vidjeti, reklama — ular saytga oddiy <script> bilan qo'shiladi va o'z global nomlarini olib keladi. Professional vidjetlar global'ga bitta nom qo'yadi (gtag, fbq) — bugungi nomlar maydoni qoidasi.
  • Kod sifati vositalari. ESLint'ning no-implicit-globals va no-undef qoidalari global'ga tasodifiy yozish va e'lonsiz nomlarni ushlaydi. Ularni 12-qismda sozlaymiz.
  • Intervyu. "window, global va globalThis farqi?", "var va let global darajada qanday farq qiladi?" — tez-tez so'raladi. Javob: global obyektning muhitga qarab nomlari va global muhitning ikki qavati.

Xulosa

  • Global obyekt — scope zanjirining oxiri: console, Math, setTimeout shu yerda.
  • Brauzerda — window (self, frames), Node'da — global, Worker'da — self. Universal nom — globalThis (ES2020).
  • Oddiy <script> da tashqi var va function — window ga yoziladi; let, const, class — global, lekin window da emas (DevTools'da Script).
  • Oddiy skriptlar bitta global'ni bo'lishadi: function jimgina almashtiriladi, takroriy let butun skriptni to'xtatadi, brauzer nomlari bilan to'qnashuv kutilmagan natija beradi.
  • Modul va Node fayli — o'z muhitiga ega, global'ni ifloslantirmaydi.
  • Global'dan o'qing (imkoniyatni tekshirish), unga yozmang. Kerak bo'lsa — bitta nomlar maydoni.

Keyingi dars: Strict mode — e'lonsiz global va boshqa "jim" xatolarni haqiqiy xatoga aylantiradigan qat'iy rejimni yoqamiz va nega modullarda u avtomatik ekanini ko'ramiz.

Manbalar

  • MDN: "globalThis", "Global object", "Window" — developer.mozilla.org
  • ECMAScript 2025 Language Specification: "Global Environment Records" — tc39.es/ecma262
  • HTML Living Standard: "Named access on the Window object" — html.spec.whatwg.org
  • web-features: globalthis — Baseline (2020-01 / keng: 2022-07)
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
JavaScript global obyekt va globalThis: window, global va nomlar to'qnashuvi — IlmHamroh