JavaScript-da prototiplar

Dlanor S surati Unsplash-da

Ushbu xabarda biz JavaScript-da prototiplar nima ekanligini, ular JavaScript-ga Ob'ektga yo'naltirilgan dasturlash tushunchalariga erishishda qanday yordam berishini muhokama qilamiz.

Oldingi yozuvda biz JavaScript-da ob'ektlar yaratishning turli usullarini o'rgandik. JavaScript-da ob'ektlarni yaratish usullaridan biri bu konstruktor funktsiyasidir.

Konstruktor funktsiyasi bilan ob'ektlarni yaratish bilan bog'liq muammo:

Quyidagi konstruktor funktsiyasini ko'rib chiqing:

Odam konstruktor funktsiyasidan foydalangan holda person1 va person2 ob'ektlarini yarataylik.

var person1 = yangi inson ("Virat", "Kohli");
var person2 = yangi inson ("Sachin", "Tendulkar");

Yuqoridagi kodni bajarishda JavaScript mexanizmi konstruktor funktsiyasining ikki nusxasini yaratadi, ularning har biri person1 va person2 uchun.

Ya'ni, konstruktor funktsiyasi yordamida yaratilgan har bir ob'ektda xususiyatlar va usullarning o'ziga xos nusxasi bo'ladi. Bitta narsani bajaradigan fullName funktsiyasining ikkita misoli bo'lishi mantiqqa to'g'ri kelmaydi. Har bir ob'ekt uchun alohida funktsiyalarni saqlash xotira yo'qotilishiga olib keladi. Oldinga siljib, bu masalani qanday hal qilishimiz mumkinligini ko'ramiz.

Prototiplar

Agar funktsiya JavaScript-da yaratilgan bo'lsa, JavaScript mexanizmi prototip xususiyatini funktsiyaga qo'shadi. Ushbu prototip xususiyati sukut bo'yicha konstruktor xususiyatiga ega bo'lgan ob'ekt (prototip ob'ekti deb nomlanadi). Konstruktor xususiyati prototip ob'ekti bo'lgan xususiyatga ishora qiladi. FunctionName.prototype yordamida funktsiyaning prototip xususiyatiga kirishimiz mumkin.

Yuqoridagi rasmda ko'rsatilgandek, Inson konstruktor funktsiyasi prototip ob'ektiga ishora qiluvchi prototip xususiyatiga ega. Prototip ob'ekti konstruktor xususiyatiga ega, bu esa inson konstruktor funktsiyasini anglatadi. Quyidagi misolni ko'rib chiqaylik:

konsol.log (shaxs1);

Inson konstruktor funktsiyasining prototip xususiyatiga kirish uchun quyidagi sintaksisdan foydalaning:

konsol.log (Human.prototype)

Yuqoridagi rasmdan ko'rinib turibdiki, funktsiyaning prototip xususiyati ikkita xususiyatga ega ob'ekt (prototip ob'ekti):

  1. Inson funktsiyasining o'ziga ishora qiluvchi konstruktor mulki
  2. __proto__ xususiyati: JavaScriptda merosni tushuntirishda biz buni muhokama qilamiz

Konstruktor funktsiyasidan foydalanib ob'ekt yaratish

Ob'ekt JavaScript-da yaratilganida, JavaScript mexanizmi dunder proto deb nomlangan yangi yaratilgan ob'ektga __proto__ xususiyatini qo'shadi. dunder proto yoki __proto__ konstruktor funktsiyasining prototip ob'ektiga ishora qiladi.

Yuqoridagi rasmda ko'rsatilgandek, Inson konstruktor funktsiyasidan foydalanib yaratilgan person1 ob'ekti dunder proto yoki konstruktor funktsiyasining prototip ob'ektiga ishora qiladigan __proto__ xususiyatiga ega.

// Odam konstruktor funktsiyasidan foydalangan holda person1 ob'ektini yarating
var person1 = yangi inson ("Virat", "Kohli");

Yuqoridagi rasmdan ko'rinib turibdiki, ikkala shaxsning dunder proto yoki __proto__ xususiyatlari va Human.prototype xususiyatlari tengdir. Keling, ular bir xil joyda === operatoridan foydalanganligini tekshiraylik

Human.prototype === shaxs1 .__ proto__ // rost

Bu shuni ko'rsatadiki, person1 ning dunder proto mulki va Human.prototype bir xil ob'ektga ishora qilmoqda.

Keling, Odam konstruktor funktsiyasidan foydalangan holda yana bir ob'ekt2 yarataylik

var person2 = yangi inson ("Sachin", "Tendulkar");
konsol.log (shaxs2);

Yuqoridagi konsol chiqishi shuni ko'rsatadiki, hatto 2-chi odamning dunder proto xossasi Human.prototype xususiyatiga teng va ular bir xil ob'ektga ishora qiladilar.

Human.prototype === shaxs2 .__ proto__ // rost
person1 .__ proto__ === person2 .__ proto__ // rost

Yuqoridagi bayonot shuni isbotlaydiki, 1-chi va 2-chi odamning proto xossalari odamning konstruktor funktsiyasining prototip ob'ektiga ishora qiladi.

Konstruktor funktsiyasining prototip ob'ekti konstruktor funktsiyasidan foydalangan holda yaratilgan barcha ob'ektlar o'rtasida taqsimlanadi.

Prototip ob'ekti

Prototip ob'ekti ob'ekt bo'lganligi sababli, prototip ob'ektiga xususiyatlar va usullarni biriktirishimiz mumkin. Shunday qilib, konstruktor funktsiyasidan foydalanib yaratilgan barcha ob'ektlarga ushbu xususiyatlar va usullarni baham ko'rishga imkon berish.

Yangi xususiyat konstruktor funktsiyasining prototip xususiyatiga quyida ko'rsatilgandek nuqta yoki kvadrat qavs yozuvidan foydalanib qo'shilishi mumkin:

ism va yosh xususiyatlari Inson prototipiga qo'shildi

Misol

Keling, console.log (person.name) ni bajarganimizda nima sodir bo'lganligini tahlil qilaylik. Keling, ob'ekt ob'ektning nom xususiyatiga ega ekanligini tekshirib ko'raylik

konsol.log (shaxs1);

Ko'rib turganimizdek, person1 ob'ekti bo'sh va uning dunder proto xususiyatidan boshqa hech qanday mulki yo'q. Xo'sh, qanday qilib console.log (person.name) chiqishi "Ashvin" edi?

Ob'ektning xususiyatiga kirishga harakat qilganimizda, JavaScript dvigatellari avval ob'ektda ob'ektni topishga harakat qilishadi, agar ob'ekt ob'ektda bo'lsa, uning qiymati uning qiymatidan yuqori bo'ladi. Ammo, agar ob'ekt ob'ektda mavjud bo'lmasa, u prototip ob'ekti yoki ob'ektning proto-rangini topishga harakat qiladi. Agar mulk topilsa, u holda qiymat qaytariladi, boshqa JavaScript mexanizmi ob'ektning xafsiz prototipida mulkni topishga harakat qiladi. Ushbu zanjir, dunder proto xususiyati nol bo'lgunga qadar davom etadi. Bunday hollarda, chiqish aniqlanmaydi.

Shunday qilib, person1.name chaqirilganda JavaScript mexanizmi person1 ob'ektida xususiyat mavjudligini tekshiradi. Bu holda nom xususiyati shaxsning ob'ekti emas edi. Shunday qilib, endi JavaScript dvigateli dunder proto xossasi yoki person1 ob'ektining prototipida mavjudligini tekshiradi. Bunday holda, name mulki dunder proto mulki yoki person1 ob'ektining prototipida edi. Shunday qilib, natija "Ashvin" ga qaytarildi.

Shaxs konstruktor funktsiyasidan foydalangan holda yana bir ob'ekt2 yarataylik.

var person2 = yangi shaxs ();
// person2 obyekti yordamida name xususiyatiga kirish
konsol.log (person2.name) // Chiqish: Ashvin

Keling, person1 ob'ektida mulk nomini aniqlaylik

person1.name = "Anil"
konsol.log (person1.name) // Chiqish: Anil
konsol.log (person2.name) // Chiqish: Ashvin

Bu erda person1.name "Anil" ni chiqaradi. Yuqorida ta'kidlab o'tilganidek, JavaScript mexanizmi birinchi navbatda ob'ektni ob'ektning o'zida topishga harakat qiladi. Bu holda name xususiyati ob'ekt ob'ektining o'zida1 mavjud, shuning uchun JavaScript motorlari person nom nomining qiymatini chiqaradi.

Person2 holatida, name name ob'ektda mavjud emas. Shunday qilib, u person2 prototipi ob'ektining mulk nomini chiqaradi.

Prototip bilan bog'liq muammolar

Prototip ob'ekti konstruktor funktsiyasidan foydalangan holda yaratilgan barcha ob'ektlar o'rtasida taqsimlanganligi sababli, uning xususiyatlari va usullari ham barcha ob'ektlar o'rtasida almashiladi. Agar A ob'ekti ibtidoiy qiymatga ega bo'lgan prototipning xususiyatini o'zgartirsa, boshqa ob'ektlar ularga ta'sir qilmaydi, chunki A ob'ekti quyida ko'rsatilgandek o'z ob'ektlarida mulk yaratadi.

Bu erda (1 va 2-qatorlar), ham 1, ham person2-da nomlar xususiyati yo'q, shuning uchun ular prototiplar nomi xususiyatiga kirishadi va shuning uchun chiqish ikkalasi uchun ham bir xil.

Person1 nom xususiyati uchun boshqa qiymatga ega bo'lishni istasa, u o'z ob'ektida nom xususiyatini yaratadi.

Prototip ob'ekti mos yozuvlar turidagi xususiyatga ega bo'lsa, prototiplar bilan muammoni ko'rsatish uchun yana bir misolni ko'rib chiqing

Yuqoridagi misolda person1 va person2 prototip ob'ektining bir xil do'stlari qatoriga ishora qiladi. person1 qatorga boshqa qator qo'shish orqali do'stlar mulkini o'zgartiradi.

Do'stlar massivi person1-da emas, balki person.prototype-da mavjud bo'lganligi sababli, do'st1-ning ob'ekti orqali do'stning mulkidagi o'zgarishlar person2.friends-da (xuddi shu qatorga ishora qiladi) ham aks etadi.

Agar barcha holatlar bir qatorni bo'lish niyatida bo'lsa, natija yaxshi bo'ladi. Ammo bu erda bunday emas edi.

Konstruktor / prototipni birlashtirish

Prototip va konstruktor bilan bog'liq muammolarni hal qilish uchun biz konstruktor va funktsiyani birlashtira olamiz.

  1. Konstruktor funktsiyasi bilan bog'liq muammo: Har bir ob'ektda funktsiyaning o'ziga xos misoli mavjud
  2. Prototip bilan muammo: bitta ob'ektdan foydalanib mulkni o'zgartirish boshqa ob'ektni ham aks ettiradi

Ikkala muammoni hal qilish uchun biz konstruktor ichidagi ob'ektga xos bo'lgan barcha xususiyatlarni va prototip ichidagi barcha umumiy xususiyatlarni va usullarni quyida ko'rsatilgan tarzda aniqlashimiz mumkin:

Bu erda biz xohlaganimizdek, har bir ob'ekt o'z nomi, yoshi va do'stlarining mulki bo'lishi kerak. Shuning uchun biz ushbu xususiyatlardan foydalangan holda konstruktor ichida aniqladik. Biroq, prototip ob'ektida sayName aniqlanganligi sababli, u barcha ob'ektlar o'rtasida taqsimlanadi.

Yuqoridagi misolda, do'stning shaxs mulki2 kishining do'stlari mulkini o'zgartirishda o'zgarmadi1.

Agar siz ushbu maqolani yoqtirgan bo'lsangiz va mening yangi maqolam haqida yangiliklarni olishni istasangiz, iltimos, menga o'rta va twitterda yoziling @ happyyrupesh123

Boshqa maqolalar:

  1. Web Share API-larini tushunish
  2. JavaScript ichki dasturlari: JavaScript mexanizmi, ish vaqti muhiti va setTimeout Web API
  3. Ajam uchun ReactJS qo'llanmasi
  4. JavaScript sayohati: Skriptlarni yuklab olishdan tortib to ijrogacha
  5. Nima uchun Progressive Web Apps juda yaxshi va uni qanday tuzish kerak
  6. Keling, bu "buni" bir marta olaylik
  7. Xizmat ishchilari
  8. Xizmatchilar ishini amalga oshirish
  9. JavaScript-da bajariladigan kontekst
  10. ReactJS-da virtual DOM
  11. JavaScript-da prototiplar
  12. JavaScript-dagi "bu"
  13. JavaScript-da Object.create
  14. JavaScript-da meros
  15. JavaScript-da ob'ektlar yarating
  16. JavaScript-dagi ob'ektlar
  17. Pythonda Zip
  18. Python-dagi dekorativlar
  19. Python-da ikkita ro'yxatni bir-biriga bog'lab turish
  20. lambda, Python-dagi xarita va filtr
  21. Python-dagi tushunchalarni ro'yxatlang