var self = das?

Durch die Verwendung von Instanzmethoden als Rückruf für Ereignishandler wird der Bereich thisvon "Meine Instanz" in "Wie auch immer der Rückruf genannt wird" geändert . Mein Code sieht also so aus

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

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

Es funktioniert, aber ist das der beste Weg, es zu tun? Es sieht seltsam für mich aus.

Diese Frage ist nicht spezifisch für jQuery, sondern allgemein für JavaScript. Das Kernproblem besteht darin, wie eine Variable in eingebetteten Funktionen "kanalisiert" wird. Dies ist das Beispiel:

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!
  }
  ...
};

Diese Technik beruht auf der Verwendung eines Verschlusses. Es funktioniert jedoch nicht, thisda thises sich um eine Pseudovariable handelt, die sich dynamisch von Bereich zu Bereich ändern kann:

// 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!
  }
  ...
};

Was können wir tun? Weisen Sie es einer Variablen zu und verwenden Sie es über den 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!
  }
  ...
};

thisist in dieser Hinsicht nicht eindeutig: argumentsist die andere Pseudovariable, die auf die gleiche Weise behandelt werden sollte - durch Aliasing.

Ja, dies scheint ein allgemeiner Standard zu sein. Einige Programmierer benutzen sich selbst, andere benutzen mich. Es wird als Referenz zurück auf das "echte" Objekt im Gegensatz zum Ereignis verwendet.

Es hat etwas gedauert, bis ich es wirklich verstanden habe. Zuerst sieht es seltsam aus.

Normalerweise mache ich das ganz oben auf meinem Objekt (entschuldigen Sie meinen Demo-Code - er ist konzeptioneller als alles andere und keine Lektion in exzellenter Codiertechnik):

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: Trotzdem übernehmen verschachtelte Funktionen innerhalb eines Objekts eher das globale Fensterobjekt als das umgebende Objekt.

Wenn Sie ES2015 oder Typenskript und ES5 ausführen, können Sie Pfeilfunktionen in Ihrem Code verwenden, und dieser Fehler tritt nicht auf. Dies bezieht sich auf den gewünschten Bereich in Ihrer Instanz.

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

Eine Lösung hierfür besteht darin, Ihren gesamten Rückruf mit der bindMethode von Javascript an Ihr Objekt zu binden .

Sie können dies mit einer benannten Methode tun.

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

doCallBack(MyNamedMethod.bind(this)); 

Oder mit einem anonymen Rückruf

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

Wenn Sie dies tun, anstatt auf var self = thisetwas zurückzugreifen, verstehen Sie, wie sich die Bindung von thisin Javascript verhält und nicht auf eine Abschlussreferenz angewiesen ist.

Außerdem ist der Fettpfeiloperator in ES6 im Grunde derselbe wie ein Aufruf .bind(this)einer anonymen Funktion:

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

Ich habe jQuery nicht verwendet, aber in einer Bibliothek wie Prototype können Sie Funktionen an einen bestimmten Bereich binden. In diesem Sinne würde Ihr Code folgendermaßen aussehen:

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

Die bind-Methode gibt eine neue Funktion zurück, die die ursprüngliche Methode mit dem von Ihnen angegebenen Bereich aufruft.

Fügen Sie einfach hinzu, dass Sie dies in ES6 aufgrund von Pfeilfunktionen nicht tun müssen, da diese den thisWert erfassen .

Ich denke, es hängt tatsächlich davon ab, was Sie in Ihrer doSomethingFunktion tun werden. Wenn Sie MyObjectmit diesem Schlüsselwort auf Eigenschaften zugreifen möchten , müssen Sie dies verwenden. Ich denke aber, dass das folgende Codefragment auch funktioniert, wenn Sie keine besonderen Dinge mit object(MyObject)Eigenschaften tun .

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

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

});