call, apply, bind va this kalit so'zi
Josh*Assalaamu alaykum!
Demak bugungi maqolamizda Call, apply va bind metodlari va this kalit so'zi haqida tushunchaga ega bo'lamiz.
Bismillah!
Xo'sh,
Savol --- this kalit so'zi nima o'zi ?
Javob --- this kalit so'zi qayerda ishlatilishiga qarab harxil qiymatni o'zida saqlaydi.
Ya'ni ?
1. this = window
this kalit so'zini yolg'iz xolda dasturimiz ichida ishlatsak, this kalit so'zi Global objectga teng bo'ladi. Ya'ni browserda window objectiga teng.
Misol:
let GlobalThis = this; // GlobalThis = window;
GlobalThis.console.log(1) // 1
Shuningdek oddiy funksiyalar ichida ham this = window;
2. this = object
this kalit so'zi qachonki biror bir objectning ichidagi metodda ishlatilsa, this ana o'sha objectning o'ziga teng bo'ladi.
Misol:
let myObject = {
name: "Umar",
sayMyName(){
alert("My name is " + this.name)
}
}
myObject.sayMyName() // My name is Umar
3. this = element
this kalit so'zi biror bir html elementimizga qo'shilgan Eventlar ichida ishlatilsa, this aynan o'sha elementga teng bo'ladi.
Misol:
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log(this); // this = btn
})
Hozirga bu kalit so'z uchun ko'rganlarimiz yetarli, this kalit so'zi borasida ushbu maqolani ko'rib chiqing.
Ana endi asosiy qismga o'tish payti keldi.
Demak biz this kalit so'zini ishlatishni o'rgandik. Endi savol tug'uladi, biz o'sha this kalit so'zini o'zgartira olamizmi ?
Tasavvur qiling, agar shunday bo'lsa bizga juda ham katta imkoniyatlar ochilgan bo'lar edi.
Yaxshiyamki bizda buni ilojisi bor.
Keling sinab ko'ramiz.
Demak , kompaniya ishchilarini ma'lumotlari ustida ishlaydigan metodlarimiz bor.
Bularni vazifasi, ishchining ismini chiqaradi va darajasini chiqarib berishi kerak. OOP nazariyasi bilan qaraydigan bo'lsak, bu metodlarni bitta dona objectning ichiga olib , ishchi ma'lumotlari saqlanadigan object bilan ishlatish.
Ko'p gapirgandan ko'ra bir sinab ko'raylik, kodimizning birinchi qismi quyidagicha:
let myMethods = {
printName() {
console.log("Employee's name is " + this.name)
},
printPosition() {
console.log("Employee's position is " + this.position)
}
}
let emp1 = {name: 'Umar', position: "Dasturchi"};
let emp2 = {name: 'Josh', position: "Muhandis"};
myMethods.printName() // Employee's name is undefined
myMethods.printPosition() // Employee's position is undefined
Demak, e'tibor qaratamiz, bizda myMethods degan objectimizni ichidagi metodlarda this.name va this.position so'zlarini ishlatdik.
Eslab olamiz, object metodi ichida , this aynan o'sha objectga teng bo'lar edi.
Xo'sh, bizda axir unday nomlik xossalar mavjud emasku ☹️🤨🧐 ?!
Ha to'g'ri, this ning ichida unday xossalar yo'q, this.name va this.position nomlari yo'q.
Ular undefined ga teng hozir.
Ammo bizda emp1 va emp2 nomlik objectlarimizning ichida bunday qiymatlar mavjud.
Unda keling, aynan o'sha metodlarning ichida, this kalit so'zini almashtirib qo'ysakchi ? 😁
Hozirda, printName va printPosition ning ichida this kalit so'zi myMethods ga teng.
Oxirgi ikki qator kodimiz esa xato ma'lumot chiqaryapti, biz aynan o'sha yerda muommoni call metodi orqali hal qilamiz.
myMethods.printName.call(emp2) // Employee's name is Josh
myMethods.printPosition.call(emp1) // Employee's position is Muhandis
Tadaam 😹
Mana sizga javob, call, apply va bind ning vazifasi qaysiki funksiya yoki objectning metodlarini ichida ishlatilgan this kalit so'zini boshqa qiymatga almashtirib qo'yish.
call va apply ning ishlashi birhil , ikkisi ham funksiyani yoki metodni o'sha joyning o'zida ichidagi this kalit so'zini almashtirgan holda ishlatib yuborish.
apply ning kichik farqi esa funksiyaga argument berishda xolos, call ga ketma ket berilsa, apply ga array ichida beriladi, bunday:
someFunction.call(yangiThis , argument1, argument2);
someFunction.apply(yangiThis , [argument1, argument2]);
// asl metod bunday edi, someFunction(argument1, argument2)
bind - esa birozgina farqi bor bu ikkisidan.
call va apply ishlatgan holimizda, o'sha funksiya yoki metod o'sha joyning o'zida ishlab ketsa, bind esa funksiya yoki metodni keyinchalik ishlatishimiz uchun tayyorlab beradi va biz yangi this kalit so'zi o'rnatilgan yangi funksiyamizni xoxlagancha ishlatsak bo'ladi.
Bunday:
function sayAge(){
console.log(this.age);
}
let myFn = sayAge.bind( {age: 19} ); // {age: 19} bu yangi o'rnatmoqchi bo'lgan this kalit so'zimiz.
sayAge() // undefined
myFn(); // 19
bu mavzuda gapirsak gap ko'p. O'zbek tilida Alloh qodir qilgancha tushuntirdim.
Yana ham chuqurroq bilim uchun ingliz tilidagi ushbu maqolani ko'ring.
Savollar bo'lsa kommentimiz 24/7 ochiq 😉