JavaScript-Grundlagenobjekte

JavaScript-Grundlagenobjekte

1. Gegenstand

1.1 Was ist ein Objekt?

In JavaScript ist ein Objekt eine ungeordnete Sammlung verwandter Eigenschaften und Methoden. Alles ist ein Objekt, z. B. Zeichenfolgen, Zahlen, Arrays, Funktionen usw.

Objekte bestehen aus Eigenschaften und Methoden

  • Attribut: Die Eigenschaften eines Objekts, dargestellt durch Attribute im Objekt
  • Methode: Das Verhalten von Dingen, dargestellt durch Methoden in Objekten

1.2 Warum brauchen wir Objekte?

Zum Speichern eines Werts verwenden Sie eine Variable, zum Speichern einer Reihe von Werten verwenden Sie ein Array. Was wäre, wenn Sie die vollständigen Informationen einer Person speichern möchten?

So können Sie beispielsweise die persönlichen Daten von Zhang San in einem Array speichern:

var arr = ['Neu','Neu',123,156];

Es ist klarer, die persönlichen Daten von Zhang San in Form eines Objekts zu speichern.

2. Drei Möglichkeiten zum Erstellen von Objekten

2.1 Erstellen von Objekten mit Objektliteralen {}

Objektliteral: { } enthält die Eigenschaften und Methoden des (Objekts), das dieses bestimmte Ding ausdrückt.

    <Skript>
        //Verwenden Sie Objektliterale, um Objekte zu erstellen {}
        var obj = {}; //Erstellt ein leeres Objekt var obj = {
            uname: 'Name',
            Alter: 18,
            Geschlecht: 'männlich',
            sayhi: Funktion () {
                console.log('hallo');
            }
        };
        //(1) Die darin enthaltenen Eigenschaften bzw. Methoden liegen in Form von Schlüssel-Wert-Paaren vor: Schlüsseleigenschaftsname: Werteigenschaftswert //(2) Mehrere Eigenschaften oder Methoden werden durch Kommas getrennt //(3) Auf die Methode folgt eine anonyme Funktion //2. Verwenden von Objekten //(1) Um die Eigenschaften eines Objekts aufzurufen, verwenden wir die Methode object.property name console.log(obj.uname);
        //(2) Rufen Sie das Attribut Objektname ['Attributname'] des Objekts auf.
        console.log(Objekt['Alter']);
        //(3) Rufe die Methode des Objekts auf Objektname.Methodenname obj.sayhi();
    </Skript>

2.2 Erstellen eines Objekts mit new Object

  // //Verwenden Sie „new Object“, um ein Objekt zu erstellen. var obj = new Object(); //Erstellen Sie ein leeres Objekt. obj.uname = '张三';
        obj.Alter = 18;
        obj.sex = "männlich";
        obj.sayhi = Funktion () {
            console.log('hallo~');
        }
        console.log(obj['uname']);
        konsole.log(Objekt.Geschlecht);
        obj.sayhi();
        //(1) Wir verwenden das Gleichheitszeichen = Zuweisungsmethode um Objekteigenschaften und -methoden hinzuzufügen //(2) Verwenden Sie ; zwischen jeder Eigenschaft und Methode bis zum Ende //Case var Object = new Object();
        Objekt.uname = "Naruto";
        Objekt.Geschlecht = "männlich";
        Objekt.Alter = 19;
        Objekt.Fähigkeit = Funktion () {
            console.log('Schattenklontechnik');
        }
        console.log(Objekt.uname);
        Objekt.Fähigkeit();

2.3 Erstellen von Objekten mit Konstruktoren

 //Warum müssen wir einen Konstruktor verwenden? //Weil unsere ersten beiden Methoden zum Erstellen von Objekten jeweils nur ein Objekt erstellen können. //Da wir jeweils ein Objekt erstellen, sind viele der Eigenschaften und Methoden darin gleich. Verwenden Sie Funktionen, um Code wiederzuverwenden. Diese Funktion wird als Konstruktor bezeichnet. //Der Konstruktor kapselt das Objekt. //Der Konstruktor abstrahiert einige der gleichen Eigenschaften und Methoden in unserem Objekt und kapselt sie in der Funktion.

Konstruktor : Eine spezielle Funktion, die hauptsächlich zum Initialisieren von Objekten verwendet wird, d. h. zum Zuweisen von Anfangswerten zu Objektelementvariablen. Sie wird immer mit dem neuen Operator verwendet. Wir können einige allgemeine Eigenschaften und Methoden im Objekt abstrahieren und sie in diese Funktion kapseln.

    <Skript>
 
        //Verwende den Konstruktor um ein Objekt zu erstellen //Konstruktorsyntax // function constructor name() {
        // diese.Eigenschaft = Wert;
        // diese.Methode = Funktion() {}
        // }
        // neuer Konstruktorname();
 
        Funktion Star(Name, Alter, Geschlecht) {
            dieser.name = uname;
            dieses.Alter = Alter;
            dies.Geschlecht = Geschlecht;
            this.sing = Funktion (Lied) {
                console.log(Lied);
            }
        }
        var ldh = new Star('Andy Lau', 18, 'Männlich'); //Der Funktionsaufruf gibt ein Objekt zurück console.log(typeof ldh);
        Konsole.log(ldh.name);
        console.log(ldh['Geschlecht']);
        ldh.sing('Eisregen');
        var zxy = new Star('Jacky Cheung', 36, 'Männlich');
        Konsole.log(zxy.name);
        console.log(zxy['Geschlecht']);
        zxy.sing('Li Xianglan');
            //1. Der erste Buchstabe des Konstruktornamens sollte groß geschrieben werden //2. Unser Konstruktor kann Ergebnisse ohne return zurückgeben //3. Wir müssen new verwenden, um den Konstruktor aufzurufen
            //4. Wir müssen nur die neue Srart()-Funktion aufrufen, um ein Objekt zu erstellen. //5. Unseren Eigenschaften und Methoden muss dieses vorangestellt werden.
   </Skript>

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:
  • Eine detaillierte Einführung in primitive Werte und Wrapper-Objekte in JavaScript
  • Analyse von JavaScript-Grundwerten und Objektreferenzbeispielen
  • Einführung in integrierte JavaScript-Objekte
  • Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte

<<:  Grundlegende Operationen an unsichtbaren Spalten in MySQL 8.0

>>:  Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Artikel empfehlen

...

Detaillierte Erklärung des Responsive-Prinzips von Vue3

Inhaltsverzeichnis Überprüfung der responsiven Pr...

So implementieren Sie den Vue-Timer

In diesem Artikelbeispiel wird der spezifische Co...

So verstehen Sie das Ref-Attribut von React genau

Inhaltsverzeichnis Überblick 1. Erstellen eines R...

Beispielcode zur Implementierung der Formularvalidierung mit reinem CSS

In unserem täglichen Geschäft ist die Formularval...

Wie füge ich ein Website-Symbol hinzu?

Der erste Schritt besteht darin, eine Software zur...

Chrome 4.0 unterstützt GreaseMonkey-Skripte

GreaseMokey (die Chinesen nennen es Grease Monkey...

So fügen Sie Div-Elementen abgerundete Ränder hinzu

Wie unten dargestellt: CSS- CodeInhalt in die Zwi...