DarslarWeb dasturlash
Obyektlar, this, call/bind/apply
Obyekt yaratish, metodlar, this kontseptsiyasi va funksiya kontekstini o'zgartiruvchi 3 ta muhim metod.
55 daqiqa
JavaScript — Dars 12
Obyektlar va this
Har narsa obyekt. this — JS'ning eng ko'p savol tug'diradigan so'zi. Bugun uni chin haqida tushunamiz.
{}thiscallbind
Dars rejasi
6 ta mavzu1. Obyekt yaratish va o'qish
1// Oddiy2const user = {3 ism: "Ali",4 yosh: 17,5 "to'liq ismi": "Ali Valiyev", // bo'shliq bo'lsa — qo'shtirnoq6 faol: true,7};8
9// O'qish — 2 usul10user.ism // "Ali"11user["ism"] // "Ali"12user["to'liq ismi"] // kvadrat qavs bilan13
14// Dinamik kalit15const maydon = "yosh";16user[maydon] // 1717
18// Qo'shish / o'zgartirish19user.shahar = "Toshkent";20user.yosh = 18;21
22// O'chirish23delete user.faol;24
25// Kalitlar, qiymatlar26Object.keys(user) // ["ism", "yosh", ...]27Object.values(user) // ["Ali", 18, ...]28Object.entries(user) // [["ism","Ali"], ...]2. Metodlar
1const user = {2 ism: "Ali",3 yosh: 17,4
5 // Metod — obyekt ichidagi funksiya6 salom: function() {7 return "Salom, men " + this.ism;8 },9
10 // Qisqa sintaksis (ES6)11 tugilganYil() {12 return 2026 - this.yosh;13 },14
15 // Arrow (bu yerda TAVSIYA EMAS — this ishlamaydi)16 xatoMetod: () => {17 return this.ism; // undefined!18 },19};20
21console.log(user.salom()); // "Salom, men Ali"22console.log(user.tugilganYil()); // 20093. this — nima u?
this — funksiya chaqirilgan kontekstni (qaysi obyektga tegishli ekanini) ko'rsatadi. Qoida sodda: nuqtadan chap tarafda kim bo'lsa — this o'sha.
1const user = {2 ism: "Ali",3 salom() {4 console.log(this.ism);5 },6};7
8user.salom(); // "Ali" — nuqtadan chapda user9
10// Ajratib olib chaqirsangiz — this yo'qoladi11const f = user.salom;12f(); // undefined (yoki xato strict mode'da)13
14// Boshqa obyektga biriktirish15const user2 = { ism: "Vali", salom: user.salom };16user2.salom(); // "Vali" — endi nuqtadan chapda user24. call() — funksiyani boshqa obyekt bilan
1function tanishtir(shahar, kasb) {2 console.log(`Men ${this.ism}, ${this.yosh} yoshdaman. ${shahar}dan, ${kasb}.`);3}4
5const ali = { ism: "Ali", yosh: 20 };6const vali = { ism: "Vali", yosh: 25 };7
8// call(kontekst, arg1, arg2, ...)9tanishtir.call(ali, "Toshkent", "dasturchi");10// "Men Ali, 20 yoshdaman. Toshkentdan, dasturchi."11
12tanishtir.call(vali, "Samarqand", "dizayner");13// "Men Vali, 25 yoshdaman. Samarqanddan, dizayner."5. apply() — call kabi, argument massivda
1function tanishtir(shahar, kasb) {2 console.log(`Men ${this.ism}. ${shahar}, ${kasb}.`);3}4
5const ali = { ism: "Ali" };6
7// apply(kontekst, [arg1, arg2])8tanishtir.apply(ali, ["Toshkent", "dasturchi"]);9
10// call bilan bir xil, lekin argument massivda11// call — vergul bilan12// apply — array bilan ("a" for "array")call(obj, a, b, c)
Argumentlar vergul bilan ajratib beriladi.
apply(obj, [a, b, c])
Argumentlar massiv ichida. 'a' for 'array'.
6. bind() — yangi funksiya yaratish
bind call/apply dan farqli — funksiyani darhol chaqirmaydi. U this bilan «bog'langan» yangi funksiya qaytaradi.
1function salom() {2 console.log("Salom, " + this.ism);3}4
5const ali = { ism: "Ali" };6
7// bind — yangi funksiya qaytaradi8const aliSalom = salom.bind(ali);9
10aliSalom(); // "Salom, Ali"11aliSalom(); // "Salom, Ali" — har qachon chaqirsangiz12
13// Argumentlarni ham oldindan berish mumkin (partial application)14function qoshish(a, b) {15 return a + b;16}17
18const qoshBesh = qoshish.bind(null, 5);19qoshBesh(10) // 1520qoshBesh(20) // 25call/bind amaliyoti
Natijajonli
Kichik test
0 / 41.user.salom() chaqirilsa, salom() ichidagi this kim?
2.call va apply orasidagi farq?
3.bind nima qaytaradi?
4.Arrow funksiyani obyekt metodi qilib ishlatsak this nima?