La méthode bind() en JavaScript

Chaque fois que nous appelons une fonction en JavaScript, la référence de la fonction pointera toujours vers l’objet global, c’est-à-dire l’objet window. C’est bien pour les fonctions normales, mais quand il s’agit de fonctions imbriquées ou de fonctions présentes à l’intérieur d’un objet, cela crée un problème. Car ici, pour appeler les fonctions internes, vous devez utiliser le nom de l’objet ou le nom de la fonction externe pour appeler la fonction interne. Ainsi, si vous souhaitez utiliser une fonction présente dans un objet ou présente dans une autre fonction, vous ne pouvez pas le faire directement car elle pointera vers un contexte global.

Pour résoudre ce problème, vous pouvez lier la fonction interne et transmettre le nouveau contexte à l’intérieur de la fonction de liaison ou déclarer cette fonction à l’extérieur, puis lier la fonction et transmettre le nouveau contexte. Le bind() est une fonction en JavaScript qui vous permettra de changer le contexte global avec un autre contexte où réside la fonction. Ceci est également connu sous le nom d’emprunt de fonction. Comprenons que la méthode bind est utilisée en pratique avec un exemple.

Utilisation de la méthode bind() en JavaScript

Dans le code ci-dessous, nous avons deux objets, amazon et tesla. Chacun de ces objets contient des propriétés telles que name, noOfEmployees et une fonction getInfo(). Ici, on appelle la fonction getInfo(), qui est présente à l’intérieur de l’objet amazon à l’aide du nom d’objet amazon, et à l’intérieur de l’objet tesla à l’aide du nom d’objet tesla.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} amazon.getInfo();


let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} tesla.getInfo();

Production:

The Amazon has 100 employees.
The Tesla has 150 employees.

Si vous exécutez le programme ci-dessus, vous obtiendrez la sortie ci-dessus. Le problème avec cette approche est que la fonction getInfo() fait la même chose que l’impression d’une ligne sur la console. De plus, nous avons déclaré la même fonction dans les deux objets, ce qui conduit à la répétition du code.

Au lieu de cela, ce que nous pouvons faire, c’est déclarer la fonction getInfo() en dehors de l’objet et la supprimer des objets comme indiqué ci-dessous.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
}

let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
}

let getInfo =
    function() {
  console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
}

let amazon_Data = getInfo.bind(amazon);
let tesla_Data = getInfo.bind(tesla);

amazon_Data();
tesla_Data();

Production:

The Amazon has 100 employees.
The Tesla has 150 employees.

Liez ensuite la fonction getInfo() avec les deux objets amazon et tesla en utilisant la fonction bind(). Et puis stockez la référence dans un autre amazon_Data et tesla_Data.

Maintenant, pour appeler les fonctions que vous avez stockées dans amazon_Data et tesla_Data, vous devez mettre un () entre parenthèses. Cela vous donnera le même résultat que nous avons obtenu précédemment. La seule différence ici est que l’approche que nous avons suivie.

Vous pouvez également appeler directement la méthode sans stocker la référence en ajoutant un autre () à la fin de la méthode bind, comme indiqué ci-dessous.

getInfo.bind(amazon)();
getInfo.bind(tesla)();

Ce concept est également appelé emprunt de fonction car la même fonction getInfo() est utilisée ou empruntée par deux objets différents, amazon et tesla.