var self = ceci?

En utilisant des méthodes d'instance comme pour les callbacks gestionnaires d'événements change la portée de thisde « Mon exemple » à « Tout ce que vient d' appeler la fonction de rappel » . Donc mon code ressemble à ceci

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

Cela fonctionne, mais est-ce la meilleure façon de procéder? Cela me semble étrange.

Cette question n'est pas spécifique à jQuery, mais spécifique à JavaScript en général. Le problème central est de savoir comment «canaliser» une variable dans les fonctions intégrées. Voici l'exemple:

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

Cette technique repose sur l'utilisation d'une fermeture. Mais cela ne fonctionne pas thiscar il thiss'agit d'une pseudo variable qui peut changer dynamiquement d'une portée à l'autre:

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

Que pouvons-nous faire? Assignez-le à une variable et utilisez-le via l'alias:

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

thisn'est pas unique à cet égard: argumentsest l'autre pseudo variable qui devrait être traitée de la même manière - par aliasing.

Ouais, cela semble être une norme courante. Certains codeurs utilisent eux-mêmes, d'autres m'utilisent. Il est utilisé comme référence à l'objet «réel» par opposition à l'événement.

C'est quelque chose qui m'a pris un peu de temps pour vraiment comprendre, cela semble étrange au début.

Je fais généralement cela juste en haut de mon objet (excusez mon code de démonstration - c'est plus conceptuel qu'autre chose et n'est pas une leçon sur une excellente technique de codage):

function MyObject(){
  var me = this;

  //Events
  Click = onClick; //Allows user to override onClick event with their own

  //Event Handlers
  onClick = function(args){
    me.MyProperty = args; //Reference me, referencing this refers to onClick
    ...
    //Do other stuff
  }
}

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

edit: malgré, les fonctions imbriquées dans un objet prennent l'objet de fenêtre globale plutôt que l'objet environnant.

Si vous faites ES2015 ou tapez script et ES5, vous pouvez utiliser les fonctions fléchées dans votre code et vous ne faites pas face à cette erreur et cela fait référence à la portée souhaitée dans votre instance.

this.name = 'test'
myObject.doSomething(data => {
  console.log(this.name)  // this should print out 'test'
});

Une solution à cela est de lier tous vos rappels à votre objet avec la bindméthode javascript .

Vous pouvez le faire avec une méthode nommée,

function MyNamedMethod() {
  // You can now call methods on "this" here 
}

doCallBack(MyNamedMethod.bind(this)); 

Ou avec un rappel anonyme

doCallBack(function () {
  // You can now call methods on "this" here
}.bind(this));

Faire cela au lieu de recourir à var self = thismontre que vous comprenez comment la liaison de thisse comporte en javascript et ne repose pas sur une référence de fermeture.

En outre, l'opérateur de grosse flèche dans ES6 est fondamentalement le même qu'un appel .bind(this)à une fonction anonyme:

doCallback( () => {
  // You can reference "this" here now
});

Je n'ai pas utilisé jQuery, mais dans une bibliothèque comme Prototype, vous pouvez lier des fonctions à une portée spécifique. Donc, avec cela à l'esprit, votre code ressemblerait à ceci:

 $('#foobar').ready('click', this.doSomething.bind(this));

La méthode bind renvoie une nouvelle fonction qui appelle la méthode d'origine avec la portée que vous avez spécifiée.

En ajoutant simplement à cela, dans ES6 en raison des fonctions de flèche, vous ne devriez pas avoir besoin de le faire car elles capturent la thisvaleur.

Je pense que cela dépend en fait de ce que vous allez faire dans votre doSomethingfonction. Si vous allez accéder aux MyObjectpropriétés à l'aide de ce mot-clé, vous devez l'utiliser. Mais je pense que le fragment de code suivant fonctionnera également si vous ne faites rien de spécial en utilisant les object(MyObject)propriétés.

function doSomething(){
  .........
}

$("#foobar").ready('click', function(){

});