La méthodebind() crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contextethis la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.

Exemple interactif

const module = {  x: 42,  getX: function () {    return this.x;  },};const unboundGetX = module.getX;console.log(unboundGetX()); // The function gets invoked at the global scope// Expected output: undefinedconst boundGetX = unboundGetX.bind(module);console.log(boundGetX());// Expected output: 42

Syntaxe

let boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])

Paramètres

thisArg

La valeur que l'on doit passer est le paramètrethis de la fonction ciblefunc quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateurnew. Lorsque vous utilisezbind pour créer une fonction (fournie comme un rappel) dans unsetTimeout, toute valeur primitive passée commethisArg est convertie en objet. Si aucun argument n'est fourni dansbind, lethis de cette fonction est traité comme lethisArg de la nouvelle fonction.

arg1, arg2, ...Facultatif

Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation defunc.

Valeur de retour

Une copie de la fonction fournie avec la valeurthis indiquée et les arguments initiaux fournis.

Description

La fonctionbind() crée une nouvellefonction liée, qui est unobjet de fonction exotique (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.

Une fonction liée possède les propriétés internes suivantes :

[[BoundTargetFunction]]

L'objet de fonction enveloppé

[[BoundThis]]

La valeur qui est toujours transmise est la valeurthis lors de l'appel de la fonction enveloppée.

[[BoundArguments]]

Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.

[[Call]]

Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeurthis et d'une liste contenant les arguments passés à la fonction par une expression d'appel.

Lorsqu'une fonction liée est appelée, elle appelle la méthode interne[[Call]] dans[[BoundTargetFunction]], avec les arguments suivantsCall(boundThis, ...args).Là oùboundThis est[[BoundThis]],args est[[BoundArguments]], suivi des arguments passés par l'appel de fonction.

Une fonction liée peut également être construite à l'aide de l'opérateurnew. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fourniethis est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.

Exemples

Créer une fonction liée

La façon la plus simple d'utiliserbind() est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeurthis donnée.

Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur dethis (par exemple en utilisant cette méthode dans uncallback). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :

this.x = 9; // en dehors de tout contexte,// pour un navigateur, this est// l'objet windowvar module = {  x: 81,  getX: function () {    return this.x;  },};module.getX(); // 81var getX = module.getX;getX(); // 9, car ici, this fait référence à l'objet global// On crée une nouvelle fonction à laquelle on lie module en// tant que 'this'var boundGetX = getX.bind(module);boundGetX(); // 81

Fonctions partiellement appliquées

Dans l'exemple suivant, on utilisebind() afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent lethis fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.

function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// Créer une fonction avec un argument prédéfinivar leadingThirtysevenList = list.bind(null, 37);var list2 = leadingThirtysevenList(); // [37]var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]function sommeArguments(arg1, arg2) {  return arg1 + arg2;}var ajouter37 = sommeArguments.bind(null, 37);var resultat = ajouter37(5); // 37 + 5 = 42

Utiliserbind avecsetTimeout

Par défaut à l'intérieur dewindow.setTimeout(), le mot-cléthis sera attribué à l'objetwindow (ou l'objetglobal). Lorsqu'on travaille avec des méthodes de classe utilisantthis qui se réfère à l'instance, on peut lierthis de façon explicite afin d'être certain de manipuler l'instance.

function Fleur() {  this.nbPétales = Math.floor(Math.random() * 12) + 1;}// On déclare floraison après un délai d'une secondeFleur.prototype.floraison = function () {  window.setTimeout(this.declare.bind(this), 1000);};Fleur.prototype.declare = function () {  console.log("Je suis une fleur avec " + this.nbPétales + " pétales !");};var fleur = new Fleur();fleur.floraison();// Après environ 1 seconde, on déclenche la méthode declare

Les fonctions liées utilisées en tant que constructeurs

Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateurnew sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, lethis fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :

function Point(x, y) {  this.x = x;  this.y = y;}Point.prototype.toString = function () {  return this.x + "," + this.y;};var p = new Point(1, 2);p.toString(); // "1,2"var emptyObj = {};var YAxisPoint = Point.bind(emptyObj, 0 /* x */);// non supporté dans le polyfill ci dessous,// fonctionne avec le bind natif :var YAxisPoint = Point.bind(null, 0 /* x */);var axisPoint = new YAxisPoint(5);axisPoint.toString(); //  "0,5"axisPoint instanceof Point; // trueaxisPoint instanceof YAxisPoint; // truenew Point(17, 42) instanceof YAxisPoint; // false

On notera qu'il n'y a rien à faire de particulier pour pouvoir utilisernew sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clénew.

// Cet exemple fonctionne dans votre console JavaScript// ...(sous réserve d'avoir utilisé le code précédent)// Peut toujours être appelé comme une fonction normale// (même si ce n'est généralement pas l'effet )YAxisPoint(13);emptyObj.x + "," + emptyObj.y; // "0,13"

Si on souhaite supporter le cas où la fonction liée d'une fonction liée en utilisant seulementnew, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.

Créer des raccourcis

bind() est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert unthis ayant une certaine valeur.

Si, par exemple, on considère la fonctionArray.prototype.slice et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objetarray, on peut créer un raccourci de cette façon :

var slice = Array.prototype.slice;// ... un peu plus loinslice.apply(arguments);

Avecbind(), il est possible de simplifier cela. Dans l'exemple qui suitslice est une fonction liée à la fonctionapply() deFunction.prototype, etthis défini en tant que fonctionslice() deArray.prototype. Cela signifie que les appels à la méthodeapply() peuvent être éliminés :

// pareil que "slice" dans l'exemple précédentvar unboundSlice = Array.prototype.slice;var slice = Function.prototype.apply.bind(unboundSlice);// ...slice(arguments);

Spécifications

Compatibilité des navigateurs

Voir aussi

• Function.prototype.apply()
• Function.prototype.call()
• Fonctions et portées de fonctions