С помощью метода bind() объект может заимствовать метод у другого объекта.
В приведенном ниже примере создаются 2 объекта (человек и участник).
Объект-член заимствует метод полного имени из объекта 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);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p>
<p id="demo"></p>
<script>
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);
document.getElementById("demo").innerHTML = fullName();
</script>
</body>
</html>
Иногда необходимо использовать метод bind(), чтобы предотвратить потерю этого.
В следующем примере объект person имеет метод отображения. В методе отображения this относится к объекту person:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>In this example, the person object has a display method:</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
</script>
</body>
</html>
Когда функция используется в качестве обратного вызова, это теряется.
В этом примере будет предпринята попытка отобразить имя человека через 3 секунды, но вместо этого будет отображаться undefine:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example will try to display a person name after 3 seconds.</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
</script>
</body>
</html>
Метод bind() решает эту проблему.
В следующем примере метод bind() используется для привязки person.display к 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);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example will display a person name after 3 seconds:</p>
<p id="demo"></p>
<script>
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);
</script>
</body>
</html>
В JavaScript ключевое слово this относится к объекту.
Какой объект зависит от того, как этот вызывается (используется или вызывается).
Ключевое слово this относится к разным объектам в зависимости от того, как оно используется:
В объектном методе this относится к объекту.
Само по себе это относится к глобальному объекту.
В функции this относится к глобальному объекту.
В функции в строгом режиме это имеет значение не определено.
В событии this относится к элементу, получившему событие.
Такие методы, как call(), apply() и bind() может ссылаться на this на любой объект.
это не является переменной. Это ключевое слово. Вы не можете изменить значение this.
это руководство по JavaScript