Jaka jest różnica między wywołaniem a wiązaniem?

Jaka jest różnica między wywołaniem a wiązaniem?
Przyjmując różne funkcje do strony internetowej lub strony internetowej, może istnieć wymóg powiązania funkcji na podstawie określonego atrybutu. Na przykład powiązanie identycznych treści pod względem kodu i funkcji w tym samym miejscu. W takich sytuacjach „dzwonić()" I "wiązać()”Metody w JavaScript Assist na końcu programisty.

Ten blog omówi różnicę między metodami call () i bind () w JavaScript.

Jaka jest odmienność między metodami Call () i bind () w JavaScript?

W JavaScript „The„dzwonić()”Metoda wywołuje metodę z obiektem właściciela jako argument. To wiąże „Ten„Wartość funkcji i wykonuje tę samą funkcję.

Składnia metody call () w JavaScript

dokument = funkcja.Zadzwoń (argn)

W podanej składni:

  • "funkcjonować”Odnosi się do funkcji, która zostanie wykonana.
  • "argn”Odpowiada argumentom, które należy przekazać funkcji.

Natomiast "wiązać()”Metoda pozwala obiektowi pobrać metodę z innego obiektu. Ta metoda wiąże „Ten„Wartość funkcji i zwraca nową funkcję.

Składnia metody bind () w JavaScript

funkcjonować.Bind (thisarg [, arg1 [, arg2 [,…]]])

W powyższej składni:

  • "Thisarg”To wartość funkcji ukierunkowanej.
  • "Arg1" I "Arg2„Są argumentami funkcji.

Przykład 1: Jak używać metody Call () w JavaScript?

W tym przykładzie podaną metodę można wykorzystać do wywołania funkcji i powiązania z nią określonego obiektu:


funkcjaMyFunction ()
zwrócić „to jest proste” + to.FirstName + "" + to.LastName + ".";

const Element1 =
FirstName: „Web”,
LastName: „Strona”

const Element2 =
FirstName: „Web”,
LastName: „Witryna”

dokument.getElementById („demo”).innerHtml = myfunkcja.Call (element1);

W powyższym kodzie:

  • Po pierwsze, dołącz „”Element zawierający wynikowe wyjście.
  • Teraz w kodzie JavaScript zdefiniuj funkcję o nazwie „myFunction ()".
  • W swojej definicji obiekt stowarzyszony „Ten”Z„Klucze”Konkretnych elementów.
  • Następnie utwórz dwa obiekty o nazwie „element1" I "element2”Odpowiednio w formie„kluczowa wartość”Pary.
  • W następnym kroku zastosuj „getElementById ()„Metoda dostępu do utworzonego”div".
  • Połącz także „dzwonić()”Metoda z podaną funkcją. Jako jego parametr przekazuj poprzedni obiekt, aby funkcja wywołuje określony obiekt, a jego właściwości są dołączane.
  • Wreszcie, skorzystaj z „InnerHtml„Właściwość, aby wyświetlić wynik w„div".

Wyjście

W powyższym wyjściu można zauważyć, że funkcjonalności zarówno funkcji, jak i obiektu są dołączane.

Przykład 2: Jak użyć metody bind () w JavaScript?

W tym przykładzie „wiązać()„Metoda można zastosować do powiązania konkretnego obiektu z kluczem określonego obiektu określonego jako funkcja:


const obiekt1 =
MEM1: „HTML”,
MEM2: „CSS”,
myFunction: function ()
zwróć „to jest” + to.mem1 + „&” + to.MEM2;


const obiekt2 =
MEM1: „JavaScript”,
MEM2: „JQuery”,

Niech komunikat = obiekt1.MyFunkcja.bind (Object2);
dokument.getElementById („demo”).innerHtml = message ();

Tutaj w tych liniach kodu:

  • Po pierwsze, w kodzie HTML, uwzględnij „„Element o podanym ID o nazwie„próbny".
  • W kodzie JS utwórz tablicę obiektów o nazwie „obiekt1„Posiadanie podanych wartości w postaci„kluczowa wartość”Pary.
  • Zauważ, że „MyFunkcja”Odnosi się do klucza obiektu, a funkcja jest zdefiniowana jako jego wartość.
  • W definicji funkcji patrz klawisze obiektów przez „Ten" obiekt.
  • Następnie, podobnie, utwórz inny obiekt o podanych właściwościach.
  • Teraz odnoś się do klucza powiązanego obiektu „MyFunkcja”I dołącz„wiązać()”Metoda taka, że ​​konkretny obiekt w parametrze metody jest zintegrowany z funkcją.
  • Na koniec zastosuj „getElementById ()„Metoda pobierania„div”Element i wyświetl wynik za pośrednictwem„InnerHtml" nieruchomość.

Wyjście

Powyższy wynik pokazuje, że pożądany wymóg jest spełniony.

Wniosek

W JavaScript główna różnica między dzwonić()" I "wiązać()„Metody polega na tym, że metoda Call () wiąże się„Ten„Wartość funkcji i wykonuje funkcję, podczas gdy„wiązać()„Metoda wiąże„ ”Ten„Wartość funkcji i zwraca nową funkcję. W tym blogu omówiono podstawowe różnice między metodami Call () i Bind w JavaScript za pomocą przykładów.