Einführungs-Tutorial zum minimalistischen JavaScript (2): Objekte und Funktionen_Javascript-Kenntnisse

Das Lesen dieses Artikels erfordert Programmiererfahrung in anderen Sprachen.

Einfache Typen in JavaScript umfassen:

1. Zahlen
2. Zeichenfolge
3.Boolescher Wert (wahr und falsch)
4.null
5.undefiniert

Alle anderen Typen sind Objekte (lassen wir uns nicht vom Rückgabewert des Typeof-Operators täuschen), zum Beispiel:

1. Funktion
2.Array
3. Regulärer Ausdruck
4. Objekte (Objekte sind von Natur aus Objekte)

Objektgrundlagen

In JavaScript ist ein Objekt eine Sammlung von Attributen (ein Objekt ist ein assoziatives Array). Jedes Attribut enthält:

1. Attributname, muss eine Zeichenfolge sein
2. Attributwert, der ein beliebiger Wert außer undefiniert

sein kann

Erstellen Sie ein Objekt aus einem Objektliteral:

Code kopieren Der Code lautet wie folgt:

//Erstelle ein leeres Objekt über das Objektliteral {}
var empty_object = {};

Attributname und Attributwert des Objekts:

Code kopieren Der Code lautet wie folgt:

var stooge = {
// „Vorname“ ist der Attributname, „Jerome“ ist der Attributwert
„Vorname“: „Jerome“,
// „Nachname“ ist der Attributname, „Howard“ ist der Attributwert
„Nachname“: „Howard“
};

Wenn der Attributname eine gültige Kennung ist, können die Anführungszeichen weggelassen werden:

Code kopieren Der Code lautet wie folgt:

var Flug = {
Fluggesellschaft: „Oceanic“,
Nummer: 815,
Abfahrt: {
IATA: „SYD“,
Zeit: „22.09.2004 14:55“,
         Stadt: „Sydney“
},
Ankunft: {
IATA: „LAX“,
Uhrzeit: „23.09.2004 10:42“,
Stadt: „Los Angeles“
}
};

Sehen wir uns ein Beispiel für den Grundstückszugang an:

Code kopieren Der Code lautet wie folgt:

varowner = { name: "Name5566" };

Eigentümer.Name; // „Name5566“
Eigentümer["Name"]; // "Name5566"

Eigentümer.job; // undefiniert
owner.job = "coder"; // oderowner["job"] = "coder";

Wenn der Attributname keine gültige Kennung ist, muss er in Anführungszeichen gesetzt werden. Eine nicht vorhandene Eigenschaft hat den Wert undefiniert. Objekte werden als Referenz und nicht als Wert übergeben:

Code kopieren Der Code lautet wie folgt:

var x = {};
var-Besitzer = x;
Eigentümer.name = "Name5566";
x.name; // x.name === "Name5566"

Hier beziehen sich x und Eigentümer auf dasselbe Objekt.

Die Eigenschaften eines Objekts können mit dem Löschoperator gelöscht werden:

Code kopieren Der Code lautet wie folgt:

delete obj.x; // Löschen Sie das x-Attribut des Objekts obj

Prototyp des Objekts

Jedes Objekt ist mit einem Prototypobjekt verknüpft und Objekte können Eigenschaften vom Prototypobjekt erben. Wir erstellen ein Objekt durch ein Objektliteral und sein Prototypobjekt ist das Object.prototype-Objekt (das Object.prototype-Objekt selbst hat kein Prototypobjekt). Wenn wir ein Objekt erstellen, können wir das Prototypobjekt des Objekts festlegen (wir werden die spezifische Einstellungsmethode später besprechen). Wenn Sie versuchen, eine Eigenschaft eines Objekts abzurufen (anstatt sie zu ändern), versucht JavaScript, die Eigenschaft vom Prototypobjekt des Objekts abzurufen, wenn die Eigenschaft im Prototypobjekt nicht vorhanden ist , dann vom Prototyp-Objekt Das Prototyp-Objekt wird durchsucht, und so weiter, bis das Object.prototype-Prototyp-Objekt gefunden wird. Wenn wir ein bestimmtes Attribut des Objekts ändern, hat dies im Vergleich zum Abrufen von Attributen keine Auswirkungen auf das Prototypobjekt.

Funktionsgrundlagen

Funktionen sind in JavaScript auch Objekte, die mit dem Prototypobjekt Function.prototype verknüpft sind (Function.prototype ist mit Object.prototype verknüpft). Die Funktion verfügt über eine Eigenschaft namens „prototyp“ und der Typ ihres Werts ist ein Objekt. Dieses Objekt verfügt über eine Eigenschaft „Konstruktor“ und der Wert des Konstruktors ist diese Funktion:

Code kopieren Der Code lautet wie folgt:

var f = function() {}

typeof f.prototype; // 'object'
typeof f.prototype.constructor; // 'function'

f === f.prototype.constructor; // true

Funktionen sind Objekte wie Objekte. Das heißt, Funktionen können in Variablen und Arrays gespeichert, als Parameter an Funktionen übergeben werden und Funktionen können innerhalb von Funktionen definiert werden. Nebenbei bemerkt haben Funktionen zwei versteckte Eigenschaften:

1. Funktionskontext
2. Funktionscode

Die Funktion wird wie folgt erstellt:

Code kopieren Der Code lautet wie folgt:

var f = Funktion add(a, b) {
Geben Sie a b;
zurück }

console.log(f); // Ausgabe [Funktion: add]

Der Funktionsname nach dem Schlüsselwort function ist optional. Wir formulieren den Funktionsnamen hauptsächlich für mehrere Zwecke:

1. Für rekursive Aufrufe
2. Wird von Debuggern, Entwicklungstools usw. verwendet, um Funktionen zu identifizieren

Oft benötigen wir keinen Funktionsnamen. Eine Funktion ohne Funktionsnamen wird als anonyme Funktion bezeichnet. Die Parameterliste ist in Klammern eingeschlossen. JavaScript erfordert keine Übereinstimmung zwischen tatsächlichen Parametern und formalen Parametern, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var add = function(a, b) {
Geben Sie a b;
zurück }

add(1, 2, 3); // Tatsächliche Parameter und formale Parameter stimmen nicht überein

Wenn zu viele tatsächliche Parameter vorhanden sind, werden die zusätzlichen tatsächlichen Parameter ignoriert. Wenn zu wenige tatsächliche Parameter vorhanden sind, ist der Wert des nicht zugewiesenen formalen Parameters undefiniert. Die Funktion muss einen Rückgabewert haben. Wenn der Rückgabewert nicht durch die Return-Anweisung angegeben wird, ist der Rückgabewert der Funktion undefiniert.

Eine Funktion und die externen Variablen, auf die sie zugreift, bilden einen Abschluss. Das ist das Schöne an JavaScript.

Funktionsaufruf

Wenn jede Funktion aufgerufen wird, erhält sie zwei zusätzliche Parameter:

1.dieses
2.Argumente

Der Wert hängt vom jeweiligen Aufrufmodus ab. Es gibt vier Aufrufmodi in JavaScript:

1. Methodenaufrufmodus. Wenn eine Eigenschaft eines Objekts eine Funktion ist, wird sie als Methode bezeichnet. Wenn eine Methode über o.m(args) aufgerufen wird, ist dies das Objekt o (man erkennt, dass this und o nur beim Aufruf gebunden sind), zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var obj = {
Wert: 0,
Inkrement: Funktion(v) {
This.value = (typeof v === 'number' ? v : 1);
}
};
obj.increment(); // this === obj

2. Funktionsaufrufmodus. Wenn eine Funktion keine Eigenschaft eines Objekts ist, wird sie als Funktion aufgerufen und diese an das globale Objekt gebunden, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

message = 'Hallo Welt';
var p = function() {
console.log(this.message);
}

p(); // Ausgabe „Hallo Welt“

Dieses Verhalten ist manchmal verwirrend, schauen wir uns ein Beispiel an:

Code kopieren Der Code lautet wie folgt:

obj = {
Wert: 0,
inkrementieren: function() {
        var helper = function() {
                     // Addiere 1 zum Wert im globalen Objekt
This.value = 1;
}

               // Helfer wird als Funktion aufgerufen
​​​​ // Daher ist dies das globale Objekt
        helper();
}
};

obj.increment(); // obj.value === 0

Das gewünschte Ergebnis sollte sein:

Code kopieren Der Code lautet wie folgt:

obj = {
Wert: 0,
inkrementieren: function() {
        var that = this;
        var helper = function() {
That.value = 1;
}

        helper();
}
};

obj.increment(); // obj.value === 1

3. Konstruktor-Aufrufmodus. Funktionen, denen das Präfix new vorangestellt werden soll, werden Konstruktoren genannt, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

// Test heißt Konstruktor
var Test = function(string) {
This.message = string;
}

var myTest = new Test("Hello World");

Eine Funktion kann aufgerufen werden, indem man new davor einfügt (solche Funktionen beginnen normalerweise mit einem Großbuchstaben). Nach dem Hinzufügen von new wird ein Objekt erstellt, das mit der Prototypeigenschaft dieser Funktion verknüpft ist, und dies im Konstruktor sei dieses Objekt.

4.Anrufmodus anwenden. Die Apply-Methode der Funktion wird zum Aufrufen der Funktion verwendet, die über zwei Parameter verfügt, der erste ist dieser und der zweite ist das Parameterarray, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var add = function(a, b) {
Geben Sie a b;
zurück }

var ret = add.apply(null, [3, 4]); // ret === 7

Wenn die Funktion aufgerufen wird, können wir auf ein Klassenarray mit dem Namen arguments (kein echtes JavaScript-Array) zugreifen, das alle tatsächlichen Parameter enthält, sodass wir Parameter variabler Länge implementieren können:

Code kopieren Der Code lautet wie folgt:

var add = function() {
var sum = 0;
for (var i=0; i         sum = arguments[i];
}
Rückgabesumme;
}

add(1, 2, 3, 4);

Ausnahme

Lassen Sie uns nun über den Ausnahmebehandlungsmechanismus von JavaScript sprechen. Wir verwenden die throw-Anweisung, um Ausnahmen auszulösen, und die try-cache-Anweisung, um Ausnahmen abzufangen und zu behandeln:

Code kopieren Der Code lautet wie folgt:

var add = Funktion (a, b) {
If (typeof a !== 'number' || typeof b !== 'number') {
​​​​ // Ausnahme auslösen
wirf {
Name: 'TypeError',
                Nachricht: „Benötigte Nummern hinzufügen“
        };
}
Geben Sie a b;
zurück }

//Ausnahmen abfangen und behandeln
versuche es mit {
Add("seven");
// e ist das ausgelöste Ausnahmeobjekt
} Catch (e) {
console.log(e.name ': ' e.message);
}

Eigenschaften zu JavaScript-Typen hinzufügen

Konstruktoren gibt es für die meisten Typen in JavaScript:

1. Der Konstruktor des Objekts ist Object
2. Der Konstruktor des Arrays ist Array
3. Der Konstruktor der Funktion ist Function
4. Der Konstruktor von string ist String
5. Der Konstruktor von Zahlen ist Number
6. Der Konstruktor von Boolean ist Boolean
7. Der Konstruktor des regulären Ausdrucks ist RegExp

Wir können dem Prototyp des Konstruktors Eigenschaften (häufig Methoden) hinzufügen, um diese Eigenschaft für verwandte Variablen verfügbar zu machen:

Code kopieren Der Code lautet wie folgt:

Number.prototype.integer = function() {
Return Math[this < 0 ? 'ceil' : 'floor'](this);
}

(1.1).integer(); // 1

Geltungsbereich

JavaScript erfordert Funktionen zum Erstellen des Bereichs:

Code kopieren Der Code lautet wie folgt:

function() {
// ...
}();

Hier wird eine anonyme Funktion erstellt und ausgeführt. Sie können Variablen, die Sie nicht offenlegen möchten, über den Gültigkeitsbereich ausblenden:

Code kopieren Der Code lautet wie folgt:

var obj = function() {
//Wert verbergen, von außen nicht zugänglich
var-Wert = 0;

Geben Sie {
zurück // Nur diese Methode kann den Wert ändern
inkrementieren: function() {
Wert = 1;
},
// Nur diese Methode kann Werte lesen
         getValue: function() {
              Rückgabewert;
}
};
}();

obj.increment();
obj.getValue() === 1;

Erben

Es gibt viele Möglichkeiten, Vererbung in JavaScript zu implementieren.
Beim Erstellen eines Objekts können wir das mit dem Objekt verknüpfte Prototypobjekt festlegen. Wir machen Folgendes:

Code kopieren Der Code lautet wie folgt:

//Erstelle ein Objekt o, dessen Prototypobjekt {x:1, y:2}
ist var o = Object.create({x:1, y:2});

Die Object.create-Methode ist in ECMAScript 5 definiert. Wenn Sie ECMAScript 3 verwenden, können Sie selbst eine Create-Methode implementieren:

Code kopieren Der Code lautet wie folgt:

// Wenn die Object.create-Methode nicht definiert ist
if (typeof Object.create !== 'function') {
// Object.create-Methode erstellen
Object.create = Funktion (o) {
var F = function () {};
          F.prototype = o;
​​​​ //Erstelle ein neues Objekt. Das Prototypobjekt dieses Objekts ist o
          neues F();
zurückgeben };
}

Über die Object.create-Methode führen wir eine prototypbasierte Vererbung durch: Ein neues Objekt erbt direkt die Eigenschaften eines alten Objekts (im Vergleich zur klassenbasierten Vererbung besteht keine Notwendigkeit für die Existenz einer Klasse und des Objekts direkt erbt das Objekt). Beispiel:

Code kopieren Der Code lautet wie folgt:

var myMammal = {
Name: „Herb das Säugetier“,
Get_name: function() {
         return this.name;
},
sagt: function() {
          return this.saying || '';
}
};

// Inherit myMammal
var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.purr = function(n) {
var i, s = '';
für (i = 0; i < n; i = 1) {
          if (s) {
          s = '-';
}
        s = 'r';
}
Geben Sie s;
zurück };
myCat.get_name = function() {
Gibt this.says() ' ' this.name ' ' this.says();
zurück };

Der obige Code ist sehr einfach, kann jedoch private Mitglieder nicht schützen. Wir können Modulmuster verwenden. Im Modulmuster wird ein bestimmter Objekttyp von einer Funktion generiert und der Funktionsumfang wird verwendet, um private Mitglieder vor externem Zugriff zu schützen:

Code kopieren Der Code lautet wie folgt:

// Säugetierfunktion, wird zum Konstruieren von Säugetierobjekten verwendet
var Säugetier = Funktion(Spezifikation) {
// das ist ein konstruiertes Objekt
var that = {};

// Auf die öffentliche Methode get_name kann extern zugegriffen werden
That.get_name = function() {
// Auf spec.name kann von außerhalb
nicht direkt zugegriffen werden          return spec.name;
};

// Öffentliche Methode besagt, dass von außen darauf zugegriffen werden kann
That.says = function() {
// Auf spec.saying kann von außen nicht direkt zugegriffen werden
          return spec.saying || '';
};

Geben Sie das zurück;
};

//Säugetierobjekt erstellen
var myMammal = Säugetier({name: 'Herb'});

//Katzenfunktion, die zum Erstellen von Katzenobjekten verwendet wird
var cat = function(spec) {
spec.saying = spec.saying ||. 'miau';

// Katze erbt von Säugetier, daher wird zuerst das Säugetierobjekt erstellt
var that = Säugetier(spec);

// Öffentliche Methode purr hinzufügen
That.purr = function(n) {
        var i, s = '';
für (i = 0; i < n; i = 1) {
                  if (s) {
                s = '-';
            }
          s = 'r';
}
        return s;
};

// Ändere die öffentliche Methode get_name
That.get_name = function() {
          return that.says() ' ' spec.name
' ' that.says();
         gib das zurück;
};
};

//Katzenobjekt erstellen
var myCat = cat({name: 'Henrietta'});

Im Modulmuster wird die Vererbung durch den Aufruf von Konstruktoren erreicht. Darüber hinaus können wir auch in der Unterklasse auf die Methoden der übergeordneten Klasse zugreifen:

Code kopieren Der Code lautet wie folgt:

Object.prototype.superior = fonction (nom) {
    var ça = ceci, méthode = ça[nom];
    return function() {
        return method.apply(that, arguments);
    };
};
 
var coolcat = fonction (spéc) {
    // 获取子类的 get_name 方法
    var that = cat(spec), super_get_name = that.superior('get_name');
    that.get_name = fonction(n) {
        return 'like ' super_get_name() ' baby';
    };
    rends ça ;
};