Quelles sont les différences entre les méthodes JavaScript `call()`, `apply()` et `bind()` ?

Comprendre les distinctions entre les méthodes call(), apply() et bind() de Javascript

En Javascript, les méthodes call() et Les méthodes apply() permettent aux développeurs de spécifier le contexte (this) d'une fonction et de transmettre des arguments. Bien que les deux méthodes servent des objectifs similaires, elles diffèrent dans la manière dont les arguments sont fournis à la fonction.

Quand utiliser bind() ?

La méthode bind() se distingue de call() et apply() en vous permettant de créer une nouvelle fonction qui préserve le contexte de la fonction d'origine. Cela s'avère utile lorsqu'il s'agit de rappels ou d'événements asynchrones.

Considérez l'extrait de code suivant :

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

Comme le montre l'exemple ci-dessus, bind() renvoie une nouvelle fonction qui, lorsqu'elle est exécutée ultérieurement , conserve le contexte (this) de la fonction d'origine. Cela facilite la préservation du contexte dans les rappels et les événements asynchrones.

Utilisation dans les événements et les rappels asynchrones

Un cas d'utilisation courant de bind() implique des écouteurs d'événements, comme on le voit dans le code ci-dessous :

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

Dans cet exemple, bind() garantit que la méthode onClick(), lorsqu'elle est déclenchée par un événement, conserve le contexte de l'instance MyObject qui a lancé l'écouteur d'événement. Sans bind(), le contexte de la méthode onClick() ne serait pas l'instance comme prévu.

Une implémentation de bind()

Une interprétation simplifiée de bind( ) peut être implémentée comme suit :

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

Cette implémentation simplifiée crée une nouvelle fonction qui appelle la fonction d'origine avec le contexte (ctx) et les arguments fournis. L'implémentation originale de Function.prototype.bind() est plus complexe et gère des scénarios supplémentaires tels que la transmission d'arguments supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!