Heim >Web-Frontend >js-Tutorial >Erklärung dazu in Javascript

Erklärung dazu in Javascript

jacklove
jackloveOriginal
2018-06-11 17:37:172049Durchsuche

Javascript weist darauf hin dies

AnfängerJavascript Jeder wird es tun Ich bin sehr verwirrt über jsdieses, wie zum Beispiel das folgende Beispiel :

var a = 'jack';var obj = {a: 'tom',b : function(){ console.log(dies.a);} };var c = obj.b; c();//AusgabeBuchse

Neu bei Personen, die js verwenden verwenden möglicherweise einige andere objektorientierte Sprachen, um , zu verstehen, und sind der Meinung, dass die Ausgabe hier tom sein sollte, aber tatsächlich ist die Ausgabe hier jack , Aber was soll das heißen??Und das Poster werde es Schritt für Schritt analysieren.

Das gemeinsame dies in js weist darauf hin 4 Arten:

1. im Objekt dies zeigt

Was ist

das in einem Objekt? bedeutet, dass die Eigenschaften eines Objekts Funktion sind, und FunktionEs gibt Verwendungen von diesem, Zum Beispiel das folgende Beispiel :

var obj = {a: 'tom',b: Funktion(){ Konsole.log(dies.a) ;}};obj.b();//Die Ausgabe ist tom

In diesem Fall dies zeigt zu Das Objekt, das diese Funktion aufruft , hier ist obj, Ein weiteres Beispiel ist wie folgt: .

var obj = {a: 'tom ',b: Funktion(){ Konsole. log(dies.a) ;},c: {c0: 'rose',c1: Funktion( ){              Konsole.log(dies. c0);} }};obj .c.c1();//AusgabeBuchse

Wenn die Funktion aufgerufen wird, enthält mehrere Objekte, obwohl dies bei dieser Funktion der Fall ist das am häufigsten verwendete Bei Aufruf durch ein äußeres Objekt zeigt this nur auf sein übergeordnetes Objekt

Aber im Eröffnungsbeispiel Warum ?

var a = 'jack'; var obj = {a: 'tom',b: function(){ console.log (dies.ein); }};var c = obj.b;c();//AusgangBuchse

Einen Satz sollte sich jeder merken: dies zeigt auf das Objekt, das es zuletzt aufgerufen hat , ist das hier > c wird der Wert von obj.b, zugewiesen, aber die Variable c hängt immer noch am globalen Fenster-Objekt , also am Ende dieszeigt auf das globale FensterObjekt

2. Funktion direkt aufrufen

Das heißt, verwenden Sie direkt die deklarative oder variable Deklarationsfunktion, rufen Sie die Funktion direkt auf

global

var name = 'tom';var a = Funktion(){var name = 'jack';console.log(dieser.name);};Konsole.log(a());//Ausgabetom

Hiera ist im globalen Fenster in der Anweisung, ist auch äquivalent zu window.a(), wenn es aufgerufen wird, also ist der Sinn von diesem globales FensterObjekt, schließt diesen Fall ein:

var name = 'tom';var a = Funktion(){var Name = 'jack';Funktion b(){       console.log(this.name); }b();//AusgabetomKonsole.log(this.name);};console.log(a() );//Ausgabetom

a und b geben beide tom, Funktionb Wenn es anschließend in der Funktion a aufgerufen wird, zeigt es immer noch auf das globale FensterObjekt , Warum ist das so?? Sie können sich einen Satz , js merken, solange es keinen Einwand dagegen gibt direkt aufrufen Wenn die Funktion , aufgerufen wird, wird der Zeiger von diesem auf das globale Fenster gezeigt Object

ist wie im vorherigen Beispiel, wenn , obect.function() aufgerufen wird, wird auf diesen -Zeiger verwiesen Objekt auf , als

var obj = {a: 'tom',b: function(){ console.log( dies.a);}} ;obj.b();//Ausgabetom

Wie das Beispiel am Anfang ist auch dieser Satz leicht zu verstehen , der Aufruf der Funktion c Es gibt keinen Objektaufruf, daher wird auf das globale Fenster-Objekt verwiesen

var a = 'jack';var obj = {a: 'tom',b: function(){ console.log( dies.a);}};var c = obj.b;c();//AusgangBuchse

3 >dies im Konstruktor zeigt aufDer Konstruktor in Js

ist nicht klar von gewöhnlichen Funktionen getrennt

, Wenn eine gewöhnliche Funktion zum Erstellen einer Objektklasse verwendet wird, wird sie als Konstruktor oder Konstruktor bezeichnet. Damit eine Funktion als echter Konstruktor dienen kann, muss sie die folgenden Bedingungen erfüllen: 1

, innerhalb der Funktion das neue Objekt (

dies ), normalerweise durch Hinzufügen von Eigenschaften und Methoden.

2

, Der Konstruktor kann eine Return-Anweisung enthalten (nicht empfohlen), aber der Rückgabewert muss sein this oder andere Nicht-Objekttypwerte.

Zum Beispiel

:

Funktion Menschen(Name, Alter, Sex){dies.Name = Name; dies.Alter = Alter;dies.Sex= Sex;} var p = neu Menschen('tom',12,'Männlich');Konsole.Protokoll(S.Name + S. Geschlecht + S.Alter); //AusgabetomMännlich12

Das dies hier verweist auf die aktuell erstellten Objekte

Natürlich gibt es bei Konstrukteuren auch Sonderfälle , wie zum Beispiel :

Funktion Personen(Name, Alter, Sex){dies.Name = Name; dies.Alter = Alter;dies.Sex= Sex;zurück {};}var p = neu Menschen('tom',12, 'Männlich');Konsole.Protokoll(p.Name);//Ausgabeundefiniert

Es ist nicht schwer zu verstehen, dass der Konstruktor verlangt, dass der Rückgabewert dies oder ein Nicht-Objekttyp , Also ist das People hier kein Konstruktor im engeren Sinne , hier deklariert p ist eigentlich nur der Rückgabewert der Funktion People, , also ist die endgültige Ausgabe undefiniert, Wenn Sie den Rückgabewert hier in einen Nicht-Objekttyp ändern, das Endergebnis wird anders sein

Funktion Menschen(Name, Alter, Sex){dies.Name = Name; dies.Alter = Alter;dies.Sex= Sex;Rückkehr 1;}var p = neu Menschen('tom',12,'Männlich');Konsole.log(p.Name);//Ausgabe tom

HerePeople ist ein Konstruktor im engeren Sinne, also this zeigt immer noch auf das aktuell erstellte Objekt

4. Anrufen oder AnwendenAufruffunktion

Anrufen und applyDie praktische Verwendung der Funktion ist nahezu gleich, Der erste Parameter ist das Objekt der aufrufenden Funktion, Die folgenden Parameter Sie sind alle Parameter der Funktion , aber Aufruf Die Parameterübergabemethode der Funktion lautet: Übergeben Sie eine unbegrenzte Anzahl von Parametern , d. h. call([thisObject[,arg1 [,arg2 [,...,argn]]]]) Die folgenden Parameter entsprechen jeweils den Funktionen. Die Parameter des Aufrufs, und der erste Parameter der Funktion apply sind die gleichen wie das von call, Der zweite Parameter ist der Array-Typ , apply( [thisObj [,argArray] ])Jedes Element des Arrays entspricht auch den Parametern des jeweiligen Funktionsaufrufs , Bei Verwendung von Aufruf oder apply die Funktion ist , dies in der Methode wird umgeleitet zu aufrufen oder anwendenDer erste Parameter der Funktion, Zum Beispiel:

var a = 1;var b = 2;var c = {a: 3,b: 4};Funktion add(){ console.log(dieses.ein + dieses .b)}add();//Ausgabe3hinzufügen.Anwenden(c); //Ausgabe7

Wenn das erste add aufgerufen wird, gibt es keine Direkter Zugriff auf das Objekt Der Aufruf wird auf das globale Objekt window verwiesen, sodass das Ausgabeergebnis 3, und das erste ist add Die Funktion wird über die Funktion apply aufgerufen, also der Zeiger von dies wird an c geleitet. Das endgültige Ausgabeergebnis ist also 7

Es6Expand:

Das dies der Pfeilfunktion in Es6 zeigt auf dies der Pfeilfunktion in es5 >Es ist anders, Erwähnen wir hier: Da die Pfeilfunktion das nicht tut Wenn Sie dies binden, erfasst es den dies-Wert des Kontexts, in dem es sich befindet (d. h. wo es definiert ist), als seinen eigenen dies Wert, also übergibt die Methode call() / apply() / bind() nur Parameter für die Pfeilfunktion und dafür dies Keine Auswirkungen. Da sich dieses auf lexikalischer Ebene befindet, werden Regeln, die sich auf dieses im strikten Modus beziehen, ignoriert.

1 . Pfeilfunktion im Objekt

var a = { Name: 'tom',b: {c: () => {      console.log(dies ); >a.b.c(); // Wenn Sie dieses im Ausgabefenster verwenden, wird auf das globale Fenster verwiesen Objekt, Wenn Sie also die Pfeilfunktion im Objekt verwenden, wird der Punkt von diesem

auch auf das globale

FensterObjekt.2. Aufrufen von Pfeilfunktionen in Methoden

var test = Funktion(){dieses.Zeit = 1; setTimeout(()=>{ console.log(this.Zeit);}, 100)};var t = neuer Test();//Ausgabe1

Es gibt keinen diesen Zeiger, in der Pfeilfunktion, daher bezieht sich der Zeiger nur auf den Kontext in dem es erstellt wurde. , hier ist der Aufruf des Konstruktors, also verweist test auf dies Für t Objekte , , also dies in Die Pfeilfunktion zeigt auch auf das Rückgabeobjekt

Dieser Artikel stellt dies in Javascript vor. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Detaillierte Erklärung zum Hochladen von Word-, TXT-, Excel-, PPT- und anderen Dateien in das WeChat-Miniprogramm

So verarbeiten Sie vom WeChat-Applet heruntergeladene Dateien über Back-End-PHP

Wir stellen Ihnen 7 Tipps zur Verbesserung der MySQL-Leistung vor

Das obige ist der detaillierte Inhalt vonErklärung dazu in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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