contexte pour utiliser call et apply en Javascript ?

Question

Les gars, quelqu'un peut-il expliquer le contexte pour utiliser call y apply en Javascript ?

Pourquoi utiliser call y apply au lieu d'appeler directement une fonction ?

Answer 1

Vous utilisez call o apply lorsque vous voulez passer un autre this à la fonction. En substance, cela signifie que vous voulez exécuter une fonction comme si elle était une méthode d'un objet particulier. La seule différence entre les deux est que call attend des paramètres séparés par des virgules, tandis que apply attend des paramètres dans un tableau.

Un exemple de Mozilla apply page où les constructeurs sont enchaînés :

function Product(name, price) {
    this.name = name;
    this.price = price;

    if (price < 0)
        throw RangeError('Cannot create product "' + name + '" with a negative price');
    return this;
}

function Food(name, price) {
    Product.apply(this, arguments);
    this.category = 'food';
}
Food.prototype = new Product();

function Toy(name, price) {
    Product.apply(this, arguments);
    this.category = 'toy';
}
Toy.prototype = new Product();

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

Quoi Product.apply(this, arguments) fait est le suivant : Le site Product est appliqué en tant que fonction dans chacun des modules Food y Toy et chacune de ces instances d'objet est transmise en tant que this . Ainsi, chacun des Food y Toy ont maintenant this.name y this.category propriétés.

Answer 2

Seulement si vous utilisez call o apply vous pouvez modifier le this dans la fonction.

Contrairement à d'autres langages, en JavaScript this ne fait pas référence à l'objet courant - plutôt au contexte d'exécution et peut être défini par l'appelant.

Si vous appelez une fonction en utilisant l'option new mot-clé this fera correctement référence au nouvel objet (à l'intérieur de la fonction constructeur) .

Mais dans tous les autres cas - this fera référence à l'objet global à moins qu'il ne soit défini explicitement par l'intermédiaire de l'appel

Answer 3

Vous utilisez .call() lorsque vous voulez faire en sorte qu'une fonction s'exécute avec une différente this valeur. Il définit la this comme spécifié, définit les arguments comme spécifié, puis appelle la fonction. La différence entre .call() et la simple exécution de la fonction est la valeur de la this lorsque la fonction est exécutée. Lorsque vous exécutez la fonction normalement, javascript décide ce que le this sera le pointeur (généralement le contexte global window sauf si la fonction est appelée comme une méthode sur un objet). Lorsque vous utilisez .call() vous spécifiez exactement ce que vous voulez this à mettre en place.

Vous utilisez .apply() lorsque les arguments que vous voulez passer à une fonction sont dans un tableau. .apply() peut également faire en sorte qu'une fonction soit exécutée avec un paramètre spécifique. this valeur. .apply() est le plus souvent utilisé lorsque vous avez un nombre indéterminé d'arguments qui proviennent d'une autre source. Il est souvent utilisé pour passer les arguments d'un appel de fonction à un autre en utilisant la variable locale spéciale arguments qui contient un tableau des arguments qui ont été passés à votre fonction actuelle.

Je trouve les pages de références MDN pour .call() y .apply() utile.

Answer 4

Si vous avez de l'expérience avec jQuery, vous savez que la plupart des fonctions font appel à la balise this objet. Par exemple, collection.each(function() { ... }); A l'intérieur de cette fonction, "this" fait référence à l'objet itérateur. C'est une des utilisations possibles.

J'ai personnellement utilisé .apply() pour implémenter une file d'attente de requêtes - je pousse un tableau d'arguments dans la file d'attente, et lorsque le moment est venu de l'exécuter, je prends un élément, et le passe comme argument pour une fonction de traitement en utilisant la méthode suivante .apply() Le code est donc plus propre que s'il fallait passer un tableau d'arguments en premier argument. C'est un autre exemple.

En général, il suffit de garder à l'esprit que ces façons d'appeler une fonction existent, et qu'il se peut qu'un jour vous les trouviez pratiques à utiliser pour mettre en œuvre votre programme.

Answer 5

Si vous avez de l'expérience avec Object Oriented Programming alors call and apply aura un sens si vous le comparez avec l'héritage et le remplacement des propriétés ou des méthodes/fonctions de la classe parent par la classe enfant. Ce qui est similaire à call en javascript comme suit :

function foo () {
  this.helloworld = "hello from foo"
}
foo.prototype.print = function () {
  console.log(this.helloworld)
}

foo.prototype.main = function () {
  this.print()
}

function bar() {
  this.helloworld = 'hello from bar'
}
// declaring print function to override the previous print
bar.prototype.print = function () {
  console.log(this.helloworld)
}

var iamfoo = new foo()

iamfoo.main() // prints: hello from foo

iamfoo.main.call(new bar()) // override print and prints: hello from bar