call(), apply(), bind() in Javascript
Tags: javascript, beginners, programming, tutorial
Published: 2022-05-25 11:43:27

Javscriptda funksiya va qo'shimcha metodlarga prototip orqali qiymat o'rnatish bu juda ajoyib! ..... **Ammo biz bunga qanday etishyapmiz?**

`this` kalit so'zi orqali albatta!

Avval `this` kalit so'zini  yaqindan tanib olishimiz uchun biroz vaqt ketdi, ammo u qanday ishlashini bilib olganimizdan keyin tushundikki `this` kalit so'zi bu Javascriptda judayam foydali feature.

`this` kalit so'zi doim funksiya ichida ishlatiladi va o'zi ishlatilingan funksiyani chaqiruvchi yagona obyektga murojaat qiladi.

Biroq, hayot ham mukammal emas. Ba'zida `this` reference yo'qotib qo'yamiz. Bunday vaziyatda `this` kalit so'ziga havolani qaytarish uchun turli hil **hack** ishlatishimizga to'g'ri keladi. 

Ho'sh, shunday vaziyatda eng to'g'ri yechim nima?

**call(), apply(), bind()** - yangi umid beradi!

Hozirgacha biz funksiyalarni nomdan (ixtiyoriy, anonim funksiya ham boʻlishi mumkin) va u chaqirilganda bajaradigan koddan tashkil topgan obyektlar sifatida koʻrib chiqdik. Lekin bu haqiqat emas. Haqiqatni sevuvchi inson sifatida sizga shuni aytishim kerakki, funktsiya aslida quyidagi rasmga yaqinroq:


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

Bu nima? Xavotir olmang! Endi biz har bir funktsiyada uchraydigan 3 ta o'xshash usullarni misollar bilan ko'rib chiqamiz. Tayyormisiz?!

## bind()
bind() metodi yangi funktsiyani yaratadi, u chaqirilganda `this` kalit so'z berilgan unga qiymatga o'rnatiladi.

`this` nihoyatda kuchli. Funksiya chaqirilganda bu metod bizga `this` kalit so'zini aniq qiymatini aniqlashga imkon beradi. Ushbu kodni ko'rib chiqamiz:

```js
var pokemon = {
    firstname: 'Davron',
    lastname: 'Abduhakimov ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function() {
    console.log(this.getPokeName() + 'I choose you!');
};

var logPokemon = pokemonName.bind(pokemon); // yangi obyekt yaratadi va pokemon ni bog'laydi. pokemondagi 'this' kalit so'zi endi === pokemon.

logPokemon(); // 'Davron Abduhakimov I choose you!'
```

Keling endi ushbu kodni bo'laklarga ajratib chiqamiz. bind() metodidan foydalanganimizda:
1.JS yangi `pokemonName` namunasini yaratmoqda `pokemon`ni uning `this` o'zgaruvchisi sifatida bog'lamoqda. Bu `pokemonName` funksiyasini nusxasi ekanini tushunish muhimdir.

2.`PokemonName` funksiyasining nusxasini yaratgandan so'ng, u dastlab `pokemon` obyektida bo'lmagan bo'lsa ham, `logPokemon()` ni chaqira oladi. Endi u `pokemon` obyektining xususiyatlari(Davron va Abduhakimov) va medotlarini taniydi.

Qizig'i shundaki, biz **bind()** orqali bog'laganimizdan so'ng, biz funktsiyadan xuddi boshqa har qanday oddiy funksiya kabi foydalanishimiz mumkin. Biz hatto parametrlarni qabul qilish va o'tkazish uchun funktsiyani yangilashimiz  mumkin:

```js
var pokemon = {
    firstname: 'Davron',
    lastname: 'Abduhakimov ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + 'I choose you!');
    console.log(this.getPokeName() + ' loves ' + snack + ' and ' + hobby);
};

var logPokemon = pokemonName.bind(pokemon); // yangi obyekt yaratadi va pokemon ni bog'laydi. pokemondagi 'this' kalit so'zi endi === pokemon.

logPokemon('sushi', 'algorithms'); // Davron Abduhakimov  loves sushi and algorithms
```

## call(), apply()

**call()** metodi funksiyani berilgan `this` qiymat va alohida berilgan argumentlar bilan birga chaqiradi.

Bu shuni anglatadiki, biz har qanday funksiyani chaqira olamiz va va chaqirilayotgan funksiya ichida `this` kalit so'zi nimaga murojaat qilayotganini aniq ko'rsatishimiz mumkin. `bind()` metodiga juda o'xshash. 

`bind()` va `call()` metodlari orasidagi asosiy farq shundaki, `call()` metodi:
1. Qo'shimcha parametrlar ham qabul qiladi.
2. Darhol chaqirilgan funktsiyani ishga tushiradi.
3. `call()` metodi chaqirilayotgan funksiyaning nusxasini yaratmaydi.

`call()` va `apply()` deyarli bir hil. Ularning ishlashi o'rtasidagi yagona farq shundaki, `call()` barcha parametrlarni alohida-alohida qabul qilinishini kutadi, `apply()` esa barcha parametrlarni array sifatida kutadi, Misol:

```js
    firstname: 'Davron',
    lastname: 'Abduhakimov ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + ' loves ' + snack + ' and ' + hobby);
};

pokemonName.call(pokemon,'sushi', 'algorithms'); // Davron Abduhakimov loves sushi and algorithms
pokemonName.apply(pokemon,['sushi', 'algorithms']); // Davron Abduhakimov  loves sushi and algorithms
```

Har bir JS funktsiyasida mavjud bo'lgan bu built-in metodlar juda foydali. Agar siz ularni kundalik dasturlashda qo'llamasangiz ham, boshqa dasturchilarning kodini o'qiyotganingizda unga tez-tez duch kelasiz.

Savollaringiz bo'lsa, har doimgidek [Instagram](https://www.instagram.com/davron_abduhakimov/)  ❤ yoki [Telegram](https://t.me/davron_js) ❤  orqali bog'laning.