Heim > Web-Frontend > js-Tutorial > Detaillierte Analyse der Priorität von JavaScript-Operatoren (mit Beispielen)

Detaillierte Analyse der Priorität von JavaScript-Operatoren (mit Beispielen)

不言
Freigeben: 2018-11-26 15:40:39
nach vorne
2154 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine detaillierte Analyse der JavaScript-Operatorpriorität (mit Beispielen). Ich hoffe, dass er Ihnen weiterhilft.

Nachdem ich seit zwei Jahren JavaScript schreibe, dachte ich, ich würde nicht in die Syntaxfalle tappen, aber tatsächlich wurde ich kürzlich von einem gutaussehenden Mann im Produktentwicklungsteam um ein Gespräch gebeten Ein Problem. Um das Lesen für alle zu erleichtern, habe ich das Modell dieses Problems abstrahiert:

var provider = {
    test: {
        $get: function(){
            return function anonymous(config){
            };
        }
    }
};
var type = "test";
var config = {};
new provider[type].$get()(config);
Nach dem Login kopieren

Wenn die obige Anweisung ausgeführt wird, warum funktioniert das anonymous in der Funktion this zeigen Sie auf window statt auf new und erstellen Sie ein neues Objekt. Das erste, was ich dachte, als ich diese Frage hörte, war: Nani! Wie ist es möglich, dass das new im Konstruktor, der dem this-Operator entspricht, nicht auf eine neu erstellte Objektinstanz verweist? Da ich das Problem damals nicht sorgfältig vom Geschäft abstrahierte, war ich tatsächlich etwas verwirrt. Aber als ich sorgfältig darüber nachdachte, was genau drückte dieser Satz aus?

Denken

Bevor wir über die Bedeutung dieses Ausdrucks sprechen, wollen wir über ein paar kleine Kenntnisse über den neuen Operator sprechen:

Konstruktor-Return

Der JavaScript-Konstruktor kann einen Wert zurückgeben oder nicht, wie zum Beispiel:

function Person(){

}
var person = new Person()
Nach dem Login kopieren

Wir wissen, dass der Konstruktor zu diesem Zeitpunkt die erstellte Instanz zurückgibt Objekt, das heißt, das Objekt, auf das gezeigt wird this im Konstruktor. Wenn Ihr Konstruktor jedoch einen Rückgabewert hat, müssen Sie je nach Situation differenzieren. Wenn ein Wert zurückgegeben wird, der kein Referenztyp ist, handelt es sich tatsächlich um ein neu erstelltes Instanzobjekt. Wenn jedoch ein Wert eines Referenztyps zurückgegeben wird, wird das Referenzobjekt selbst zurückgegeben. Zum Beispiel:

function Person(){
    return function(){}
}
var person = new Person()
typeof person // "function"
Nach dem Login kopieren

In JavaScript sind Funktionen als Bürger erster Klasse im Wesentlichen Referenztypen, daher ist person die zurückgegebene anonyme Funktion.

Zwei Formen neuer Operatoren

Tatsächlich lautet die Syntax in der Beschreibung des neuen Operators von MDN

new constructor[([arguments])]
Nach dem Login kopieren

Sie finden ([Argumente]) Wenn es also keinen Unterschied zwischen new Person() und new Person für einen Konstruktor ohne Parameter gibt, denken wir über eine Frage nach Funktion: Wenn new Person() ausgeführt wird, warum wird dann new Person() anstelle von (new Person)() ausgeführt? Wenn Sie einen meiner vorherigen Artikel gelesen haben, wissen Sie, dass der neue Operator mit Parametern eine höhere Priorität hat als der neue Operator ohne Parameterliste. Daher wird immer der erste anstelle des zweiten ausgeführt.

Detaillierte Analyse der Priorität von JavaScript-Operatoren (mit Beispielen)

Nachdem wir die obigen Schritte verstanden haben, sind wir dem Kern des Problems nahe. Wie analysiert die JavaScript-Engine den Ausdruck

new provider[type].$get()(config);
Nach dem Login kopieren
In:

(new provider[type].$get())(config);
Nach dem Login kopieren

oder

new (provider[type].$get())(config);
Nach dem Login kopieren

Für das erste Formular gibt (newprovider[type].$get()) die anonyme Funktion zurück, also zeigt dies in „anonymous(config) Internal“ an zum Fenster. Im zweiten Modus gibt „provider[type].$get()“ die Funktion „anonymous“ zurück. Wenn also new „anonymous(config)“ ausgeführt wird, zeigt der interne Zeiger „this“ auf die neu erstellte Instanz „this“.

Natürlich können wir der Frage entnehmen, warum dies auf das Fenster und nicht auf das von new erstellte neue Objekt hinweist. Eigentlich wollte der Autor damals die zweite Bedeutung ausdrücken, aber tatsächlich wurde auf die erste Art und Weise ausgedrückt. Warum? Der Grund ist sehr einfach: Bei der ersten Ausführungsmethode analysiert die JavaScript-Engine zuerst den neuen Operator mit einer Parameterliste, während bei der zweiten Methode zuerst der Funktionsaufruf und dann der neue Operator ausgeführt wird Prioritäten Wie Sie dem Ebenendiagramm entnehmen können, hat new mit einer Parameterliste eine höhere Priorität als Funktionsaufrufe und muss daher auf die erste Weise ausgeführt werden.

Eigentlich enthält dieser Artikel nicht viele nützliche Informationen, aber ich habe dennoch zwei Erkenntnisse daraus gewonnen. Erstens habe ich aus dem vorherigen ähnlichen Artikel betont, dass ich solche vagen Ausdrücke vermeiden und mehr Worte verwenden sollte Probleme mit Klammern lassen sich leicht lösen. Einige Schüler schreiben beispielsweise Folgendes:

var str = "Hello" + true ? "World" : "JavaScript";
Nach dem Login kopieren
Was ist dann der Inhalt von str? . Im Wesentlichen ist das Ergebnis der obigen Operation World.

Da der +-Operator eine höhere Priorität hat als der bedingte Operator, erleichtert das Hinzufügen von Klammern zu diesem Zeitpunkt die Lesbarkeit Ihres Codes. Zweitens: Bleiben Sie voller Ehrfurcht vor der Technologie. Die größte Angst ist, dass Sie denken, Sie wüssten alles, aber in Wirklichkeit wissen Sie nichts.


Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Priorität von JavaScript-Operatoren (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage