Javascript callbacks verlieren 'diese'

Ich einen Aussteller, wo verliere ich das 'das' in diesem 'Objekt'. Die Ausgabe des folgenden javascript-Code gibt mir "einige-id" und dann "undefined". Wenn ich "this" innerhalb einer callback-Funktion, der Anwendungsbereich geht von der Objekt-und es nicht verwenden können, 'dieses' mehr. Wie bekomme ich den Rückruf für die Verwendung von 'dies' oder zumindest Zugriff auf das Objekt?

Da ich mehrere Gegenstände, die ich nicht in der Lage, erstellen Sie eine 'statische' wie Lagerung. Bitte helfen Sie dieses javascript n00b 😉

hier ist mein test-code, den Sie verwenden können, um zu reproduzieren mein problem. Was ich möchte ist CheckBox.doSomething() um den Rückgabewert von this.id die sollten übereinstimmen some-id für diesen Testfall. 

function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething();
    $('#some-element').click(this.doSomething);
}

Checkbox.prototype.doSomething = function() {
    alert(this.input_id);
}

var some_box = new CheckBox('some-id');
some_box.doSomething();
$('#some-element').click();

edit: ich kann noch nicht mal das funktioniert, wie ich es will:

function CheckBox2(input_id) {
    this.id = input_id;
    alert(this.id);
}

CheckBox2.prototype.doSomething = function() {
    alert(this.input_id);
}
var some_box = new CheckBox2('some-id');
some_box.doSomething();
InformationsquelleAutor Anyone | 2012-05-26
  1. 11
    function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething = $.proxy( this.doSomething, this );
    $('#some-element').click(this.doSomething);
}

    Den "javascript-äquivalent" dieser ist Function#bind aber das ist nicht in jeder browser-und da es scheint, Sie sind mit jQuery bin ich über das jQuery-äquivalent $.proxy

    • Hmm es scheint, dass ich kann nicht einmal diese Arbeit atm...
    • machen Sie keinen Fehler
    • es gab einige Rechtschreibfehler, check out jsfiddle.net/Qa43n
    • ja das kann ich sehen.. Zu viel javascript für 1 Tag :3 vielen Dank!! Jetzt verstehe ich, warum hatte ich so viele Probleme mit undefinierten Variablen vorhin mit verschiedenen Methoden, Objekte zu erstellen. Vielen Dank für die klaren Beispiele
    InformationsquelleAutor Esailija
  2. 17

    Dein problem mit dieser Zeile: $('#some-element').click(this.doSomething);

    , Warum dies ein problem

    JavaScript-Methoden, die nicht wissen, etwas über das Objekt, das zugewiesen werden soll this, es ist festgelegt, wenn die Methode aufgerufen wird, entweder explizit (mit myFunction.call(obj)) oder implizit (wenn man mit obj.myFunction()).

    Beispiel:

    var x = {
    logThis: function () {
        console.log(this);
    }
};

x.logThis(); //logs x
x.logThis.call(y); //logs y

var func = x.logThis;
func(); //logs window: the fallback for when no value is given for `this`

    In Ihrem Fall, Sie sind vorbei this.doSomething zu jQuery, die dann explizit aufrufen, es mit dem element, auf das geklickt wurde, als der Wert this. Was passiert ist (eine etwas komplexere version) dieses:

    var callback = this.doSomething;
callback.call(anElement, anEvent);

    Die Lösung

    Müssen Sie sicherstellen, dass doSomething heißt mit dem richtigen Wert this. Sie können tun, dass durch das einwickeln von es in eine andere Funktion:

    var cb = this;
$('#some-element').click(function() {
    return cb.doSomething();
});

    jQuery bietet eine proxy - Funktion können Sie dies einfach:

    $('#some-element').click(jQuery.proxy(this.doSomething, this));
    • In diesem Fall some_box.doSomething(); ist schon bei mir, 'undefined', wenn ich es nennen.. Wie ist das möglich? Ich bin nicht mit jedem Rückrufe gibt
    • Es ist ein Schreibfehler in deinem code: In der Konstruktor-Funktion, die Sie beim festlegen der this.id aber in der doSomething Funktion, Sie verweisen this.input_id
    • Zu viel javascript für 1 Tag, hast du Recht 🙁
    • Ich würde mehr Gewicht auf die Verwendung von $.proxy ermöglicht es Ihrer Klasse erweiterbar sein, und halten Sie alle Funktionen ordentlich in Prototyp
    • Ich denke, es ist mehr vorteilhaft, zu verstehen, warum der code nicht funktioniert, anstatt nur zu wissen, eine bestimmte Art und Weise der Lösung des Problems. Wenn du gehst, zu tun tricks, wie this.func = $.proxy(this.func, this) dann sollten Sie wirklich verstehen, wie und warum es funktioniert, dessen bin ich mir sicher, dass Sie tun, aber andere Lesen deine Antwort nicht.
    • Ich wollte nicht zu vergleichen mit meiner Antwort, wollte nur darauf hinweisen, zu sagen, dass die Funktion verbindlich ist lediglich ein einfacher Weg ist eine Untertreibung, denn es hat viele andere Vorteile, wie gut. Egal, deine ist offensichtlich eine bessere Antwort.

    InformationsquelleAutor georgebrock
  3. 3

    Andere haben bereits erklärt, die Ursachen des Problems und wie es zu beheben mit jQuery. Was übrig bleibt, ist, wie man das lösen mit standard-JavaScript. Statt ...

    $('#some-element').click(this.doSomething);

    ... Sie schreiben:

    document.getElementById('some-element').addEventListener('click', this.doSomething.bind(this));

    Dadurch ändert sich der Kontext der this innen doSomething. Sie können auch tun, dass mit anonymen Funktionen - statt ...

    $('#some-element').click(function(event) {
    console.log(this);
});

    ... Sie schreiben:

    document.getElementById('#some-element').addEventListener('click', (function(event) {
    console.log(this);
}).bind(this));

    Wurde sehr nützlich für mich in Projekte mit vielen Rückrufe, z.B. in Node.js (wo Sie nicht zu kümmern, veraltete Browser).

    Edit: getElementById() und addEventListener() statt $(...).click(...).

    InformationsquelleAutor wortwart
Schreibe einen Kommentar