DEV Community: Ayyubkhon

JavaScriptda Constructor Functionlar

Ayyubkhon — Thu, 02 Feb 2023 15:31:38 +0000

Biz shu vaqtgacha jsda objectni bunday uslubda yaratib kelganmiz:

Agar biz huddi shunday ko'rinishda bir nechta object yaratishimizga to'g'ri kelsa, bir xil kodni juda ko'p marta takrorlashimizga to'g'ri keladi.

Buning uchun bizga constructor functionlar qo'l keladi. CFlar ham oddiy function, ammo ular o'zimizi regular functionlardan katta harfda boshlanishi va new kalit so'zi bilan chaqirilishi bilan ajrab turadi.

Quyidagi misolda person object yaratish uchun CF:

Endi biz Person object yaratish uchun quyidagidek kod yozamiz:

New operator quyidagi ishlarni amalga oshiradi:

Yangi bo'sh object yaratadi va uni this keyga tenglaydi.

John va Doeni firstname va lastnamega biriktiradi.

This qiymatni qaytaradi.

Bu huddi quyidagi kodga teng:

Endi biz Person CF orqali istaganimizcha object yaratishimiz mumkin:

CFarga methodlar biriktirish.

Methodlar(functionlar) bizni objectdagi datani manipulyatsiya qilish uchun kerak. CFga method qo'shish uchun this kalit so'zidan foydalanamiz:

Endi biz Person CF yordamida object yaratishimiz va getFullName methodimizi chaqirishimiz mumkin:

Bu yerda muammo shundan iboratki, biz har safar Person object yaratganimizda, getFullName() function qayta yaratilaveradi va bu xotira uchun to'g'ri yechim hisoblanmaydi.

Bu muammoni hal qilish uchun biz Object prototypedan foydanalishimiz mumkin

Biz CFni new kalit so'zisiz chaqirishimiz mumkin, lekin bu holda bizni constructorimiz oddiy function kabi ishlaydi. Bunday holatda this kalit so'zi person objectga emas, global this objectga bind bo'ladi.

Agar biz firstname yoki lastnamega kirmoqchi bo'lsak, bu error qaytaradi:

Shu bilan birgalikda, getFullName() methodga ham kirolmaymiz:

Buning oldini olish maqsadida ES6dan boshlab "new.target" property qo'shilgan.

Agar CFimizda new keyword bo'lsa, new.target bizni functionimizni referenceni qaytaradi, bo'llmasa undefined qaytadi.

Bu kod consolega undefined chiqaradi:
let person = Person("John", "Doe");

Agar new kalit so'zini qo'shsak, u consolega quyidagi kodni chiqaradi:
[Function: Person]

New.target propertyni new keyword yozilmagan taqdirda, function chaqirilganda new keywordni yozishga majburlashimiz mumkin:

Muallif:

https://t.me/thunkdev

Manba:

https://www.javascripttutorial.net/javascript-constructor-function/

First thoughts about event loop.

Ayyubkhon — Tue, 31 Jan 2023 14:31:05 +0000

Call stack bu js interpreterga script ichidagi functionlarni kuzatib borishni ta'minlaydigan mexanizm. Call stackka qo'shilgan function eng yuqoriga joylashadi, function biror narsani return qilsa yoki scope o'zi tugasa - call stackdan remove qilinadi interpreter tomonidan, oxirgi kirgan function birinchi bo'lib chiqib ketadi, ya'ni eng oxirigi kirgan function birinchi execute bo'ladi, bu LIFO prinsip, "last in, first out". barcha funksiyalar amalga oshirilishadi avval anonymous degan funcksiya yaratiladi interpreter tomonidan, hamma funksiya shuning ichida ishga tushiriladi, agar call stackda umuman funksiya qolmasa, anonymous eng oxirida remove bo'ladi call stackdan.

web apilar browserlar bizga beradigan feature hisoblanadi. masalan biz serverga request jo'natsa va response kelmagunicha javascript kodlarimiz execute bo'lmasdan kutadigan bo'lsak, bu bizni dasturimizni rasvo bo'lishiga sabab bo'ladi. web apini o'zida kodlarni execute qilishimiz mumkin, bu esa browserning o'zida amalga oshiriladi.

yana bir foydalaridan biri, web api C kabli low level tillarda yozilgan bo'ladi, bu esa oddiy js bajara olmaydigan ishlarni browserni o'zida bajarishimizga yordam beradi

ular bizga AJAX so'rovlar yuborishimiz, DOMni manipulyatsiya qilishimiz, geo tracking, lcoal storagega kirish kabi ishlarni bajarishimizda yordam beradi.

web apilar yordamida jsdan tashqarida ham ishlar bajarishimiz mumkin, lekin masalan bizni js kodimiz responsega javob berishi kerak bo'lsa, unda nima qilamiz? aynan hus yerda bizga callback yordamga keladi.

callback orqali browser response kelganidan keyin bizi kodimizni ishga tushirishimizga ruxsat beradi.

callback function o'zi nima? callback bu functionga argument sifatida berilgan another function. u asosiy kodimiz ishga tushib bo'lganidan keyin ishga tushadi.

cal back funcsiyalar by default asyncronus emas.

settimeoutni vaqti tugasa ham, u birdan ishga tusha olmaydi. sababi call stack bir vaqtning o'zida faqat bitta ish bajaradi. qachonki call stack empty bo'lsa, o'shanda async kodlar ishga tushishni boshlaydi.

call stackdan farqli o'laroq, callback queue FIFO prinsipiga amal qiladi. first in, first out, ya'ni birinchi ishga tushgan function birinchi amalga oshiriladi.

Reactni boshlash uchun JavaScriptni qanchalik bilish muhim?

Ayyubkhon — Sun, 20 Mar 2022 11:32:16 +0000

Ko'pchilik JavaScriptni yetarlicha o'rganmay turib Reactga (yoki boshqa js frameworklariga) o'tishayotganini guvoohi bo'lyapmiz. Bu to'g'ri emas.
Agar siz JavaScriptdan yetarlicha bilimga ega bo'lmay turib Reactga o'tsangiz, Reactni o'rganish davomida tez-tez jsga qaytishingizga to'g'ri keladi. Bu esa Reactni o'rganish jarayonini uzoqlashtiradi, ko'plab chalkashliklarga olib keladi.
Keling, Reactdani boshlash uchun jsdan qanchalik bilish muhim ekanligini koʻrib chiqaylik.
Bular:
➊ Basics
➋ Array.prototype Methods
➌ Array Destructuring
➍ Array Spread
➎ Object Destructuring
➏ Object Spread
➐ Template Literals
➑ ES Modules
Basics:
➊ Basics

❍ Variable Declaration
❍ Variable Scope
❍ Variable Hoisting
❍ Functions
❍ Arrow Functions
❍ Callback Functions
❍ Closure
❍ Basic Operators
❍ Array Literals
❍ Object Literals
❍ if, if...else
❍ for, for...in, for...of, while, do...while

➋ Array metodlar

❍ forEach()
❍ map()
❍ reduce()
❍ flat()
❍ flatMap()
❍ find()
❍ filter()
❍ slice()
❍ splice()
❍ push()
❍ pop()
❍ shift()
❍ unshift()
❍ some()
❍ every()

➌ Array Destructuring

U tez-tez hooclarda ishlatiladi, xususan useState() hoocida
Masalan:

⇥ const [fruits, setFruits] = useState([]);

➍ Array Spread
Foydalanish holatlari juda ko'p. Biz arrayni nusxa ko'chiradigan joylarimizdan biri bu statedan elementni qo'shish/yangilash/o'chirishdir.

⇥ let newArray = [itemToAdd, ...oldArray]

➎ Object Destructuring
Propertylar bizning funktsiya komponentimizga ob'ekt parametri sifatida uzatiladi.

Biz uni buzishimiz va faqat biz foydalanmoqchi bo'lgan xususiyatlarni belgilashimiz mumkin.
Masalan:

function MyComponent({name, address}) {

}

➏ Object Spread

Biz obyektni child componentiga o'tkazish uchun spread operatordan foydalanshimiz mumkin.
Masalan:
function MyComponent({name, address, ...rest}) {
return
}

➑ ES Modullar

❍ import
❍ import {}
❍ export
❍ export default

O'rganish usuli barchada turli bo'ladi. JS bilimiga ega boʻlish majburiy boʻlmasa-da, siz bir vaqtning oʻzida React va JSni ham oʻrganishingiz mumkin. Ammo oson bo'lishi uchun React sayohatingizni boshlashdan oldin JS bo'yicha asosiy bilimlarga ega bo'lishingiz tavsiya etiladi.

@ Swapna Kumar