Bereichsklärung in Javascript

Question

Einfache Frage. Warum setzen wir that = this? Wenn wir es nicht tun, befinden wir uns im globalen Scope... aber warum?

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            // this bezieht sich nun auf den globalen Scope.... warum?
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

Answer 1

Schreiben that = this ändert nicht den Bereich. Die Art und Weise, wie die anonyme Funktion aufgerufen wird, führt immer dazu, dass this das globale Objekt ist, denn genau das soll laut Spezifikation passieren. Die Verwendung von that = this ist nur ein Workaround.

Sie können this immer auf myObj zeigen lassen, indem Sie Function.call verwenden:

var myObj = {

    specialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb.apply(this);
    },

    render: function () {
        this.getAsyncData(function () {
            this.specialFunction();
        });
    }
};

und/oder indem Sie Function.bind verwenden:

var myObj = {

    specialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        function callback() {
            this.specialFunction();
        }

        this.getAsyncData(callback.bind(this));
    }
};

---

* Es sei denn, Sie befinden sich im Strict-Modus, in dem Fall ist this undefined.

Answer 2

BEARBEITEN: In JavaScript hängt der "this" Kontext davon ab, wie Ihre Funktion aufgerufen wird, Beispiel:

function helloWorld()
{
    console.log(this);
}

Und hier zwei Möglichkeiten, diese Funktion aufzurufen:

new helloWorld(); beachten Sie, dass, wenn Sie Ihre Funktion auf diese Weise aufrufen, der Kontext von "this" der Kontext der Funktion + Prototyp sein wird, so wird Ihre Konsole dies anzeigen: helloWorld {}

helloWorld(); wenn Sie Ihre Funktion ohne "new" aufrufen, wird der Kontext von "this" global (Fenster) sein, so wird Ihre Konsole dies anzeigen: Fenster about:home

Also, mit dieser kurzen Erklärung werde ich jetzt versuchen zu erklären, warum Sie manchmal self/that verwenden müssen...

Stellen Sie sich vor, Sie möchten this.name innerhalb der Funktion this.hello verwenden. Wie ich bereits sagte, hängt der Kontext von "this" davon ab, wie Ihre Funktion aufgerufen wird. Wenn Sie also sicherstellen möchten, dass this.name innerhalb der Funktion this.hello auf this.name außerhalb verweist, ist es ratsam, self/that zu verwenden, um zu vermeiden, was unten passiert

function helloWorld(){
             var self = this; //oder that = this
             this.name = "IhrName" 
             this.hello = function(){
                 console.log(this); //der Kontext von "this" wird hier sein: "hello {}" 
                 return this.name; //undefiniert, weil Sie kein name Attribut innerhalb der hello Funktion haben
             }
             new this.hello(); //achten Sie darauf, wie hello hier aufgerufen wird... 

}

var test = new helloWorld(); 

Und hier eine gute Erklärung zum Kontext x Bereich: http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Answer 3

Schauen Sie sich das Schlüsselwort this in JavaScript an und wie es funktioniert. Ich bin mir sicher, dass wir alle auf dieses Problem gestoßen sind:

 $("myLink").on("click", function() {
    console.log(this); //zeigt auf myLink (wie erwartet)
    $.ajax({
        //ajax Einrichtung
        success: function() {
            console.log(this); //zeigt auf das globale Objekt. Huh?
        }
    });
});

this ist eine Variable, die automatisch für Sie festgelegt wird, wenn eine Funktion aufgerufen wird. Der Wert, den es erhält, hängt davon ab, wie eine Funktion aufgerufen wird. In JavaScript haben wir einige Hauptmethoden, Funktionen aufzurufen. Ich werde heute nicht über alle sprechen, sondern nur über die drei gängigsten Methoden, die die meisten Menschen verwenden; entweder wenn eine Funktion als Methode aufgerufen wird, oder für sich allein, oder als Ereignisbehandler. Je nachdem, wie eine Funktion aufgerufen wird, wird this unterschiedlich gesetzt:

function foo() {
    console.log(this); //globales Objekt
};

myapp = {};
myapp.foo = function() {
    console.log(this); //zeigt auf das myapp-Objekt
}

var link = document.getElementById("myId");
link.addEventListener("click", function() {
    console.log(this); //zeigt auf den Link
}, false);

Wenn Sie $("myLink").on("click", function() {}) machen, bedeutet dies, dass die Funktion ausgelöst wird, wenn auf das Element geklickt wird. Aber diese Funktion ist als Ereignisbehandler gebunden, daher wird this auf die Referenz zum DOM-Element myLink gesetzt. Die success-Methode, die Sie im Ajax-Aufruf definieren, ist einfach eine normale Funktion, und daher wenn sie aufgerufen wird, wird this auf das globale Objekt gesetzt, so wie es bei jeder Funktion geschieht, die kein Ereignisbehandler oder eine Objektmethode ist.

$("myLink").on("click", function() {
    console.log(this); //zeigt auf myLink (wie erwartet)
    var _this = this;  //Referenz speichern
    $.ajax({
        //ajax Einrichtung
        success: function() {
            console.log(this); //zeigt auf das globale Objekt. Huh?
            console.log(_this); //besser!
        }
    });
});

Quelle: http://tinyurl.com/melbl92