Ceci, lier, appeler et s'appliquer en javascript | Expliqué

Lier, appeler et s'appliquer sont des méthodes vraiment utiles et spéciales qui nous aident à obtenir l'emprunt de fonctionnalités et de méthodes d'un objet à un autre en utilisant la référence "ce". C'est un peu de sujet avancé, c'est pourquoi nous allons prendre les choses lentement pour vous et expliquer chaque détail minute avec des exemples.

JavaScript et de nombreux autres langages de programmation utilisent le mot-clé ce Pour passer la référence de l'objet / classe parent à ses fonctions et méthodes à l'intérieur. Tandis que les méthodes de liaison, d'appel et d'application fonctionnent sur le passage de la référence aux attributs d'emprunter à un objet à un autre. La fonction de liaison, d'appel et d'application a été ajoutée dans JavaScript dans la version ECMA2015.

La référence «cette»

Le mot-clé ce a une signification très spécifique en JavaScript, il fait référence à l'objet qui appelle la fonction. Si nous travaillons avec une méthode de constructeur, le mot-clé ce ferait référence à la classe et à ses propriétés, si nous travaillons avec certains éléments DOM alors ce Le mot-clé ferait référence aux valeurs globales du DOM.

Pour démontrer cela, créez l'objet suivant en utilisant les lignes suivantes:

var personne =
Nom: "John Doe",
Âge: 25,
Désignation: "Auditeur",
printName: function ()
console.journal (ceci.nom);
,
;

Comme vous pouvez le voir, à l'intérieur de l'objet, nous avons une fonction imprimer qui imprimera le nom de la personne et à l'intérieur du console.enregistrer() Nous pouvons voir que nous avons la ligne:

ce.nom;

Ce Le mot-clé crée une référence à l'objet et indique au compilateur de récupérer le «nom» de cet objet particulier.

Appelez et appliquez des méthodes

Appel et appliquer Peut être défini simultanément car ils ont presque exactement les mêmes mécanismes de travail. L'appel et l'application sont utilisés pour l'emprunt de la fonction, l'emprunt de la fonction signifie utiliser la fonction d'un autre objet et utiliser la référence d'un autre objet.

Pour mieux comprendre ce concept, créez deux objets différents en utilisant les lignes de code suivantes:

var person1 =
Nom: "John Doe",
Âge: 25,
Désignation: "Auditeur",
printName: function ()
console.journal (ceci.nom);
,
;
var person2 =
Nom: "Baba Yaga",
Âge: 22,
Désignation: "chômeurs",
;

Comme vous pouvez le voir dans l'extrait de code, nous avons presque la même structure à la fois des objets et des mêmes paires de valeurs clés, sauf pour le fait que personne 1 a la fonction imprimer alors que personne2 ne fait pas. Mais si vous souhaitez imprimer le «nom» du personne2 objet, vous pouvez le faire en utilisant la méthode «printName» à partir du personne 1 objet, et pour le «ce”Référence, vous passez dans la référence de l'objet personne2.

Syntaxe de l'appel et appliquez:

La syntaxe de ces deux méthodes est presque identique:

Pour la méthode d'appel, la syntaxe est comme:

obj1.fonction.Appelez (RefferenceOfObject2, Arg1 Arg2, Arg3…);

Pour l'application de la méthode, la syntaxe est comme:

obj1.fonction.Appliquer (RefferenceOfObject2, [Arg1, Arg2, Arg3,…]);

Note: Si la fonction que vous empruntez nécessite quelques arguments supplémentaires, alors dans le Méthode d'appel Vous passez dans les arguments séparés par une virgule «», et dans le cas de la méthode d'application, vous transmettez des arguments supplémentaires en tant que liste des tableaux.

Utilisation de méthodes d'appel et d'application

Revenant à notre problème d'origine, nous pouvons utiliser le «imprimer«Fonction du«personne 1”Objet pour imprimer le nom du personne2 objet utilisant la ligne de code suivante:

personne 1.imprimer.Appelez (Person2);

Si vous exécutez la commande ci-dessus, vous verrez la sortie suivante:

De même, vous pouvez utiliser le appliquer() Méthode dans le même but en utilisant le code du code:

personne 1.imprimer.postuler (personne2);

Mais et si le printName () La fonction consulte certains arguments comme:

PrintName: fonction (ville, frères et sœurs)
console.log ('$ ceci.Nom de $ City a $ frères et sœurs frères et sœurs ');
,

Pour ce cas, vous utiliserez la fonction d'appel avec la ligne de code suivante:

personne 1.imprimer.Appelez (Person2, "New York", 4);

L'extrait de code complet est comme:

var person1 =
Nom: "John Doe",
Âge: 25,
Désignation: "Auditeur",
PrintName: fonction (ville, frères et sœurs)
console.log ('$ ceci.Nom de $ City a $ frères et sœurs frères et sœurs ');
,
;
var person2 =
Nom: "Baba Yaga",
Âge: 22,
Désignation: "chômeurs",
;
personne 1.imprimer.Appelez (Person2, "New York", 4);

Si vous exécutez le code suivant, vous obtiendrez la sortie comme suit:

Comme vous pouvez le voir, vous avez pu passer les arguments en utilisant la méthode d'appel, vous pouvez le faire en utilisant le appliquer() Méthode également en utilisant l'extrait de code suivant:

var person1 =
Nom: "John Doe",
Âge: 25,
Désignation: "Auditeur",
PrintName: fonction (ville, frères et sœurs)
console.log ('$ ceci.Nom de $ City a $ frères et sœurs frères et sœurs ');
,
;
var person2 =
Nom: "Baba Yaga",
Âge: 22,
Désignation: "chômeurs",
;
personne 1.imprimer.Appliquer (Person2, ["New York", 4]);

Note: pour passer des arguments à la fonction empruntée à travers le appliquer() Méthode, nous utilisons un tableau contenant les arguments.

Si vous exécutez ce code, vous obtiendrez la même sortie identique que:

Mais que se passe-t-il si vous ne voulez pas emprunter une fonction à un objet? C'est là que le Méthode de liaison entre en jeu.

La méthode bind ()

Contrairement au appel et appliquer méthodes, lier Des méthodes sont utilisées pour créer une copie d'une fonction, puis placer cette fonction copiée comme un attribut de l'objet afin que la fonction puisse être utilisée ultérieurement.

Syntaxe de la méthode de liaison

La syntaxe est comme:

var newFunctionName = object1.fonction.bind (RegeCetoObject2);

Remarque: la méthode de liaison renvoie une fonction reproduite.

Pour démontrer cela, modifions le code de l'exemple ci-dessus de cette manière:

var person1 =
Firstname: "John",
LastName: "Doe",
Âge: 25,
printfullName: function ()
console.journal (ceci.FirstName + "" + ceci.nom de famille);
,
;
var person2 =
Firstname: "Baba",
LastName: "Yaga",
Âge: 25,
;

Maintenant, si vous souhaitez faire une copie de la fonction imprimage de l'objet personne 1 et en faire un attribut de l'objet personne2 Ensuite, vous pouvez le faire en utilisant la ligne de code suivante:

var printmyName = Person1.imprimage.lier (person2);

Avec cette ligne, vous avez "écorché”Une fonction d'attribut printmyname avec l'objet personne2, Et vous pouvez l'invoquer en utilisant la commande:

printmyName ()

Remarque: vous ne l'appelez pas avec le personne2 objet en utilisant l'opération de point car la référence au personne2 L'objet est déjà "écorché"À la fonction.

L'extrait de code complet est comme:

var person1 =
Firstname: "John",
LastName: "Doe",
Âge: 25,
printfullName: function ()
console.journal (ceci.FirstName + "" + ceci.nom de famille);
,
;
var person2 =
Firstname: "Baba",
LastName: "Yaga",
Âge: 25,
;
var printmyName = Person1.imprimage.lier (person2);
printmyName ();

Lorsque vous exécutez cet extrait de code, vous obtenez la sortie suivante:

Vous y allez, vous avez dupliqué une fonction à partir de personne 1 objet, a passé la référence de personne2 objet, et le stocké comme une fonction distincte.

Conclusion

Appelez, liez et appliquer Les méthodes sont des méthodes compliquées qui sont utilisées pour jouer avec la référence des objets et vous aider à réaliser des exploits comme l'emprunt de fonction et la réplication de la fonction avec une référence différente. Pour comprendre les détails de ces fonctions, nous devons savoir quel est le mot-clé ce signifie dans JavaScript et comment fonctionne le référencement dans JS. Vous avez appris sur le fonctionnement de cette méthode, appelez, appliquez et lie à leurs exemples.