Eine kurze Diskussion über JS-Verpackungsobjekte

Eine kurze Diskussion über JS-Verpackungsobjekte

Überblick

Definition

Objekte sind der Hauptdatentyp in JavaScript. Unter bestimmten Bedingungen werden auch die drei primitiven Wertetypen – Zahlen, Zeichenfolgen und Boolesche Werte – automatisch in Objekte umgewandelt, die „Wrapperobjekte“ der primitiven Typen sind.

Die sogenannten „Wrapper-Objekte“ beziehen sich auf die drei nativen Objekte Number, String und Boolean, die jeweils numerischen Werten, Zeichenfolgen und Booleschen Werten entsprechen. Diese drei nativen Objekte können primitive Werte in Objekte umwandeln (verpacken).

var v1 = neue Zahl (123);
var v2 = neuer String('abc');
var v3 = neuer Boolean(true);

typeof v1 // "Objekt"
typeof v2 // "Objekt"
typeof v3 // "Objekt"

v1 === 123 // falsch
v2 === 'abc' // falsch
v3 === wahr // falsch

Im obigen Code werden basierend auf den Werten des ursprünglichen Typs drei entsprechende Wrapper-Objekte generiert. Wie Sie sehen, sind v1, v2 und v3 allesamt Objekte und nicht gleich den entsprechenden einfachen Typwerten.

Der Zweck des Entwurfs von Wrapper-Objekten besteht erstens darin, den Typ „Objekt“ alle Werte von JavaScript abdecken zu lassen, damit die gesamte Sprache über ein gemeinsames Datenmodell verfügt, und zweitens darin, es Werten primitiver Typen zu ermöglichen, ihre eigenen Methoden aufzurufen.

Die drei nativen Objekte Number, String und Boolean werden, wenn sie nicht als Konstruktoren (also ohne new beim Aufruf), sondern als gewöhnliche Funktionen aufgerufen werden, häufig dazu verwendet, Werte beliebigen Typs in Zahlen, Strings und Boolesche Werte umzuwandeln.

//Konvertiere Zeichenfolge in Wert Number('123') // 123

// Konvertiere den Wert in einen String String(123) // "123"

// Den Wert in einen Booleschen Wert umwandeln Boolean(123) // true

Zusammenfassend lässt sich sagen, dass diese drei Objekte, wenn sie als Konstruktoren (mit „new“) verwendet werden, primitive Werte in Objekte umwandeln können; wenn sie als normale Funktionen (ohne „new“) verwendet werden, können sie Werte beliebigen Typs in primitive Werte umwandeln.

Instanzmethoden

Die drei Wrapper-Objekte stellen jeweils eine Reihe von Instanzmethoden bereit. Hier sind zwei Methoden, die sie gemeinsam haben und vom Object-Objekt geerbt haben: valueOf() und toString().

Wert von ()

Die Methode valueOf() gibt den Wert des primitiven Typs zurück, der der gewrappten Objektinstanz entspricht.

neue Zahl(123).valueOf() // 123
neuer String('abc').valueOf() // "abc"
neuer Boolean(true).valueOf() // wahr

zuString()

Die Methode toString() gibt die entsprechende Zeichenfolgenform zurück.

neue Zahl(123).toString() // "123"
neuer String('abc').toString() // "abc"
neuer Boolean(true).toString() // "wahr"

Automatische Konvertierung zwischen primitiven Typen und Instanzobjekten

In einigen Fällen wird der Wert des primitiven Typs automatisch als gewrapptes Objekt aufgerufen, d. h. die Eigenschaften und Methoden des gewrappten Objekts werden aufgerufen. Zu diesem Zeitpunkt konvertiert die JavaScript-Engine den Wert des primitiven Typs automatisch in eine Verpackungsobjektinstanz und zerstört die Instanz sofort nach der Verwendung.

Beispielsweise kann eine Zeichenfolge die Längeneigenschaft aufrufen, um die Länge der Zeichenfolge zurückzugeben.

'abc'.Länge // 3

Im obigen Code ist abc eine Zeichenfolge und kein Objekt selbst, und seine Längeneigenschaft kann nicht aufgerufen werden. Die JavaScript-Engine konvertiert es automatisch in ein Wrapper-Objekt und ruft die Längeneigenschaft dieses Objekts auf. Nach Abschluss des Aufrufs wird das temporäre Objekt zerstört. Dies wird als automatische Konvertierung zwischen primitiven Typen und Instanzobjekten bezeichnet.

var str = "abc";
str.länge // 3

//Entspricht var strObj = new String(str)
// Zeichenfolge {
// 0: "a", 1: "b", 2: "c", Länge: 3, [[PrimitiveValue]]: "abc"
// }
strObj.Länge // 3

Das durch die automatische Konvertierung generierte Wrapper-Objekt ist schreibgeschützt und kann nicht geändert werden. Aus diesem Grund können Zeichenfolgen keine neuen Eigenschaften hinzugefügt werden.

var s = 'Hallo Welt';
sx = 123;
sx // undefiniert

Der obige Code fügt der Zeichenfolge s eine x-Eigenschaft hinzu, das Ergebnis ist jedoch ungültig und gibt immer „undefiniert“ zurück.

Andererseits wird die gewrappte Objektinstanz nach Abschluss des Aufrufs automatisch zerstört. Dies bedeutet, dass Sie beim nächsten Aufruf der Eigenschaften der Zeichenfolge tatsächlich ein neu generiertes Objekt aufrufen und nicht das im vorherigen Aufruf generierte Objekt. Sie können daher die dem vorherigen Objekt zugewiesenen Eigenschaften nicht abrufen. Wenn Sie einem String Eigenschaften hinzufügen möchten, können Sie diese nur in seinem Prototypobjekt String.prototype definieren.

Benutzerdefinierte Methoden

Wrapper-Objekte können neben nativen Instanzmethoden auch benutzerdefinierte Methoden und Eigenschaften für direkte Aufrufe von Werten des ursprünglichen Typs definieren.

Beispielsweise können wir eine Double-Methode hinzufügen, um Zeichenfolgen und Zahlen zu verdoppeln.

String.prototype.double = Funktion () {
  gib diesen.valueOf() + diesen.valueOf() zurück;
};

'abc'.double() // abcabc

Nummer.Prototyp.double = Funktion () {
  gib diesen.valueOf() + diesen.valueOf() zurück;
};

(123).double() // 246

Der obige Code definiert eine Methode für die Prototypen der beiden Objekte „String“ und „Number“, sodass sie für alle Instanzobjekte aufgerufen werden können. Beachten Sie, dass die letzten 123 in Klammern stehen müssen, da sonst der Punktoperator (.) als Dezimalpunkt interpretiert wird.

Boolean-Objekt

Überblick

Das Boolean-Objekt ist eines der drei Wrapper-Objekte in JavaScript. Als Konstruktor wird es hauptsächlich verwendet, um eine Wrapper-Objektinstanz eines Booleschen Werts zu generieren.

var b = neuer Boolean(true);
Typ von b // "Objekt"
b.valueOf() // wahr

Die Variable b im obigen Code ist eine Instanz eines Booleschen Objekts. Ihr Typ ist Objekt und ihr Wert ist der Boolesche Wert true.

Beachten Sie, dass für die Instanz des umschlossenen Objekts, die „false“ entspricht, das Ergebnis der Booleschen Operation ebenfalls „true“ ist.

wenn (neuer Boolean(falsch)) {
  Konsole.log('true');
} // WAHR

wenn (neuer Boolean(falsch).valueOf()) {
  Konsole.log('true');
} // Keine Ausgabe

Das erste Beispiel im obigen Code erhält „true“, weil die Wrapper-Objektinstanz, die „false“ entspricht, ein Objekt ist, das bei der Ausführung logischer Operationen automatisch in den Booleschen Wert „true“ konvertiert wird (weil die Booleschen Werte, die allen Objekten entsprechen, „true“ sind). Die valueOf-Methode der Instanz gibt den der Instanz entsprechenden Originalwert zurück, der in diesem Fall false ist.

Typkonvertierungseffekt der Booleschen Funktion

Neben der Verwendung als Konstruktor kann das Boolean-Objekt auch allein verwendet werden, um jeden beliebigen Wert in einen Boolean-Wert umzuwandeln. Derzeit ist Boolean eine einfache Werkzeugmethode.

Boolean (undefiniert) // falsch
Boolean(null) // falsch
Boolean(0) // falsch
Boolean('') // falsch
Boolean(NaN) // falsch

Boolean(1) // wahr
Boolean('false') // wahr
Boolean([]) // wahr
Boolean({}) // wahr
Boolean(Funktion () {}) // wahr
Boolean(/foo/) // wahr

Es lohnt sich, sich die verschiedenen Situationen im obigen Code, in denen „true“ erzielt wird, gut zu merken.

Übrigens können Sie jeden Wert auch mit dem Operator für die doppelte Negation (!) in sein Boolesches Gegenstück umwandeln.

!!undefiniert // falsch
!!null // falsch
!!0 // falsch
!!'' // FALSCH
!!NaN // falsch

!!1 // wahr
!!'falsch' // wahr
!![] // WAHR
!!{} // WAHR
!!function(){} // wahr
!!/foo/ // wahr

Schließlich führt das Hinzufügen von „new“ vor dem Booleschen Objekt bei einigen Sonderwerten zu völlig entgegengesetzten Ergebnissen. Sie müssen also vorsichtig sein.

wenn (Boolean(false)) {
  Konsole.log('true');
} // Keine Ausgabe if (new Boolean(false)) {
  Konsole.log('true');
} // WAHR

wenn (Boolean(null)) {
  Konsole.log('true');
} // Keine Ausgabe if (new Boolean(null)) {
  Konsole.log('true');
} // WAHR

Number-Objekt

Überblick

Das Number-Objekt ist ein Wrapper-Objekt, das einem numerischen Wert entspricht und als Konstruktor oder als Tool-Funktion verwendet werden kann.

Als Konstruktor wird es verwendet, um ein Objekt zu generieren, dessen Wert ein numerischer Wert ist.

var n = neue Zahl(1);
typeof n // "Objekt"

Im obigen Code wird das Number-Objekt als Konstruktor verwendet und gibt ein Objekt mit dem Wert 1 zurück.

Als Hilfsfunktion kann sie jeden beliebigen Werttyp in einen numerischen Wert umwandeln.

Zahl (wahr) // 1

Statische Eigenschaften

Das Number-Objekt verfügt über die folgenden statischen Eigenschaften (d. h. Eigenschaften, die direkt für das Number-Objekt und nicht für die Instanz definiert sind).

  • Number.POSITIVE_INFINITY: positive Unendlichkeit, zeigt auf Unendlich.
  • Number.NEGATIVE_INFINITY: negative Unendlichkeit, zeigt auf -Unendlich.
  • Number.NaN: stellt einen nicht numerischen Wert dar, zeigt auf NaN.
  • Number.MIN_VALUE: stellt die kleinste positive Zahl dar (d. h. die positive Zahl, die 0 am nächsten ist, was im 64-Bit-Gleitkommasystem 5e-324 entspricht). Entsprechend ist die negative Zahl, die 0 am nächsten ist, -Number.MIN_VALUE.
  • Number.MAX_SAFE_INTEGER: stellt die maximale Ganzzahl dar, die genau dargestellt werden kann, nämlich 9007199254740991.
  • Number.MIN_SAFE_INTEGER: stellt die kleinste Ganzzahl dar, die genau dargestellt werden kann, d. h. -9007199254740991.
Zahl.POSITIVE_INFINITY // Unendlich
Zahl.NEGATIVE_INFINITY // -Unendlich
Zahl.NaN // NaN

Zahl.MAX_VALUE // 1,7976931348623157e+308
Zahl.MAX_VALUE < Unendlich // wahr

Zahl.MIN_VALUE // 5e-324
Zahl.MIN_VALUE > 0 // wahr

Nummer.MAX_SAFE_INTEGER // 9007199254740991
Zahl.MIN_SAFE_INTEGER // -9007199254740991

Instanzmethoden

Das Number-Objekt verfügt über vier Instanzmethoden, die alle mit der Konvertierung eines Werts in ein bestimmtes Format zusammenhängen.

Nummer.prototype.toString()

Das Number-Objekt verwendet seine eigene toString-Methode, um einen Wert in einen String umzuwandeln.

(10).toString() // "10"

Die Methode toString kann einen Parameter akzeptieren, der die Ausgabebasis angibt. Wenn dieser Parameter weggelassen wird, wird der Wert standardmäßig in eine Dezimalzahl umgewandelt und dann als Zeichenfolge ausgegeben. Andernfalls wird eine Zahl gemäß der durch den Parameter angegebenen Basis in eine Zeichenfolge einer bestimmten Basis umgewandelt.

(10).toString(2) // "1010"
(10).toString(8) // "12"
(10).toString(16) // "ein"

Im obigen Code muss die 10 eingeklammert werden, um anzuzeigen, dass sich der Punkt dahinter auf den Aufruf der Objekteigenschaft bezieht. Wenn Sie keine Klammern hinzufügen, wird der Punkt von der JavaScript-Engine als Dezimalpunkt interpretiert, was zu einem Fehler führt.

10. toString(2)
// SyntaxError: Unerwartetes Token UNZULÄSSIG

Jede Schreibweise funktioniert, solange die JavaScript-Engine das Dezimalkomma nicht mit dem Punktoperator des Objekts verwechselt. Sie können nicht nur die 10 in Klammern setzen, sondern auch zwei Punkte nach der 10. JavaScript interpretiert den ersten Punkt als Dezimalpunkt (also 10,0) und den zweiten Punkt als Aufruf einer Objekteigenschaft und erhält so das richtige Ergebnis.

10..toString(2) // "1010"

// Andere Methoden umfassen 10 .toString(2) // "1010"
10.0.toString(2) // "1010"

In der Praxis bedeutet dies, dass Sie die toString-Methode direkt auf einer Dezimalzahl verwenden können.

10.5.toString() // "10.5"
10.5.toString(2) // "1010.1"
10.5.toString(8) // "12.4"
10.5.toString(16) // "a.8"

Die Methode toString kann auch mit dem Operator „eckige Klammern“ aufgerufen werden.

10['toString'](2) // "1010"

Die Methode toString kann nur Dezimalzahlen in Strings anderer Basis umwandeln. Wenn Sie Zahlen mit anderen Basen wieder in Dezimalzahlen umwandeln möchten, müssen Sie die Methode parseInt verwenden.

Nummer.prototype.toFixed()

Die Methode toFixed() wandelt zunächst eine Zahl in eine Dezimalzahl mit einer angegebenen Anzahl von Ziffern um und gibt dann die der Dezimalzahl entsprechende Zeichenfolge zurück.

(10).toFixed(2) // "10,00"
10.005.toFixed(2) // "10.01"

Im obigen Code werden 10 und 10,005 zuerst in zwei Dezimalstellen und dann in Zeichenfolgen umgewandelt. Die 10 muss eingeklammert werden, sonst wird der Punkt dahinter als Dezimalpunkt behandelt.

Der Parameter der Methode toFixed() ist die Anzahl der Dezimalstellen. Der gültige Bereich liegt zwischen 0 und 20. Bei Überschreitung dieses Bereichs wird ein RangeError-Fehler ausgelöst.

Aufgrund von Gleitkommazahlen ist die Rundung der Dezimalstelle 5 undefiniert und muss mit Vorsicht verwendet werden.

(10.055).toFixed(2) // 10.05
(10.005).toFixed(2) // 10.01

Zahl.prototype.toExponential()

Die Methode toExponential wird verwendet, um eine Zahl in die wissenschaftliche Notation umzuwandeln.

(10).toExponential() // "1e+1"
(10).toExponential(1) // "1.0e+1"
(10).toExponential(2) // "1.00e+1"

(1234).toExponential() // "1,234e+3"
(1234).toExponential(1) // "1.2e+3"
(1234).toExponential(2) // "1.23e+3"

Der Parameter der Methode toExponential ist die Anzahl der signifikanten Ziffern nach dem Dezimalkomma im Bereich von 0 bis 20. Wenn dieser Bereich überschritten wird, wird ein RangeError-Fehler ausgelöst.

Nummer.Prototyp.toPrecision()

Die Methode toPrecision wird verwendet, um eine Zahl in eine angegebene Anzahl signifikanter Ziffern umzuwandeln.

(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"

Der Parameter der Methode toPrecision ist die Anzahl der gültigen Ziffern im Bereich von 1 bis 21. Wenn dieser Bereich überschritten wird, wird ein RangeError-Fehler ausgelöst.

Die Methode toPrecision ist beim Runden nicht sehr zuverlässig, da Gleitkommazahlen nicht präzise gespeichert werden.

(12.35).toPrecision(3) // "12.3"
(12.25).toPrecision(3) // "12.3"
(12.15).toPrecision(3) // "12.2"
(12.45).toPrecision(3) // "12.4"

Benutzerdefinierte Methoden

Wie bei anderen Objekten können Sie für das Objekt Number.prototype benutzerdefinierte Methoden definieren, die von Instanzen von Number geerbt werden.

Nummer.Prototyp.Add = Funktion (x) {
  gib dies + x zurück;
};

8['Hinzufügen'](2) // 10

Der obige Code definiert eine Add-Methode für die Objektinstanz Number. Wenn Sie eine Methode für einen numerischen Wert aufrufen, wird der Wert automatisch in ein Instanzobjekt von Number konvertiert, sodass Sie die Add-Methode aufrufen können. Da die Add-Methode einen Wert zurückgibt, können Kettenoperationen durchgeführt werden.

Zahl.Prototyp.Subtrahieren = Funktion (x) {
  gib dies zurück - x;
};

(8).add(2).subtract(4) // 6

Wir können auch komplexere Methoden einsetzen.

Nummer.Prototyp.iterate = Funktion () {
  var Ergebnis = [];
  für (var i = 0; i <= dies; i++) {
    Ergebnis.push(i);
  }
  Ergebnis zurückgeben;
};

(8).iterate() // [0, 1, 2, 3, 4, 5, 6, 7, 8]

Der obige Code wendet die Iterate-Methode auf den Prototyp des Number-Objekts an, das einen Wert automatisch in ein Array überträgt.

Beachten Sie, dass benutzerdefinierte Methoden für Zahlen nur für ihr Prototypobjekt Number.prototype definiert werden können. Die Zahl selbst kann keine benutzerdefinierten Eigenschaften haben.

var n = 1;
nx = 1;
nx // undefiniert

Im obigen Code ist n ein primitiver Wert. Das direkte Hinzufügen einer neuen Eigenschaft x führt zwar nicht zu einer Fehlermeldung, ist jedoch nutzlos und gibt immer „undefiniert“ zurück. Dies liegt daran, dass n nach dem Aufruf der Eigenschaft automatisch in ein Instanzobjekt von Number konvertiert wird und das Objekt nach Beendigung des Aufrufs automatisch zerstört wird. Daher erhalten Sie beim nächsten Aufruf des Attributs von n tatsächlich ein anderes Objekt und das Attribut x kann nicht gelesen werden.

String-Objekt

Überblick

Das String-Objekt ist eines der drei Wrapper-Objekte, die JavaScript nativ bereitstellt, und wird zum Generieren von String-Objekten verwendet.

var s1 = "abc";
var s2 = neuer String('abc');

Typ von s1 // "Zeichenfolge"
Typ von s2 // "Objekt"

s2.valueOf() // "abc"

Ein String-Objekt ist ein arrayähnliches Objekt (ähnlich einem Array, aber kein Array).

neuer String('abc')
// Zeichenfolge {0: "a", 1: "b", 2: "c", Länge: 3}

(neuer String('abc'))[1] // "b"

Im obigen Code verfügt das String-Objekt, das dem String abc entspricht, über numerische Schlüssel (0, 1, 2) und Längenattribute, sodass darauf wie auf ein Array zugegriffen werden kann.

Neben der Verwendung als Konstruktor kann das String-Objekt auch als Tool-Methode verwendet werden, um Werte beliebigen Typs in einen String umzuwandeln.

String(true) // "wahr"
Zeichenfolge(5) // "5"

Statische Methoden

String.fromCharCode()

Die vom String-Objekt bereitgestellten statischen Methoden (d. h. Methoden, die im Objekt selbst und nicht in der Objektinstanz definiert sind) sind hauptsächlich String.fromCharCode(). Die Methode verwendet als Parameter einen oder mehrere numerische Werte, die Unicode-Codepunkte darstellen, und gibt eine Zeichenfolge zurück, die aus diesen Codepunkten besteht.

String.fromCharCode() // ""
String.fromCharCode(97) // "ein"
String.fromCharCode(104, 101, 108, 108, 111) // "hallo"

Wenn im obigen Code der Parameter der Methode String.fromCharCode leer ist, wird eine leere Zeichenfolge zurückgegeben, andernfalls die dem Parameter entsprechende Unicode-Zeichenfolge.

Beachten Sie, dass diese Methode keine Zeichen mit Unicode-Codepunkten größer als 0xFFFF unterstützt, d. h. der übergebene Parameter kann nicht größer als 0xFFFF (d. h. 65535 in Dezimalzahlen) sein.

String.fromCharCode(0x20BB7) // "ஷ"
String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)
// WAHR

Im obigen Code ist der String.fromCharCode-Parameter 0x20BB7 größer als 0xFFFF, was zu einem Fehler im zurückgegebenen Ergebnis führt. Das Zeichen, das 0x20BB7 entspricht, ist ein chinesisches Zeichen

Oben finden Sie eine kurze Erläuterung der Details von JS-Verpackungsobjekten. Weitere Informationen zu JS-Verpackungsobjekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der Verwendung von JavaScript-Verpackungsobjekten
  • Analyse von Beispielen für JavaScript-Verpackungsobjekte
  • Einführung in Wrapper-Objekte in JavaScript
  • Einführung in JavaScript-Verpackungsobjekte
  • Typisierte JavaScript-Wrapper
  • JavaScript-Referenztyp, grundlegender Verpackungstyp, Beispielanalyse [Boolean, Zahl und Zeichenfolge]
  • Grundlegende Datentypen und Pakettypen des JavaScript-Typsystems
  • JavaScript Advanced Tutorial 5.6 Grundlegende Verpackungstypen (Details)
  • Eine kurze Diskussion über grundlegende Verpackungstypen in Javascript

<<:  Methoden zum lokalen Sichern von Windows Server-Dateien, Lösungen zum Sichern von Windows Server-Daten

>>:  Verwenden von MySQL unter Windows: Implementieren automatischer zeitgesteuerter Sicherungen

Artikel empfehlen

Detaillierte Schritte zur Installation von MySQL mit Cluster-RPM

MySQL-Datenbank installieren a) Laden Sie das MyS...

Erfahren Sie in einem Artikel mehr über JavaScript-Closure-Funktionen

Inhaltsverzeichnis Variablenbereich Das Konzept d...

Lösung für das Problem ungültiger Breiteneinstellungen für Label und Span

Standardmäßig ist die Einstellung der Breite für B...

dh Filtersammlung

Der IE hat uns in der frühen Entwicklungsphase Ko...

Beispielcode zur Implementierung eines 3D-Bucheffekts mit CSS

Schauen wir uns zunächst ohne Umschweife die Rend...

Implementierung eines Web-Rechners auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...

JavaScript zur Implementierung der mobilen Signaturfunktion

In diesem Artikel wird der spezifische JavaScript...

Detailliertes Tutorial zum Herunterladen und Installieren von VMware Workstation

Virtuelle Maschinen sind eine sehr praktische Tes...

js um das Schlangenspiel mit Kommentaren zu implementieren

In diesem Artikelbeispiel wird der spezifische Co...

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

Vor kurzem hatte ich zufällig Kontakt mit dem Pro...

Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen

Ich habe viele davon gesammelt, aber alle endeten...

Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

So führen Sie SVG-Symbole in Vue ein Methode 1 zu...