La raison d'utiliser la méthode JS .call ()?

Question

Je suis intéressé quelle est la raison d'avoir la méthode call () dans JS. Il semble que cela répète la méthode habituelle d'appel this .

Par exemple, j'ai un code avec call ().

 var obj = {
    objType: "Dog"
}

f = function(did_what, what) {
    alert(this.objType + " " + did_what + " " + what);
}

f.call(obj, "ate", "food");
 

Le résultat est "Chien a mangé de la nourriture". Mais je peux obtenir le même résultat en assignant la fonction à l'objet.

 var obj = {
    objType: "Dog"
}

f = function(did_what, what) {
    alert(this.objType + " " + did_what + " " + what);
}

obj.a = f;
obj.a("ate", "food");
 

Le résultat est le même. Mais cette façon est plus compréhensible et facile à utiliser. Pourquoi call () est nécessaire?

Answer 1

call est utilisé lorsque vous souhaitez contrôler le champ qui sera utilisé dans la fonction appelée. Vous voudrez peut-être la this mot-clé pour être autre chose que le champ d'application que vous avez attribué à la fonction, dans ces cas, vous devez utiliser call ou apply au champ d'application dans la fonction.

Il vous permet également d'appeler les méthodes de l'utilitaire à l'extérieur de la portée, mais encore apporter la portée locale dans la méthode, f.ex lors de l'utilisation de "privé" fonctions:

var obj = (function() {
    var privateFn = function() {
        alert(this.id);
    }
    return {
        id: 123,
        publicFn: function() {
            privateFn.call(this);
        }
    };
}());

obj.publicFn();

Dans l'exemple ci-dessus, privateFn n'est pas exposé en obj , mais il peut encore être construites comme si c'était une partie de la portée publique (à l'aide d' this de la même manière).

Answer 2

Vous utiliseriez probablement la deuxième manière dans votre exemple, mais vous souhaitiez parfois utiliser les fonctions d'un objet sur un autre objet. Un exemple consisterait à utiliser des méthodes Array sur des objets de type tableau comme NodeList s

 var el = document.getElementById("foo");
[].forEach.call(el.children, function(child, index) {
    //Iterate over an element's children, performing an action on each one
});
 

Answer 3

Cela a à voir avec le concept d'une fonction de première classe . Fondamentalement, des langages comme Javascript vous permettent de traiter les fonctions comme des choses à part entière. Les fonctions peuvent être stockées dans des variables ou transmises à d'autres fonctions.

call() fournit un moyen d'exécuter une fonction autonome non attachée à un autre objet.