JavaScriptda Constructor Functionlar
Tags: javascript, oop, beginners
Published: 2023-02-02 15:31:38

Biz shu vaqtgacha jsda objectni bunday uslubda yaratib kelganmiz: 

  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ellxxvnyj0lzsdfq2wui.png)



 

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: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my6ui7dpq8gdj8sf2viw.png)


 

  

Endi biz Person object yaratish uchun quyidagidek kod yozamiz: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsknpaxoekndot22adv4.png)



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. 

  



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gme6uocen3hs6hnjpg8.png)



  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ail0fcdcbmut9dlcqca.png)



 

Bu huddi quyidagi kodga teng: 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meielywjy7dseqfaaj6b.png)



  

Endi biz Person CF orqali istaganimizcha object yaratishimiz mumkin: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h827c2uu1asn1s9drn9l.png)




 

  

CFarga methodlar biriktirish. 

  

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

  



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs65p2hz9cw9thn1y6bz.png)



  

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

  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rbeuoixgcsdyvjom80h.png)


  

  

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdmbmn3juz764bze8p03.png)


 

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5aqfjcmhotyb9b2m7ii.png)





 

 Shu bilan birgalikda, getFullName() methodga ham kirolmaymiz: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xdgll4zdflersf8iaih.png)


 

 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84g7zr0vlsratiujut1c.png)



  


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: 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11a98z4q2l8gf9zuueo0.png)






Muallif: 

https://t.me/thunkdev 

Manba:  

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