JavaScript Class

davronny

Davron Normo`minov

Posted on April 24, 2022

JavaScript Class

Image description

Assalomu alaykum, bugungi maqolamiz JavaScript Class lari haqida bo'ladi.

JavaScriptda class ob'yekt yaratish uchun mo'ljallangan. Bunda class ob'yekt malumotlari va funksiyalarini o'z ichiga oladi. Boshqa dasturlash tillaridan farqli ravishda JavaScriptda class prototipli vorislikka asoslangan maxsus funksiya hisoblanadi.

ES6 dan oldin

ES6 dan oldin JS da class tushunchasi bo'lmagan.Biz bilgan class ni yaratish uchun constructor va prototype dan foydalanilgan.

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

var ali = new Person("Ali Valiyev");
console.log(ali.getName());
Enter fullscreen mode Exit fullscreen mode

Natija:

Ali Valiyev
Enter fullscreen mode Exit fullscreen mode

Endi yuqoridagi kodning qanday ishlashini tushuntiraman.

Dastlab, name xususiyatiga ega Person konstruktor funksiyasi yaratildi. prototype ga getName() funksiyasi biriktirildi, endi bu funksiyani Person class ishlatilgan barcha holatlarda ishlatishimiz mumkin.

Keyin esa new operatori yordamida Person klassidan namuna oldik. ali ob'yekti prototipli vorislik orqali Person va Object klasslaridan namuna olganligi uchun endi ularning barcha xususiyatlaridan foydalana oladi.

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true
Enter fullscreen mode Exit fullscreen mode

Es6 da class ning e'lon qilinishi

ES6 da class larni e'lon qilish uchun yangi sintaksis yaratildi. Yuqoridagi funksiya konstruktori yordamida yaratilgan class yangi sintaksisda quyidagicha yoziladi.

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}
Enter fullscreen mode Exit fullscreen mode

Person klassidagi construtor() ichida olinadigan namunaning xususiyatlari e'lon qilinadi va new operatori orqali klassdan namuna olinganda JavaScript avtomatik ravishda constructor() ni chaqiradi.

let ali = new Person("Ali Valiyev");
Enter fullscreen mode Exit fullscreen mode

Person klassidagi getName() metod deb ataladi va bunday qo'llaniladi.

obyektNomi.metodNomi()
Enter fullscreen mode Exit fullscreen mode

Misol uchun

let name = ali.getName();
console.log(name); // "Ali Valiyev"
Enter fullscreen mode Exit fullscreen mode

Biz yuqorida class ni maxsus funksiya dedik, buning isbotini ko'rish uchun Person klassining tipini typeof operatori orqali tekshiramiz.

console.log(typeof Person); // function
Enter fullscreen mode Exit fullscreen mode

Class va funksiya konstruktori

Class va funksiya konstruktori orasida o'xshashlik bo'lishiga qaramasdan, ularda farqlanadigan muhim jihatlar bor.

Birinchi, class e'lon qilinganda funksiyaga o'xshab hoisting ga uchramaydi.

Misol uchun, quyidagi kodni Person klassi e'lon qilinishidan oldin yozsak, natija sifatida ReferenceError ega bo'lamiz.

let ali = new Person("Ali Valiyev");
Enter fullscreen mode Exit fullscreen mode

Xatolik

Uncaught ReferenceError: Person is not defined
Enter fullscreen mode Exit fullscreen mode

Ikkinchi, class ichidagi barcha kodlar avtomatik ravishda strict mode da ishlaydi.

Uchinchi, class metodlari non enumerable, ya'ni sanalmaydi(ular bilan for ... in va Object.keys() ni ishlata olmaymiz). Funksiya konstruktorida esa ob'yekt xususiyatlarini non enumerable qilish uchun Object.defineProperty() metodidan foydalanishimizga to'g'ri keladi.

Va oxirigisi, class konstruktorini new operatorisiz ishlatsak, xatolik beradi.

let ali = Person("Ali Valiyev");
Enter fullscreen mode Exit fullscreen mode

Xatolik

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'
Enter fullscreen mode Exit fullscreen mode

Xulosa

  • class yaratish uchun class kalit so'zini ishlatamiz.
  • class prototipli vorislikka asoslangan va kuchaytirilgan maxsus funksiya.

Foydali bo'lgan bo'lsa ulashing )

💖 💪 🙅 🚩
davronny
Davron Normo`minov

Posted on April 24, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related