Constructor funksiyalar

~15 daq · JavaScript · OOP

Muammodan boshlaylik

Foydalanuvchi ro'yxatini yaratishingiz kerak. Har bir foydalanuvchi: ism, email, rol.

const foydalanuvchi1 = { ism: "Jasur",  email: "jasur@mail.com",  rol: "user"  };
const foydalanuvchi2 = { ism: "Malika", email: "malika@mail.com", rol: "admin" };
const foydalanuvchi3 = { ism: "Sardor", email: "sardor@mail.com", rol: "user"  };

100 ta foydalanuvchi bo'lsa — 100 ta ob'ekt literal yoziladi. Har birida bir xil tuzilma. Xususiyat nomini xato yozsangiz — bitta ob'ektda boshqacha bo'lib qoladi.

Constructor funksiya — bir xil tuzilmadagi ob'ektlarni "qolipdan" yaratadi.

Constructor funksiya nima?

Constructor funksiya — oddiy funksiya, lekin new kalit so'zi bilan chaqiriladi va yangi ob'ekt qaytaradi.

Hayotiy o'xshatma

G'isht qolip. Bir qolipdan yuzlab bir xil shakldagi g'ishtlar yasaladi. Qolip o'zgarmaydi, har safar yangi g'isht chiqadi. Constructor — o'sha qolip.

function Foydalanuvchi(ism, email, rol) {
  this.ism   = ism;
  this.email = email;
  this.rol   = rol;
}

const jasur  = new Foydalanuvchi("Jasur",  "jasur@mail.com",  "user");
const malika = new Foydalanuvchi("Malika", "malika@mail.com", "admin");

console.log(jasur.ism);   // "Jasur"
console.log(malika.rol);  // "admin"

Convention: constructor funksiya nomi Katta harf bilan boshlanadi — bu kod o'quvchiga signal: "bu new bilan chaqiriladi".

new nima qiladi?

new Foydalanuvchi(...) chaqirilganda JavaScript to'rtta ishni bajaradi:

1. Bo'sh ob'ekt yaratadi: {}
2. this ni o'sha ob'ektga yo'naltiradi
3. Funksiya ichidagi kod ishlaydi (this.ism = ism, va h.k.)
4. Ob'ektni qaytaradi

Vizual:

function Foydalanuvchi(ism) {
  // 1. this = {} (bo'sh ob'ekt — new tomonidan yaratildi)

  this.ism = ism; // 2. ob'ektga xususiyat qo'shildi

  // 3. return this; — new avtomatik qaytaradi
}

Agar new ishlatilmasa — this global ob'ektga (yoki undefined ga strict modeda) yo'naladi:

const xato = Foydalanuvchi("Jasur"); // new yo'q!
console.log(xato);       // undefined — funksiya hech narsa qaytarmadi
console.log(window.ism); // "Jasur" — global ga yozildi! ❌

Metodlar qo'shish — prototype orqali

Har bir ob'ektga alohida metod qo'shish — xotira isrof:

function Foydalanuvchi(ism) {
  this.ism = ism;
  this.salomlash = function() {         // ❌ — har ob'ektda alohida nusxa
    console.log(`Salom, ${this.ism}`);
  };
}

const a = new Foydalanuvchi("Ali");
const b = new Foydalanuvchi("Vali");

console.log(a.salomlash === b.salomlash); // false — ikki alohida funksiya

To'g'ri usul — metodlarni prototype ga qo'shish:

function Foydalanuvchi(ism, email) {
  this.ism   = ism;    // ← ob'ektning o'zida (har birida boshqa qiymat)
  this.email = email;
}

Foydalanuvchi.prototype.salomlash = function() {  // ← bir marta, hammada umumiy
  console.log(`Salom, ${this.ism}!`);
};

Foydalanuvchi.prototype.info = function() {
  console.log(`${this.ism} — ${this.email}`);
};

const a = new Foydalanuvchi("Ali",  "ali@mail.com");
const b = new Foydalanuvchi("Vali", "vali@mail.com");

a.salomlash(); // "Salom, Ali!"
b.salomlash(); // "Salom, Vali!"

console.log(a.salomlash === b.salomlash); // true ← bir xil funksiya, xotira tejaldi

Nima uchun prototype? Metod a va b da bir xil ishlaydi — ikkitasi uchun alohida nusxa saqlash shart emas. Prototype da bir marta saqlansa — ikkalasi ham foydalanadi.

instanceof — kimdan yaratilgan?

function Foydalanuvchi(ism) { this.ism = ism; }
function Mahsulot(nomi)     { this.nomi = nomi; }

const jasur   = new Foydalanuvchi("Jasur");
const noutbuk = new Mahsulot("Noutbuk");

console.log(jasur   instanceof Foydalanuvchi); // true
console.log(jasur   instanceof Mahsulot);      // false
console.log(noutbuk instanceof Mahsulot);      // true

Tez-tez uchraydigan xatolar

new unutish:

function Foydalanuvchi(ism) {
  this.ism = ism;
}

const f = Foydalanuvchi("Jasur"); // ← new yo'q!
console.log(f);       // undefined
console.log(f.ism);   // ❌ TypeError

Bu xatoning oldini olish — new.target bilan:

function Foydalanuvchi(ism) {
  if (!new.target) {
    throw new Error("new bilan chaqiring: new Foydalanuvchi()");
  }
  this.ism = ism;
}

Konstruktorda metod yozish — xotira isrof:

// ❌ — har yangi ob'ektda alohida funksiya nusxasi yaratiladi
function Foydalanuvchi(ism) {
  this.ism = ism;
  this.salomlash = function() { console.log(this.ism); };
}

// ✅ — bir marta prototype da
function Foydalanuvchi(ism) {
  this.ism = ism;
}
Foydalanuvchi.prototype.salomlash = function() { console.log(this.ism); };

Xulosa

Constructor funksiya — bir xil tuzilmadagi ob'ektlarni qolipdan yaratadi.

new to'rtta ish qiladi: bo'sh ob'ekt yaratadi → this ni yo'naltiradi → kod ishlaydi → ob'ektni qaytaradi.

Metodlar — prototype ga qo'shiladi, ob'ektning o'ziga emas. Xotira tejash uchun.

Amalda esa — class sintaksisi ishlatiladi (keyingi dars). U constructor + prototype ni qulay yozuvga o'radi.

Keyingi dars

29-dars: Class — asoslar, constructor, maydonlar