Obyektlar, this, call/bind/apply

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 mavzu
  1. 01Obyekt yaratish va o'qish
  2. 02Metodlar
  3. 03this — nima u?
  4. 04call() — funksiyani boshqa obyekt bilan
  5. 05apply() — call kabi, argument massivda
  6. 06bind() — yangi funksiya yaratish

1. Obyekt yaratish va o'qish

1// Oddiy
2const user = {
3 ism: "Ali",
4 yosh: 17,
5 "to'liq ismi": "Ali Valiyev", // bo'shliq bo'lsa — qo'shtirnoq
6 faol: true,
7};
8
9// O'qish — 2 usul
10user.ism // "Ali"
11user["ism"] // "Ali"
12user["to'liq ismi"] // kvadrat qavs bilan
13
14// Dinamik kalit
15const maydon = "yosh";
16user[maydon] // 17
17
18// Qo'shish / o'zgartirish
19user.shahar = "Toshkent";
20user.yosh = 18;
21
22// O'chirish
23delete user.faol;
24
25// Kalitlar, qiymatlar
26Object.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 funksiya
6 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()); // 2009

3. 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 user
9
10// Ajratib olib chaqirsangiz — this yo'qoladi
11const f = user.salom;
12f(); // undefined (yoki xato strict mode'da)
13
14// Boshqa obyektga biriktirish
15const user2 = { ism: "Vali", salom: user.salom };
16user2.salom(); // "Vali" — endi nuqtadan chapda user2

4. 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 massivda
11// call — vergul bilan
12// 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 qaytaradi
8const aliSalom = salom.bind(ali);
9
10aliSalom(); // "Salom, Ali"
11aliSalom(); // "Salom, Ali" — har qachon chaqirsangiz
12
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) // 15
20qoshBesh(20) // 25
call/bind amaliyoti
Natijajonli

Kichik test

0 / 4

1.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?

Mustaqil ish

0 / 6