Hogyan lehet megfogni a referencia vs értéket a JavaScript-ben

Ez a cikk azt tárgyalja, hogy a különféle JavaScript adattípusok hogyan viselkednek, amikor egy változóhoz vannak rendelve. Az adattípustól függően a memória másképp van elosztva a tároláshoz. Foglalhat új helyet az érték másolatának tárolására, vagy egyáltalán nem hoz létre másolatot, és csak rámutat a meglévő értékre (referencia).

Itt vannak a jegyzeteim, amelyeket Wes Bos Javascript30 tanfolyamának követése közben készítettem.

Számok, húrok és logikai értékek

A JavaScript, primitív típusok, mint például undefined, null, string, number, booleanés symbolérték szerint adódnak át.

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

A változó namehozzárendelésekor a memóriában helyet foglalnak a címmel, 0x001hogy tárolják ezt az értéket. Ezután a változó namearra a címre mutat. Ezután a változót name2egyenlőre állítjuk name. Új memóriaterület, új címmel 0x002van ellátva, és tárolja a címben tárolt érték másolatát name.

Tehát, amikor módosítani akarjuk a (z) értékét name, a (z) által tárolt érték name2nem változik, mivel másolata más helyen van tárolva.

Tárgyak és tömbök

A JavaScript-ben lévő objektumokat hivatkozás útján adjuk át. Ha egynél több változó be van állítva tárolni vagy egy object, arrayvagy functionazok a változók ugyanarra a lefoglalt terület a memóriában.

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']}

Ha animalsegy tömb tárolására van beállítva, memória kerül kiosztásra, és egy cím társul ehhez a változóhoz. Ezután animals2egyenlőre állítjuk animals. Mivel animalsegy tömböt tárol, ahelyett, hogy a tömb másolatát és egy új címet létrehozna a memóriában, animals2egyszerűen a meglévő cím ugyanazon objektumára mutat. Így az esetleges módosítások animals2tükröződni fognak animals, mert ugyanarra a helyre mutatnak.

Ugyanezt a viselkedést fogja látni az objektumok esetében is:

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 }}

Objektumok és tömbök másolása

Mivel egy objektum másolatának elkészítéséhez nem elegendő egy egyszerű hozzárendelés, ezt más megközelítésekkel is el lehet érni:

Tömbök

szelet()

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

concat ()

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

szórás (ES6)

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

A változtatások csak a módosított objektumot érintik:

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']}

Tárgyak

hozzárendelni()

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

Mély klón

Fontos megjegyezni, hogy ezek a módszerek csak egy szint mélyen vannak. A mély klónok esetében rosszalló módszer létezik. Használja óvatosan.

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

Hivatkozások

  • WesBos - Javascript 30
  • Nem ismered JS-t: Kyle Simpson hatóköre és zárásai

Eredetileg a marina-ferreira.github.io oldalon jelent meg.