de Marina Ferreira

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.