Wie funktioniert keyword "this" innerhalb der Funktion?

Ausgeschlachtet aus einem anderen post von mir, hier ist mehr, als Sie jemals wissen wollten über diese.

Bevor ich beginne, hier ist die wichtigste Sache im Auge zu behalten um Javascript, und zu wiederholen, selbst wenn es keinen Sinn ergibt. Javascript muss nicht Klassen (ES6 class ist syntaktischer Zucker). Wenn etwas aussieht wie eine Klasse, es ist ein trick. Javascript hat Objekte und Funktionen. (das ist nicht 100% korrekt, Funktionen Objekte sind, aber es kann manchmal hilfreich sein, zu denken, Sie als getrennte Dinge)

Den diese variable angeschlossen ist, um Funktionen. Wann immer Sie eine Funktion aufzurufen diese gegeben einen bestimmten Wert, je nachdem, wie Sie zum aufrufen der Funktion. Dies wird Häufig als die Aufruf-Muster.

Gibt es vier Möglichkeiten zum aufrufen von Funktionen in javascript. Sie rufen die Funktion als Methode, als Funktion, als Konstruktor, und mit gelten.

Als Methode

Eine Methode ist eine Funktion, die einem Objekt zugewiesen

var foo = {};
foo.someMethod = function(){
    alert(this);
}

Beim Aufruf als Methode diese gebunden wird das Objekt durch die Funktion/Methode ein Teil ist. In diesem Beispiel wird an foo.

Als Funktion

Wenn Sie eine stand-alone-Funktion, die diese variable gebunden werden, um die "global" - Objekt, fast immer die Fenster Objekt im Zusammenhang mit einem browser.

 var foo = function(){
    alert(this);
 }
 foo();

Das kann was werden ' s stolpern, die Sie bis, aber fühlen Sie sich nicht schlecht. Viele Menschen halten dies für eine schlechte design-Entscheidung. Da wird ein callback aufgerufen wird, als Funktion und nicht als Methode, das ist, warum Sie sehen, was scheint widersprüchlich Verhalten.

Viele Menschen bekommen, um das problem von etwas wie, ähm, das

var foo = {};
foo.someMethod = function (){
    var that=this;
    function bar(){
        alert(that);
    }
}

Definieren Sie eine variable , dass, die Punkte zu diese. Verschluss (ein Thema, alle eigenen) hält , dass herum, so, wenn Sie anrufen, eine bar, einen Rückruf, es hat immer noch eine Referenz.

HINWEIS: In use strict - Modus, wenn als Funktion this ist nicht verpflichtet, zu global. (Es ist undefined).

Wie ein Konstruktor,

Können Sie auch aufrufen, eine Funktion als Konstruktor. Auf der Grundlage der Namenskonvention, die Sie verwenden (TestObject) diese auch kann das sein, was du tust und was stolpern, die Sie bis.

Rufen Sie eine Funktion als Konstruktor mit dem Schlüsselwort new.

function Foo(){
    this.confusing = 'hell yeah';
}
var myObject = new Foo();

Beim Aufruf als Konstruktor wird ein neues Objekt erstellt werden, und diese wird an das Objekt. Wieder, wenn Sie innere Funktionen und Sie sind als callbacks, werden Sie aufrufen, Sie als Funktionen, und diese wird an das Globale Objekt. Verwenden, var, = den trick/Muster.

Einige Leute denken, dass der Konstruktor/new-Schlüsselwort war ein Knochen geworfen, um Java/traditionelle OOP-Programmierern als ein Weg, um etwas ähnliches wie Klassen.

Mit der Apply-Methode

Schließlich verfügt jede Funktion über eine Methode (ja, auch Funktionen sind Objekte in Javascript) mit der Bezeichnung "übernehmen". Bewerben können Sie bestimmen, was der Wert von diese werden, und können Sie auch ein array übergeben von Argumenten. Hier ist ein nutzloses Beispiel.

function foo(a,b){
    alert(a);
    alert(b);
    alert(this);
}
var args = ['ah','be'];
foo.apply('omg',args);

InformationsquelleAutor Alan Storm

Ist das Verhalten definiert? Ist es
cross-browser-sicher?

Ja. Und ja.

Gibt es irgendeine Begründung, warum
es ist wie es ist...

Sinne des this ist ziemlich einfach ableiten:

1. Wenn this verwendet wird, in einem Konstruktor-Funktion, und die Funktion aufgerufen wurde, mit der new Schlüsselwort this bezieht sich auf das Objekt, das erstellt wird. this weiterhin bedeuten, das Objekt auch in der öffentlichen Methoden.
2. Wenn this wird verwendet, überall sonst, einschließlich verschachtelter geschützt Funktionen, es bezieht sich auf die Globale Reichweite (was in dem Fall der browser ist das Fenster-Objekt).

Zweiten Fall ist offensichtlich ein Konstruktionsfehler, aber es ist ziemlich leicht zu umgehen, indem man mit Schließungen.

InformationsquelleAutor Rakesh Pai

Fand ich ein nettes tutorial über die ECMAScript diese

Einem dieser Wert ist ein spezielles Objekt, das im Zusammenhang mit der Ausführung
Kontext. Daher kann es benannt werden, die als Kontext-Objekt (d.h. ein
Objekt, in welchem Kontext die Ausführung Kontext aktiviert).

Jedes Objekt kann verwendet werden, wie dies dem Wert des Kontextes.

einem dieser Wert ist eine Eigenschaft, die den Kontext für die Ausführung, aber nicht ein
Eigenschaft der Variablen-Objekt.

Diese Funktion ist sehr wichtig, denn im Gegensatz zu Variablen, die diesen Wert nie beteiligt sich an identifier resolution process. I. e. beim Zugriff auf diese in einem code, dessen Wert direkt aus der Ausführungskontext und ohne scope-chain-lookup. Der Wert ist bestimmt nur einmal beim betreten der Kontext.

Im globalen Kontext, ein diesen Wert, wird das Globale Objekt selbst (das heißt, dieser Wert hier gleich variable-Objekt)

Im Falle einer Funktion, Kontext, wird dieser Wert in jede einzelne Funktion aufrufen, können unterschiedlich sein

Referenz Javascript-the-core und Kapitel-3-diese

InformationsquelleAutor Damodaran