JavaScript Функція bind()
Функція запозичення
За допомогою методу bind() об’єкт може запозичити метод від іншого об’єкта.
Наведений нижче приклад створює 2 об’єкти (person та member).
Об’єкт-член запозичує метод fullname від об’єкта person:
Приклад
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
Спробуйте самі »
Зберігаючи this
Іноді потрібно використовувати метод bind(), щоб запобігти втраті this.
У наступному прикладі об’єкт person має метод display. У методі display this відноситься до об’єкта person.
Приклад
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
Спробуйте самі »
Коли функція використовується як зворотній виклик (callback), this втрачається.
Цей приклад намагатиметься відобразити ім’я person через 3 секунди, але натомість відображатиметься undefined:
Приклад
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
Спробуйте самі »
Метод bind() вирішує цю проблему.
У наступному прикладі метод bind() використовується для прив’язки person.display до person.
Цей приклад відобразить ім’я person через 3 секунди:
Приклад
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);
Спробуйте самі »
Що таке this?
В JavaScript ключове слово this посилається на об’єкт.
Який об’єкт, залежить від того, як this викликається (використовується або викликається).
Ключове слово this відноситься до різних об’єктів залежно від способу його використання:
У методі об’єкта this посилається на об’єкт. |
Окремо this стосується глобального об’єкта. |
У функції this посилається на глобальний об’єкт. |
У функції в строгому режимі this є undefined. |
У події this посилається на елемент, який отримав подію. |
Такі методи, як call(), apply() та bind() можуть відносити this до будь-якого об’єкту. |
Примітка
this не є змінною. Це ключове слово. Ви не можете змінити значення this.
