[Cours]Apply,Call

Ayal
Javascript

Bonsoirs,
Mon problème n'est pas un problème de code mais un problème de compréhension. Je n'arrive pas à comprendre les méthodes apply() et call(). Je sais qu'en gros ça permet de rediriger le mot clef this vers un autre objet, mais je ne comprends pas vraiment le fond, à quoi ça sert et comment/où l'utiliser, dans quel but...
Je sais que ma question semble assez vaste puisque ce n'est pas un détail précis de ces méthodes mais s'il vous plaît peut-on me l'expliquer clairement, je n'arrive vraiment pas à comprendre ces concepts.
Merci d'avance,Haddad Ayal,

1 réponse

PhiSyX

Un exemple d'utilisation de .apply ou .call serait dans le cas où une fonction prend en argument un callback.
Dans certains cas, le callback, t'as envie qu'il ait un context particulier, et donc ces méthodes là sont bien intéressantes pour ce faire, sans devoir à passer le context en argument.

Concrètement ça:

var NomClass = function (params) {
  this.params = params
}

NomClass.prototype.nomFonctionSansApplyEtCall = function (cb) {
  var a = 1
  var b = 2
  var c = 3

  // Passage du context this en argument pour `cb`
  // Ce qui fait qu'on doit écrire le cb comme suit: function (ctx, a, b, c) { /* la valeur de this ici est Window (Dans un navigateur) */ }
  cb(this, a, b, c)
}

NomClass.prototype.nomFonctionAvecApplyEtCall = function (cb) {
  var a = 6
  var b = 7
  var c = 8

  // Pas de passage du context this en argument pour `cb`
  // Ce qui fait qu'on peut écrire le cb comme suit: function (a, b, c) { /* et la valeur de this ici est NomClass */ }
  cb.apply(this, [a, b, c])
  cb.call(obj, a, b, c)
}

var obj = {
  params: {
    foobar: 'barfoo'
  }
}

var instance = new NomClass({ foo: 'bar' })

instance.nomFonctionSansApplyEtCall(function (ctx, a, b, c) {
  console.log(this, ctx.params, a, b, c)
})
// Output:
//   Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} {foo: "bar"} 1 2 3

instance.nomFonctionAvecApplyEtCall(function (a, b, c) {
  console.log(this, this.params, a, b, c)
})
// Output:
//   NomClass {params: {…}} {foo: "bar"} 6 7 8
//   {params: {…}} {foobar: "barfoo"} 6 7 8

Après il y a d'autres cas d'utilisations des méthodes .apply et .call, mais pour le coup, les documentations les expliquent très bien