So erhalten Sie einen Überblick über Referenz und Wert in JavaScript

In diesem Artikel wird erläutert, wie sich die verschiedenen JavaScript-Datentypen verhalten, wenn sie einer Variablen zugewiesen werden. Je nach Datentyp wird der Speicher zum Speichern unterschiedlich zugeordnet. Möglicherweise wird ein neuer Speicherplatz zum Speichern einer Kopie des Werts reserviert, oder es wird überhaupt keine Kopie erstellt und nur auf den vorhandenen Wert (Referenz) verwiesen.

Hier sind meine Notizen, die ich während des Javascript30-Kurses von Wes Bos gemacht habe.

Zahlen, Zeichenfolgen und Boolesche Werte

In JavaScript Urtyp wie undefined, null, string, number, booleanund symbolwird von Wert übergeben.

let name = ‘Marina’;let name2 = name;
console.log({name, name2}); >> { name: ‘Marina’, name2: ‘Marina’ }
name = ‘Vinicius’;
console.log({name, name2});>> { name: ‘Vinicius’, name2: ‘Marina’ }

Wenn die Variable namezugewiesen wird, wird ein Speicherplatz im Speicher mit der Adresse von 0x001reserviert, um diesen Wert zu speichern. Die Variable zeigt namedann auf diese Adresse. Die Variable name2wird dann auf gleich gesetzt name. Ein neuer Speicherplatz mit einer neuen Adresse 0x002wird zugewiesen und speichert eine Kopie des Werts, der in der Adresse gespeichert ist, auf die die namePunkte zeigen.

Wenn wir also den Wert von ändern möchten, wird der von namegespeicherte Wert name2nicht geändert, da es sich um eine Kopie handelt, die an einem anderen Ort gespeichert ist.

Objekte und Arrays

Objekte in JavaScript werden als Referenz übergeben. Wenn mehr als eine Variable so eingestellt ist, dass sie entweder ein oder speichert object, verweisen diese Variablen auf denselben zugewiesenen Speicherplatz im Speicher.arrayfunction

const animals = ['Cat', 'Dog', 'Horse', 'Snake'];
let animals2 = animals;console.log({animals, animals2});>>{ animals: ['Cat', 'Dog', 'Horse', 'Snake'], animals2: ['Cat', 'Dog', 'Horse', 'Snake']}
animals2[3] = 'Wale';console.log(animals, animals2);>>{ animals: ['Cat', 'Dog', 'Horse', 'Wale'], animals2: ['Cat', 'Dog', 'Horse', 'Wale']}

Wenn animalsein Array gespeichert werden soll, wird Speicher zugewiesen und dieser Variablen eine Adresse zugeordnet. Dann animals2wird gleich gesetzt animals. Da animalsein Array gespeichert animals2wird , anstatt eine Kopie dieses Arrays und eine neue Adresse im Speicher zu erstellen, wird einfach auf dasselbe Objekt in der vorhandenen Adresse verwiesen. Auf diese Weise werden alle vorgenommenen Änderungen animals2berücksichtigt animals, da sie auf denselben Speicherort verweisen.

Sie sehen dasselbe Verhalten für Objekte:

const person = { name: 'Marina', age: 29};
let femme = person;femme.age = 18;
console.log({person, femme});>>{ person: { name: 'Marina', age: 18 }, femme: { name: 'Marina', age: 18 }}

Objekte und Arrays kopieren

Da eine einfache Zuordnung nicht ausreicht, um eine Kopie eines Objekts zu erstellen, kann dies durch andere Ansätze erreicht werden:

Arrays

Scheibe()

let animals2 = animals.slice();animals2[3] = 'Shark';

concat ()

let animals3 = [].concat(animals);animals3[3] = 'Tiger';

Verbreitung (ES6)

let animals4 = [...animals];animals4[3] = 'Lion';

Änderungen wirken sich nur auf das geänderte Objekt aus:

console.log({animals, animals2, animals3, animals4});>>{ animals: ['Cat', 'Dog', 'Horse', 'Snake'], animals2: ['Cat', 'Dog', 'Horse', 'Shark'], animals3: ['Cat', 'Dog', 'Horse', 'Tiger'], animals4: ['Cat', 'Dog', 'Horse', 'Lion']}

Objekte

zuordnen()

let human = Object.assign({}, person, { age: 20 });
console.log(person, human);>>{ person: { name: 'Marina', age: 29 }, human: { name: 'Marina', age: 20 }}

Tiefer Klon

Es ist wichtig zu beachten, dass diese Methoden nur eine Ebene tief sind. Für tiefe Klone gibt es eine verpönte Methode. Vorsichtig verwenden.

let femme3 = JSON.parse(JSON.stringify(person));femme3.name = 'Leslie';
console.log(person, femme3);>>{ person: { name: 'Marina', age: 29 }, femme3: { name: 'Leslie', age: 29 }}

Verweise

  • WesBos - Javascript 30
  • Sie kennen JS nicht: Scope & Closures von Kyle Simpson

Ursprünglich veröffentlicht bei marina-ferreira.github.io.