Introduction à plusieurs façons d'appeler des méthodes de fonction dans les compétences Javascript_javascript

La syntaxe JavaScript est flexible, et il n'est pas rare d'avoir cinq ou six façons d'implémenter la même fonction, couplée à un héritage de prototype anti-humain et à des fonctionnalités asynchrones, cela devient encore plus déroutant. Souvent, je ne comprends pas la différence entre appeler et postuler. Je vais l'enregistrer aujourd'hui pour ne plus l'oublier.

En JavaScript, les méthodes peuvent être exécutées des manières suivantes :

1.func(), c'est la méthode d'appel la plus directe et la plus courante, et elle est également conforme à la logique de pensée des gens ordinaires. Cependant, elle présente certaines lacunes dans certains cas, qui seront expliquées ci-dessous.

2. (function(arg){})(window), appel de méthode anonyme, est plus utile lors de la construction d'un espace de noms. Les paramètres entre parenthèses suivantes correspondent aux paramètres d'entrée dans la méthode anonyme.

3.func.bind(sth)(), manuel de Mozilla a mentionné que la liaison est une nouvelle fonctionnalité ajoutée dans ECMA-262 5e édition, qui est répertoriée séparément ici en tant que méthode appelante, elle compense le défaut de ne pas pouvoir lier la portée dans les appels directs.

4.func.call(), c'est la deuxième méthode d'appel. La méthode d'appel est définie dans le prototype de chaque méthode pour exécuter la méthode actuelle.

5.func.apply(), le frère jumeau de l'appel.

func()

Il s'agit de la méthode d'appel la plus courante et peut être trouvée partout dans n'importe quelle langue. func(x, y) peut transmettre différents paramètres. Dans certains langages, comme php et java, cet appel suffit à résoudre tous les problèmes. Mais JavaScript est un langage fonctionnel, et le concept de fermeture et un mot-clé étrange déterminent les défauts de cette méthode d'appel. Cela doit être interprété comme la portée du segment de code actuel, qui changera à mesure que le code est exécuté sur différents segments. Cependant, dans certains cas, nous ne souhaitons pas que cela soit modifié, comme dans le cas d'événements liés à certains DOM, nous en sommes sûrs. Nous ne voulons pas que cela soit transféré à l'objet window lorsqu'ils sont appelés, mais c'est parfois le cas, comme dans le code suivant.

Copier le code Le code est le suivant :

var a ={};
var func = fonction(x) {
console.log(this);
};
a.onclick = function() {
var x = 100;
fonction(x);
};
a.onclick();

Vous pouvez considérer a comme un lien sur la page. Puisque nous voulons simplement lier la méthode définie à l'événement onclick au lieu de l'appeler immédiatement et que cette méthode a un paramètre, nous devons utiliser une méthode anonyme. et transmettez-le à l'événement onclick de a. Il y a un problème. Ceci dans func devient la fenêtre d'objet globale. Évidemment, nous ne voulons pas de cela. Pour le moment, les appels directs utilisant func() ne fonctionneront pas, nous devons donc lier cette fonction externe à la méthode func. Il existe donc des méthodes de liaison, d'appel et d'application.

lier

Le but de bind est très simple, renvoyer la même méthode liée à cet objet. La modification d'une ligne du code ci-dessus peut atteindre l'objectif de la lier à un objet.

Copier le code Le code est le suivant :

var a ={};
var func = fonction(x) {
console.log(this);
};
a.onclick = function() {
var x = 100;
func.bind(this)(x); // lier ici
};
a.onclick();

De cette façon, celui de l'événement onclick ne courra pas comme une mouche sans tête.

appelez et postulez

Appeler et postuler doivent être mentionnés ensemble car ils sont très similaires. Ils prennent tous deux en charge plusieurs paramètres, et le premier paramètre est l'objet this qui sera lié. Le deuxième paramètre est la différence entre eux. L'appel utilise des paramètres indépendants comme paramètres d'entrée de la méthode appelante et apply utilise un tableau comme paramètres d'entrée. . Parfois, nous ne voulons pas modifier cet objet, mais nous voulons le lier artificiellement à d'autres objets. À ce stade, call et apply sont très utiles. (Cela ne signifie pas que vous ne pouvez pas utiliser bind, mais il semble que bind soit apparu relativement tard, et peut-être que la compatibilité du navigateur n'est pas bonne). Donnez-moi un exemple :

Copier le code Le code est le suivant :

une = {
func : fonction() {
Ceci.x = 1;
          },
x : 0
};
b = {
une : une,
x : 20
};
pour(var je = 0; je < 10; je ){
bafunc();
>
console.log(a.x);
console.log(b.x);

Les objets a et b ci-dessus ont tous deux x. Nous espérons que func pourra modifier le x correspondant de manière ciblée, mais les appels directs ne peuvent modifier x que dans le cadre de func, c'est-à-dire a.x. En modifiant le code, vous pouvez atteindre l'objectif de modifier b.x

Copier le code Le code est le suivant :

une = {
func : fonction() {
Ceci.x = 1;
          },
x : 0
};
b = {
une : une,
x : 20
};
pour(var je = 0; je < 10; je ){
b.a.func.call(b); // lie ceci à b
>
console.log(a.x);
console.log(b.x);

Ce marron n'est pas bien présenté, il est un peu tiré par les cheveux et c'est un style de codage qui prête facilement à confusion. Il a des scénarios applicables, mais il n'est pas applicable partout.