Funksiyaning bind() metodi

Metodni qarzga olish

call() va apply() kabi, bind() metodi ham boshqa obyektdan metodni qarzga olishi mumkin.

call() va apply()’dan farqli ravishda, bind() metodi funksiyani darhol ishga tushirmaydi.

Buning o‘rniga, keyinroq chaqirilishi mumkin bo‘lgan yangi funksiyani qaytaradi.

Yangi funksiya siz tanlagan this qiymatini eslab qoladi.

bind() — murakkab mavzu.

Avval this, call() va apply()’ni tushunib olganingizga ishonch hosil qiling.

this kalit so‘zi

call() metodi

apply() metodi

Asosiy bind() sintaksisi

bind() metodi yangi funksiya yaratadi.

Birinchi argument yangi funksiya uchun this qiymatini belgilaydi.

Qo‘shimcha argumentlar yangi funksiya uchun qat’iy argumentlarga aylanadi.

Sintaksis

const newFunction = functionName.bind(this, arg1, arg2, ...);

bind() yordamida this ni qat’iy bog‘lash

bind()’ning eng keng tarqalgan qo‘llanilishi — funksiya har doim bir xil this qiymatidan foydalanishini ta’minlash.

Misol

O‘zingiz sinab ko‘ring »

greetJohn — this sifatida har doim person1’dan foydalanadigan yangi funksiya.

Quyidagi misol 2 ta obyekt yaratadi (person va member).

member obyekti person obyektidan fullName metodini qarzga oladi:

Misol

// Create person Object
const person = {
  firstName:"John",
  lastName: "Doe",
fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

// Create member Object
const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

// Bind the fullName method to the member Object
let fullName = person.fullName.bind(member);

// Later call fullname()
fullname()

O‘zingiz sinab ko‘ring »

fullName — this sifatida har doim member’dan foydalanadigan yangi funksiya.

bind() hamda call() va apply() taqqoslovi

Bu metodlar orasidagi farq muhim:

call() funksiyani darhol chaqiradi
apply() funksiyani darhol chaqiradi
bind() yangi funksiya qaytaradi

Taqqoslash

// Call a function
greet.call(person);

// Call a function
greet.apply(person);

// Create a new function
const greetLater = greet.bind(person);

// Call the new function
greetLater();

Keyinroq chaqiriladigan funksiyalar uchun bind()

bind() ishlatilmasa, this qiymati yo‘qolishi mumkin.

Misol

const person = {
  name: "John",
  sayHello: function() {
    return "Hello " + this.name;
  }
};

const hello = person.sayHello;
hello(); // this is not person

Yuqoridagi funksiya o‘zining this qiymatini yo‘qotadi.

bind() bilan misol

const hello = person.sayHello.bind(person);
hello();

this ni saqlab qolish uchun bind() dan foydalanish

bind() metodidan this yo‘qolishining oldini olish uchun foydalanish mumkin.

Quyidagi misolda person obyekti display metodiga ega.

display metodida this person obyektiga ishora qiladi:

Misol

const person = {
  firstName:"John",
  lastName: "Doe",
display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

person.display();

O‘zingiz sinab ko‘ring »

Agar funksiya callback sifatida ishlatilsa, this yo‘qoladi.

Quyidagi misolda person.display setTimeout() metodida callback sifatida ishlatiladi.

Misol

Bu person nomi o‘rniga undefined ko‘rsatadi:

const person = {
  firstName:"John",
  lastName: "Doe",
display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

setTimeout(person.display, 3000);

O‘zingiz sinab ko‘ring »

bind() metodi bu muammoni hal qiladi.

Quyidagi misolda bind() metodi person.display’ni person’ga bog‘lash uchun ishlatiladi.

Misol

Bu to‘g‘ri natijani ko‘rsatadi:

const person = {
  firstName:"John",
  lastName: "Doe",
display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

let display = person.display.bind(person);
setTimeout(display, 3000);

O‘zingiz sinab ko‘ring »

Argumentlar bilan bind()

bind()’ga uzatilgan argumentlar qat’iy qiymatlarga aylanadi.

Bu ba’zan qisman qo‘llash (partial application) deb ataladi.

Misol

function multiply(a, b) {
return a * b;
}

const double = multiply.bind(null, 2);

double(5);

O‘zingiz sinab ko‘ring »

double funksiyasi har doim 2 ga ko‘paytiradi.

bind() asl funksiyani o‘zgartirmaydi

Asl funksiya o‘zgartirilmagan.

bind()’ning har bir chaqiruvi yangi funksiya yaratadi.

Misollar

const greetJohn = greet.bind({ name: "John" });
const greetAnna = greet.bind({ name: "Anna" });

Umumiy xatolar

bind() funksiyani chaqiradi deb kutish
bind() does not execute the function.
Qaytarilgan funksiyani chaqirishni unutish
Yangi funksiyani o‘zingiz chaqirishingiz kerak.
bind()’dan ortiqcha foydalanish
Sometimes a normal function call is simpler.