Umfang in einem $.ajax-callback-Funktion

Wenn ich mit diesem code, warum hat sich der Rahmen geändert für die "doStuff" - Alarm? Gibt es eine Möglichkeit, dass ich sicherstellen kann, dass der Geltungsbereich ist meine Sache und nicht das Window-Objekt?

Hier ist der gleiche code in jsfiddle.

(function ($) {
    var c$ = {};

    c$.TestScope = function () {

        this.doAjax = function (onComplete) {
            var self = this;
            $.ajax({
                url: 'badurl',
                complete: function (data) {
                    alert('doAjax2 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
                    onComplete(data);
                }
            });
            alert('doAjax1 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());  
        };

        this.doStuff = function (data) {
            var self = this;
            alert('doStuff self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
        }

    };

    c$.oTestScope = new c$.TestScope();
    c$.oTestScope.doAjax(c$.oTestScope.doStuff);
})(jQuery);​
InformationsquelleAutor bconrad | 2012-11-02
  1. 5

    Sollten Sie in der Lage sein, um anzugeben, die this Wert, wie der Kontext, in Ihrer $.ajax() Parameter:

    var c$ = {};

c$.TestScope = function() {

    this.doAjax = function(onComplete) {

        alert('doAjax1 this === c$.oTestScope: ' + (this === c$.oTestScope).toString());

        $.ajax({
            url: 'badurl',
            context: this,
            complete: function(data) {
                alert('doAjax2 this === c$.oTestScope: ' + (this === c$.oTestScope).toString());
                onComplete.call(this, data);
            }
        });
    };

    this.doStuff = function(data) {
        alert('doStuff this === c$.oTestScope: ' + (this === c$.oTestScope).toString());
    }

};

c$.oTestScope = new c$.TestScope();
c$.oTestScope.doAjax(c$.oTestScope.doStuff);

    Bearbeiten machte ich einen fiddle für diese und überprüft, dass es richtig funktioniert. Es gibt kein Gefummel mit extra self parameter oder mit dreck um sich mit Verschlüssen halten Sie Ihre Variablen.

    Teil von dem was Sie fehlte, war eine Berufung onComplete.call(this, data) aufrufen doStuff().

    • Die Kontext-option scheint nur zu arbeiten, wenn Sie die Funktion direkt aufrufen "Kontext:onComplete". Ich sehe keinen Weg, Sie können eine Standard-Funktionalität als auch die callback-Funktionalität mit dieser Methode. Hier ist das jsfiddle mit der Kontext-option jsfiddle.net/RW4Ge/2.
    • Ich weiß, Sie haben bereits entschieden, Ihre Lösung, aber bitte geben Sie diese revision einen Blick. Es sauber behebt Ihr problem mit this ohne zusätzliche Verschlüsse oder temporäre Variablen.
    • Ich Schätze Ihre Hilfe, und vielleicht bin ich etwas fehlt, aber dein Beispiel ist nicht mit der onComplete Rückruf. Es ruft doStuff direkt. Wenn Sie ändern this.doStuff(data) zu onComplete(data), (this === c$.oTestScope) false zurück. Ich bin damit einverstanden, dass Ihre syntax ist viel sauberer. Wenn ich kann, dass es funktioniert werde ich es nutzen.
    • Wenn Sie brauchen, um den übergebenen Funktion, dann Sie verwenden möchten onComplete.call(this, data); das ist das gleiche wie this.doStuff(), außer dass Sie verwenden können, die übergebene Funktion egal, was es ist.
    • Perfekt. Das tut es. Vielen Dank für kleben mit mir.
    • Aktualisierten code und Erklärung zu verwenden onComplete.call()

    InformationsquelleAutor slashingweapon
  2. 3

    Habe ich verändert den code übergeben Sie einen Verweis auf this auf der doStuff () - code.

    (function ($) {
    var c$ = {};

    c$.TestScope = function () {

        this.doAjax = function (onComplete) {
            var self = this;
            $.ajax({
                url: 'badurl',
                complete: function (data) {
                    alert('doAjax2 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
                    onComplete(data,self);
                }
            });
            alert('doAjax1 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());  
        };

        this.doStuff = function (data,thisRef) {
            var self = thisRef;
            alert('doStuff self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
        }

    };

    c$.oTestScope = new c$.TestScope();
    c$.oTestScope.doAjax(c$.oTestScope.doStuff);
})(jQuery);​
    • Das ist gut so. Das einzige problem hatte ich mit es ist, dass ich immer hinzufügen "thisRef" - parameter auf "doStuff". Ich habe, um dieses, indem Sie fügte hinzu, dass ein optionaler parameter und Einstellung "selbst" zu "dieser", falls diese option nicht angegeben wurde. Hier ist meine aktualisierte jsfiddle jsfiddle.net/RW4Ge/3.
    InformationsquelleAutor Jimmery
Schreibe einen Kommentar