de William Woodhead

O ciudățenie Javascript care te va surprinde

O ciudatenie Javascript care te va surprinde
Clonarea oilor

Această piesă descrie o caracteristică pe care ar trebui să o cunoască dezvoltatorii Javascript buni. Și odată ce ați citit această piesă, vă puteți preface că știți despre ea de la vârste ca mine.

Notă: Dacă nu sunteți un dezvoltator Javascript, acest lucru ar putea fi puțin dificil pentru a vă intra în dinți. Dacă sunteți, atunci închideți-vă pentru o călătorie extrem de scurtă.

Totul are de-a face copiere variabile (sau clonarea, de aici și oile).

Să ne scufundăm direct.

ad-banner

Copierea șirurilor

Să facem o scurtă codificare:

var initialName = ‘William’;
var copyName = initialName;copyName = ‘Bill’;
console.log(initialName);   // prints ‘William’console.log(copyName);      // prints ‘Bill’

Totul pare așteptat. Copiem initialName și apoi să-i schimbe valoarea. initialName imprimeuriWilliam ‘ și copiedName imprimeuri ‘Factură’.

Până acum, bine. Să încercăm același exercițiu cu obiecte în loc de șiruri. (Asteapta-te la neasteptat)

Copierea obiectelor

var initialObject = { name: ‘William’ };
var copyObject = initialObject;copyObject.name = ‘Bill’;
console.log(initialObject.name);   // prints ‘Bill’console.log(copyObject.name);      // prints ‘Bill’

Hmmm, iată problema. Când tipărim numele initialObject, s-a schimbat în Factură.

Deci, ce s-a întâmplat aici?

Când setăm Nume în copyObject, a schimbat, de asemenea Nume în initialObject. Acest lucru se datorează faptului că obiectele sunt copiate de referință. copyObject este doar o referință la datele subiacente.

Deci, atunci când schimbăm Nume în copyObject, modifică și fișierul Nume în initialObject deoarece face referire la același bit de date subiacente.

Unde s-ar putea să fii prins

În aplicații mari, acest lucru ar putea duce la faptul că anumite părți ale structurilor dvs. de date se află în mod eficient în mai multe locuri în același timp.

Deci, dacă modificați un obiect dintr-o parte a codului aplicației dvs., s-ar putea să-l schimbați în altă parte. Acest lucru poate provoca uneori un comportament nedorit (cum ar fi redarea redării) și poate fi dificil de depanat și izolat.

Deși acest lucru pare foarte simplu, în aplicațiile web complexe care utilizează cadre populare, această problemă simplă la nivel de bază poate provoca dureri de cap severe dezvoltatorilor.

Exemplu Redux / React

Un exemplu în care am văzut că dezvoltatorii au fost prinși de acest lucru din nou și din nou este în Creatorii de acțiune Redux unde manipulați starea înainte de a trimite acțiuni. Manipulând obiectul care este transmis către creatorul acțiunii fără a-l clona, ​​puteți schimba de fapt starea de bază sau puteți reacționa la starea componentelor înainte de expediere.

Soluția noastră

Există multe biblioteci care oferă funcții de clonare pentru obiecte și tablouri, de exemplu, Lodash.

La pilcro folosim Immutable.js de pe Facebook pentru a evita această problemă. Chiar dacă este o bibliotecă mare, permite dezvoltatorilor noștri să scrie javascript funcțional previzibil și să evite această capcană. Nu aș putea să-l recomand mai mult.

Iată-l, o caracteristică foarte simplă, dar importantă de aflat în Javascript. Dacă nu sunteți dezvoltator Javascript, felicitări pentru a ajunge la final.

daca tu sunteți un dezvoltator senior Javascript și aceasta a fost o știre pentru dvs., ar trebui să vă simțiți așa:

O ciudatenie Javascript care te va surprinde
gifă

Dacă ți-a plăcut această poveste, te rog? și vă rog să împărtășiți cu alții. De asemenea, vă rugăm să verificați compania mea la pilcro.com. Pilcro ajută startup-urile să rămână coerente cu brandul pe toate canalele lor de marketing. Îți va plăcea ceea ce facem!