Mundarija (32)
- Bu darsda
- 1. Nega bu kerak?
- 2. Global obyekt nima?
- 2.1 Tayyor asboblar qutisi
- 2.2 Ichida qancha narsa bor?
- 2.3 Har muhitda — boshqa nom
- 3. Global muhitning ikki qavati
- 3.1 Qaysi e'lon window ga yoziladi?
- 3.2 Obyekt qismi va "Script" qismi
- 4. Nomlar to'qnashuvi
- 4.1 Brauzerning o'z nomlari bilan
- 4.2 Boshqa skriptlar bilan
- 4.3 id — yashirin global o'zgaruvchi
- 5. Kim global'ni ifloslantiradi?
- 5.1 Faqat oddiy skript
- 5.2 E'lonsiz tayinlash
- 6. globalThis qachon kerak?
- 6.1 O'qish — ha
- 6.2 Yozish — deyarli hech qachon
- 7. Ko'p uchraydigan xatolar
- 7.1 Node'da window
- 7.2 Brauzer nomini var bilan e'lon qilish
- 7.3 Ikki skriptda bir xil nom
- 7.4 id ga to'g'ridan-to'g'ri murojaat
- 8. Mashqlar
- 1-mashq (oson): Qaysi biri window da?
- 2-mashq (o'rta): Qayerda ishlayapman?
- 3-mashq (qiyin): To'qnashuvni yo'qoting
- 4-mashq: Vazifalar qadami — global auditi
- 9. Real ishda
- Xulosa
- Manbalar
JavaScript global obyekt va globalThis: window, global va nomlar to'qnashuvi
Qisqacha: Global obyekt — scope zanjirining eng oxiridagi umumiy obyekt: unda
console,setTimeout,Mathkabi tayyor narsalar turadi va u har joydan ko'rinadi. Brauzerda uwindow, Node'da —global, va hamma muhitda bitta universal nomi bor —globalThis. Oddiy<script>dagivarvafunctione'lonlari unga yoziladi,let/constesa 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.
globalThisnega paydo bo'lganini va qachon ishlatilishini tushuntira olasiz.- Global muhitning ikki qavatini —
windowga yoziladigan va yozilmaydigan e'lonlarni — farqlaysiz. - Brauzer nomlari va boshqa skriptlar bilan to'qnashuvlarni tanib, ularning oldini olasiz.
vazifalarglobal 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>:
<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:
Statistika yuborildiMenyu 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:
console.log(globalThis.console === console); // true
console.log(globalThis.Math === Math); // true
console.log(typeof globalThis.setTimeout); // functionBu 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:
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); // 135Qiziq 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:
console.log(typeof window); // undefined
console.log(typeof global); // object
console.log(global === globalThis); // trueBrauzerda esa:
<p>Global obyektning brauzerdagi nomlari</p>
<script>
console.log(window === globalThis);
console.log(self === window, frames === window);
console.log(typeof global);
</script>Konsolda:
true
true true
undefinedBrauzerda 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:
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:
<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:
var function
undefined undefined
let 35000Ikkinchi 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, tashqivar, tashqifunctione'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,constvaclass. Ular hamma skriptlarga ko'rinadi, lekinwindowning xususiyati bo'lmaydi. Chrome DevTools buniScriptdeb 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>daconst til = "uz";vafunction tilniAyt() {}yozildi."til" in windowva"tilniAyt" in windownima 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:
<p>var status</p>
<script>
var status = 404;
console.log(typeof status, status + 1);
</script>Konsolda:
string 4041Xato 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:
<p>let top</p>
<script>
let top = "yuqori";
console.log(top);
</script>
<script>
console.log("2-skript ishladi");
</script>Konsolda:
Uncaught SyntaxError: Identifier 'top' has already been declared
2-skript ishladiTarjimasi: "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:
<script>
let narx = 35000;
</script>
<script>
// Boshqa dasturchining skripti
let narx = 28000;
console.log("Ikkinchi skript:", narx);
</script>
<script>
console.log(narx);
</script>Konsolda:
Uncaught SyntaxError: Identifier 'narx' has already been declared
35000Ikkinchi 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:
<ul id="menyu"><li>Osh</li></ul>
<script>
console.log(menyu === document.getElementById("menyu"));
console.log(menyu.children.length);
</script>Konsolda:
true
1menyu 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
rendermisolida xato chiqmadi,narxmisolida 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:
<p>Modul skript</p>
<script type="module">
var eskiUsul = "var";
function salomBer() {}
console.log(window.eskiUsul, typeof window.salomBer);
</script>Konsolda:
undefined undefinedModullarni 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:
function chekniHisobla() {
jami = 35000 + 5000;
return jami;
}
chekniHisobla();
console.log(globalThis.jami); // 40000jami 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:
if ("structuredClone" in globalThis) {
console.log("Nusxa olsa bo'ladi"); // Nusxa olsa bo'ladi
}
console.log("document" in globalThis); // falseNode'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'ningga— 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
console.log(window.innerWidth);ReferenceError: window is not definedBrauzer 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.
var shahar = "Toshkent";
let viloyat = "Samarqand";
const tuman = "Chilonzor";
function manzilniAyt() {}
const narxniAyt = () => {};Yechim
<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:
Toshkent undefined undefined
function undefinedvar 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
function muhitniAniqla() {
if ("document" in globalThis) {
return "brauzer";
}
if ("process" in globalThis) {
return "node";
}
return "noma'lum";
}
console.log(muhitniAniqla()); // nodeNode'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.
// 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
<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:
Menyu 1-marta chizildi
Menyu 2-marta chizildi
Statistika: 1 ta tashrifHar 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:
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:
- Ro'yxatda nima bor — qaysi turdagi e'lonlar?
holat,royxat,yangiIdro'yxatda bormi? Ular qayerda?- 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:
32 ['idYasovchiYarat', 'xatoniTop', 'mosmi', 'korinadiganlar',
'statistika', 'vazifaniTop', 'tugmaYasa', 'oddiyQator', …,
'render', 'vazifaQosh', …, 'tahrirniSaqla', 'tahrirniBekorQil']- Faqat
functione'lonlari.vazifalar.jsdagi har birfunction ...() {}—windowning xususiyati. Ular orasidarender,mosmi,elonQilkabi umumiy nomlar ham bor — «Nega bu kerak?» bo'limidagi to'qnashuv uchun tayyor nomzodlar. - Yo'q.
holat,royxat,yangiId,boshMatnlar—const. Ular e'lonlar qismida: Console'daholatdeb yozsangiz ko'rinadi,"holat" in windowesafalse. DevTools'da istalgan funksiyaniconsole.dirqilsangiz,[[Scopes]]dagiScriptichida ularni ko'rasiz. Ular ham global — boshqa skriptconst holatdesa, xuddi «Boshqa skriptlar bilan» bo'limidagidek, uning skripti ishlamay qoladi. - Modulga o'tkazish.
<script type="module">da bu nomlar ham,constlar ham global'dan yo'qoladi.vazifalarni 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 globalThistekshiruvi. 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-globalsvano-undefqoidalari global'ga tasodifiy yozish va e'lonsiz nomlarni ushlaydi. Ularni 12-qismda sozlaymiz. - Intervyu. "
window,globalvaglobalThisfarqi?", "varvaletglobal 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,setTimeoutshu yerda. - Brauzerda —
window(self,frames), Node'da —global, Worker'da —self. Universal nom —globalThis(ES2020). - Oddiy
<script>da tashqivarvafunction—windowga yoziladi;let,const,class— global, lekinwindowda emas (DevTools'daScript). - Oddiy skriptlar bitta global'ni bo'lishadi:
functionjimgina almashtiriladi, takroriyletbutun 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)
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!