JavaScript-Grundlagen dieser Verweisung

JavaScript-Grundlagen dieser Verweisung

Dies ist in JavaScript ebenfalls eine magische Sache. In der objektorientierten Programmierung (wie Java) stellt es eine aktuelle Objektreferenz dar. In JavaScript ist dies jedoch nicht festgelegt, sondern ändert sich mit der Ausführungsumgebung.

Das

Schauen wir uns wie üblich zuerst den Code an:

Verfahren

Funktionstest () {
    konsole.log(dies);
}

Bildbeschreibung hier einfügen

Im Objekt

Funktionstest () {
    konsole.log(dies);
}

Bildbeschreibung hier einfügen

In einer Methode bezieht sich dies auf das Objekt, zu dem die Methode gehört. Da es sich bei der ersten um eine Methode im Fenster handelt, wird das Fenster gedruckt, und die Eat-Methode ist eine Person-Methode, sodass das Objekt Person gedruckt wird.

Man kann also erkennen, dass die alleinige Verwendung von „this“ in der Konsole das globale Objekt darstellt.

Bildbeschreibung hier einfügen

Versteckt dies

In Objekten können Sie diese vorab einzeln deklarieren:

var Person1 = {
    Name: „Zhang San“,
    Alter:18
}
var Person2 = {
    Name:"Li Si",
    Alter:19
}

Das wäre sehr mühsam zu schreiben, Sie können also wie folgt das Konzept der Java-Klassen lernen:

var Person = Funktion (Name, Alter) {
    dieser.name=Name,
    this.age=Alter
       
}
var Person1=new Person("Person",18);
var Person2=neue Person("Li Si",19);

Bildbeschreibung hier einfügen

Tatsächlich ist in new ein return this versteckt. Wenn Sie new nicht verwenden, werden Sie feststellen, dass das neu erstellte Objekt nicht zurückgegeben wird.

Bildbeschreibung hier einfügen

Jetzt vervollständigen wir es:

var Person = Funktion (Name, Alter) {
    dieser.name=Name,
    this.age=Alter
    gib dies zurück;
}
var Person1=new Person("Person",18);
var Person2=neue Person("Li Si",19);

Bildbeschreibung hier einfügen

Auf diese Weise können Sie den Effekt sogar vortäuschen:

var Person = Funktion (Name, Alter) {
    var das={};
    dieser.name=Name,
    that.age=Alter
    gib das zurück;
}
var Person1=new Person("Person",18);
var Person2=neue Person("Li Si",19);

Bildbeschreibung hier einfügen

Strikter Modus

Dies hat ein magisches Verhalten im strikten und nicht strikten Modus

Funktion test() {
  gib dies zurück;
}

# Wenn „use strict“ vor js hinzugefügt wird, bedeutet dies den strikten Modus „use strict“;
Funktion test() {
  gib dies zurück;
}

Bildbeschreibung hier einfügen

Dies zeigt, dass in einer Funktion im nicht strikten Modus der Besitzer der Funktion standardmäßig daran gebunden ist. Daher kann der globale Wert gedruckt werden, aber im strengen Modus ist die Funktion nicht daran gebunden, sodass dies nicht definiert ist.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung dieser Zeigerfunktion in JS
  • Detaillierte Erklärung dieser Referenz und benutzerdefinierter Eigenschaften in JavaScript
  • Detaillierte Erklärung des this-Zeigeproblems in JavaScript
  • Detaillierte Erklärung der Funktionsklassifizierung und Beispiele für diese Zeigerfunktion in Javascript
  • Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion
  • Detaillierte Erklärung des this-Pointing-Problems von JavaScript-Prototypobjekten

<<:  Lösung für das Textüberlaufproblem auf CSS-Flex-Basis

>>:  Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung auf das Erlernen der Front-End-Leistungsoptimierung.

Artikel empfehlen

So erhalten Sie den tatsächlichen Pfad des aktuellen Skripts in Linux

1. Holen Sie sich den tatsächlichen Pfad des aktu...

Tutorial zur Installation von Odoo14 aus dem Quellcode unter Ubuntu 18.04

Inhaltsverzeichnis Hintergrund dieser Serie Überb...

html Option deaktivieren auswählen auswählen deaktivieren Option Beispiel

Code kopieren Der Code lautet wie folgt: <Ausw...

jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Cod...

Miniprogramm Benutzerdefinierte TabBar-Komponentenkapselung

In diesem Artikelbeispiel wird der spezifische Co...

Vue verwendet Element-UI, um die Menünavigation zu implementieren

In diesem Artikel wird der spezifische Code von V...

Prinzipien der MySQL-Datentypoptimierung

MySQL unterstützt viele Datentypen und die Auswah...

Zwei Lösungen für das 404-Problem beim Aktualisieren des Vue-Paket-Upload-Servers

1: Nginx-Serverlösung, ändern Sie die .conf-Konfi...

So passen Sie die Höhe eines Divs an die Höhe des Browsers an

Diese alte Frage hat unzählige Frontend-Entwickler...

Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7

1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....