vázat toto

this klíčové slovo odkazuje na objekt. Pomocí this Klíčové slovo můžeme přistupovat k vlastnostem a metodám třídy/objektu. Dříve jsem diskutoval o případech použití this v tomto článku. Letní je:

1. Pokud funkce není součástí žádného objektu, bude jednoduše odkazovat na objekt globálního okna.
2. Pokud je funkce součástí objektu, nazýváme ji metodou. Uvnitř metody this odkazuje na objekt.

Hlavní problém nastává, když používáme funkci (tj. funkci zpětného volání) uvnitř této metody objektu, this odkazuje na globální objekt okna a my můžeme chtít k objektu přistupovat (svázat) a předefinovat this uvnitř funkce zpětného volání.
Nejprve se podívejme na problém:

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    this.books.forEach(function (item) {
      console.log(`${this.author} like ${item}`);
    });
  },
};
books.findBooks();

Books je jednoduchý objekt, který má vlastnosti autora a knihy a metodu "findbooks".
"findBooks" jednoduše zaznamenává informace o autorovi a knihách. Uvnitř funkce "findBooks" jsme použili metodu "foreach", která má funkci zpětného volání. Nyní by se měl výstup vytisknout:

„Jan doe má rád historii“,
„jhon doe like english“
„john doe like math“

Podívejme se na výstup:

Vidíme tedy this.author netiskne jméno autora. Co se tedy vlastně stalo? Vidíte, tento řádek kódu console.log( ${this.author} jako ${item}) je uvnitř funkce zpětného volání a funkce zpětného volání je běžná funkce, má jiný kontext provádění a odkazuje na objekt okna (připomíná letní 1 výše). Stručně řečeno, funkce zpětného volání není součástí objektu, který je uvnitř.

Jak tedy přistupujeme k objektu pomocí this ?
Toto je koncept vazby dat nebo vazebního objektu.
Existují tři různé scénáře, pomocí kterých lze přistupovat k objektu uvnitř funkce zpětného volání nebo jej vázat.

1. Použití funkce šipky:
Na rozdíl od běžné funkce používá funkce Arrow jako rozsah této funkce okolní rozsah, takže jakýkoli okolní rozsah se stává rozsahem funkce šipky.

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    this.books.forEach((item) => {
      return console.log(`${this.author} like ${item}`);
    });
  },
};
books.findBooks();

Výstup:

Funkce zpětného volání nyní nemá svůj vlastní rozsah, ale používá rozsah metod findbooks.

2. Explicitní metoda vazby:
Takže jsem si myslel:Pokud se budeme držet běžné funkce (jako zpětné volání), musí existovat způsob, jak svázat objekt.
I tato otázka má odpověď. Pro získání přístupu k objektu můžeme použít metodu bind.

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    this.books.forEach(
      function (item) {
        return console.log(`${this.author} like ${item}`);
      }.bind(this)
    );
  },
};
books.findBooks();

Výstup:

this uvnitř metoda bind vytváří trochu zmatek. Ale nebojte se! Vidíte, máme přístup k tomuto (knihám) objektu uvnitř foreach. Metoda vazby má tedy také přístup. Nyní je běžná funkce zpětného volání svázána s tímto objektem.

3. Přiřazení ‚toto‘ k proměnné:

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    let self = this;
    this.books.forEach(function (item) {
      return console.log(`${self.author} like ${item}`);
    });
  },
};
books.findBooks();

Výstup:

Přiřadili jsme to proměnné (self) a použili jsme ji ve funkci zpětného volání. V zásadě se tento článek nebude zabývat konceptem uzavření. Ale co to dělá, získáme přístup k proměnné deklarované v rodičovské funkci uvnitř funkce potomka . Tímto způsobem získá proměnná self odkaz na toto a později jsme ji použili ve funkci zpětného volání.