bind(), call() et apply() en JS

Vous allez acquérir une connaissance approfondie du fonctionnement de call(), bind() et apply.

Ces méthodes sont disponibles pour chaque fonction en JavaScript. Elles sont toutes utilisées pour changer la portée de ce qui est égal à ceci à l’intérieur d’une fonction ou d’une méthode. Voyons les exemples suivants.

bind()

Nous allons commencer par un exemple simple d’un objet qui possède une méthode. Avec bind(), nous pouvons indiquer au moteur JavaScript où chercher cette méthode.

const person = {
  name: "Sarah",
  myFunction: function () {
    return(`Bonjour ${this.name}`)
  }
}

function greetPerson() {
  console.log(this.myFunction())
}

const bindPerson = greetPerson.bind(person)

bindPerson();
//Expected Output :- Bonjour Sarah

Les choses à noter ici sont :

• Le site bind() crée bindPerson, et une copie de la fonction greetPerson.
• bindPerson, lorsqu’elle est appelée, aura sa variable this pointant vers l’objet person.

call()

Le site call() appelle une fonction avec une valeur donnée et des arguments fournis individuellement.

call() fait essentiellement la même chose que bind() sauf que call() exécute effectivement la fonction

const Saurabh = {
  name: "Sarah",
  myFunction: function () {
    return(`Bonjour, je m'appelle ${this.name}`)
  }
}

function callingFunction(age, hobby) {
  console.log(`${this.myFunction()}, j'ai ${age} et j'aime ${hobby}`);
}

callingFunction.call(Sarah, 26, 'lire');

// Expected Output :- Bonjour, je m'appelle Sarah, j'ai 26 ans et j'aime lire

apply()

call() et apply() font exactement la même chose, sauf que call() s’attend à ce que tous les paramètres soient passés individuellement, alors que apply() s’attend à ce que tous les paramètres supplémentaires soient passés sous forme de tableau.
Voici donc à quoi ressemblera notre exemple de code existant :

const Saurabh = {
  name: "Sarah",
  myFunction: function () {
    return(`Bonjour, je m'appelle ${this.name}`)
  }
}

function applyingFunction(age, hobby) {
  console.log(`${this.myFunction()}, j'ai ${age} et j'aime 
  ${hobby}`)
}

applyingFunction.apply(Sarah, ``[26, 'Lire']``)

// Expected Output :- Bonjour, je m'appelle Sarah, j'ai 26 ans et j'aime Lire