de Marina Ferreira
Conţinut
Cum să obțineți o detaliere a referinței în raport cu valoarea din JavaScript
Acest articol prezintă modul în care se comportă diferitele tipuri de date JavaScript atunci când sunt atribuite unei variabile. În funcție de tipul de date, memoria este alocată diferit pentru a o stoca. Poate rezerva un spațiu nou pentru a stoca o copie a valorii sau poate să nu creeze deloc o copie și doar să indice valoarea existentă (referință).
Iată notele mele luate în timp ce urmăresc Javascript30 desigur de Wes Bos.
Numere, corzi și booleeni
În JavaScript, tipuri primitive, cum ar fi undefined
, null
, string
, number
, boolean
și symbol
sunt trecute prin valoare.
let name = ‘Marina’;let name2 = name;
console.log({name, name2}); >> { name: ‘Marina’, name2: ‘Marina’ }
name = ‘Vinicius’;
console.log({name, name2});>> { name: ‘Vinicius’, name2: ‘Marina’ }
Când variabila name
este atribuit, un spațiu în memorie cu o adresă de 0x001
este rezervat pentru a stoca acea valoare. Variabila name
apoi indică adresa respectivă. Variabila name2
este apoi setat la egal name
. Un spațiu nou în memorie, cu o nouă adresă 0x002
este alocat și stochează o copie a valorii stocate în adresa name
arata spre.
Deci, ori de câte ori dorim să modificăm valoarea lui name
, valoarea stocată de name2
nu va fi modificat, deoarece este o copie, stocată într-o altă locație.
Obiecte și tablouri
Obiectele din JavaScript sunt transmise prin referință. Când mai multe variabile sunt setate pentru a stoca fie un object
, array
sau function
, acele variabile vor indica același spațiu alocat în memorie.
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']}
Când animals
este setat pentru a stoca o matrice, memoria este alocată și o adresă este asociată acelei variabile. Apoi animals2
este setat la egal animals
. De cand animals
stochează o matrice, în loc să creeze o copie a matricei respective și o nouă adresă în memorie, animals2
este pur și simplu îndreptat către același obiect în adresa existentă. În acest fel, orice modificare adusă animals2
va reflecta asupra animals
, pentru că indică aceeași locație.
Veți vedea același comportament pentru obiecte:
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 }}
Copierea obiectelor și a matricelor
Deoarece o simplă atribuire nu este suficientă pentru a produce o copie a unui obiect, aceasta poate fi realizată prin alte abordări:
Matrice
felie()
let animals2 = animals.slice();animals2[3] = 'Shark';
concat ()
let animals3 = [].concat(animals);animals3[3] = 'Tiger';
spread (ES6)
let animals4 = [...animals];animals4[3] = 'Lion';
Modificările vor afecta numai obiectul modificat:
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']}
Obiecte
atribui()
let human = Object.assign({}, person, { age: 20 });
console.log(person, human);>>{ person: { name: 'Marina', age: 29 }, human: { name: 'Marina', age: 20 }}
Deep Clone
Este important să rețineți că aceste metode au doar un nivel de adâncime. Pentru clonele adânci există o metodă încruntată. Folosiți cu atenție.
let femme3 = JSON.parse(JSON.stringify(person));femme3.name="Leslie";
console.log(person, femme3);>>{ person: { name: 'Marina', age: 29 }, femme3: { name: 'Leslie', age: 29 }}
Referințe
- WesBos – Javascript 30
- You Don’t Know JS: Scope & Closures de Kyle Simpson
Publicat inițial la marina-ferreira.github.io.
#Cum #să #obțineți #cunoaștere #referinței #valorii #în #JavaScript
Cum să obțineți o cunoaștere a referinței vs a valorii în JavaScript