Funkce JavaScript metoda bind().

Obsah

Funkce Půjčka

Pomocí metody bind() si může objekt vypůjčit metodu od jiného objektu.

Níže uvedený příklad vytváří 2 objekty (osoba a člen).

Členský objekt si vypůjčí metodu celého jména z objektu person:

Příklad

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);

Zkuste to sami →

<!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>

Zachování toto

Někdy je třeba použít metodu bind(), aby se zabránilo toto ztrátě.

V následujícím příkladu má objekt person metodu zobrazení. V metodě zobrazení toto odkazuje na objekt osoby:

Příklad

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

person.display();

Zkuste to sami →

<!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>

Když je funkce použita jako zpětné volání, toto se ztratí.

Tento příklad se pokusí zobrazit jméno osoby po 3 sekundách, ale místo toho se zobrazí undefined:

Příklad

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

setTimeout(person.display, 3000);

Zkuste to sami →

<!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>

Tento problém řeší metoda bind().

V následujícím příkladu je metoda bind() použita ke spojení person.display s osobou.

Tento příklad zobrazí jméno osoby po 3 sekundách:

Příklad

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);

Zkuste to sami →

<!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>

Co je toto?

V JavaScriptu odkazuje klíčové slovo toto na objekt.

Který objekt závisí na tom, jak je tento vyvolán (použit nebo zavolán).

Klíčové slovo toto odkazuje na různé objekty v závislosti na tom, jak se používá:

V objektové metodě toto odkazuje na objekt.
Samotné toto odkazuje na globální objekt.
Ve funkci toto odkazuje na globální objekt.
Ve funkci je v přísném režimu toto nedefinováno.
V události toto odkazuje na prvek, který přijal událost.
Metody jako call(), apply() a bind() může odkazovat toto na jakýkoli objekt.

Poznámka

toto není proměnná. Je to klíčové slovo. Hodnotu toto nelze změnit.

Viz také:

Výukový tento JavaScript