A Javascript forvitni sem mun ná þér út

Klóna sauðfé

Þetta verk lýsir eiginleikum sem góðir Javascript verktaki ættu að þekkja. Og þegar þú hefur lesið þetta verk geturðu látið eins og þú hafir vitað um það í aldir eins og ég.

Athugið: Ef þú ert ekki Javascript verktaki gæti þetta verið svolítið erfitt að fá tennurnar í. Ef þú ert það skaltu sylgja þig í ákaflega stuttri ferð.

Það hefur allt að gera með afritunarbreytur (eða klónun, þess vegna kindurnar).

Við skulum kafa beint inn.

Að afrita strengi

Við skulum gera smá erfðaskrá:

var initialName = 'William';
var copyName = initialName; copyName = 'Bill';
console.log (initialName); // prentar 'William' console.log (copyName); // prentar 'Bill'

Þetta virðist allt búast við. Við afritum upphafsnafn og breytum síðan gildi þess. upphafs nafn prentar 'William' og afritaðName prentar 'Bill'.

Svo langt svo gott. Við skulum prófa sömu æfingu með hlutum í stað strengja. (Búast við hinu óvænta)

Að afrita hluti

var initialObject = {name: 'William'};
var copyObject = initialObject; copyObject.name = 'Bill';
console.log (initialObject.name); // prentar út „Bill“ console.log (copyObject.name); // prentar 'Bill'

Hmmm, hérna er málið. Þegar við prentum nafn initialObject hefur það breyst í Bill.

Svo hvað hefur gerst hér?

Þegar við settum nafnið í copyObject breytti það einnig nafninu í initialObject. Þetta er vegna þess að hlutir eru afritaðir með tilvísun. copyObject er aðeins tilvísun í undirliggjandi gögn.

Svo þegar við breytum nafninu í copyObject, þá breytir það einnig nafninu í initialObject vegna þess að það er að vísa til sama hluti undirliggjandi gagna.

Þar sem þú gætir lent í því

Í stórum forritum gæti þetta leitt til þess að hlutar gagnagerðarinnar séu í raun á mörgum stöðum á sama tíma.

Svo ef þú breytir hlut í einum hluta af forritakóðanum þínum gætirðu verið að breyta því annars staðar. Þetta getur stundum valdið óæskilegri hegðun (eins og endurtekning) og getur verið erfitt að kemba og einangra.

Þó að þetta virðist virkilega einfalt, í flóknum vefforritum sem nota vinsælar rammar, getur þetta einfalda grunnstig valdið verulegum höfuðverk fyrir verktaki.

Dæmi um Redux / React

Dæmi um það þar sem ég hef séð verktaki lenda í þessu aftur og aftur er í Redux aðgerðarhöfundum þar sem þú vinnur ástand áður en þú sendir aðgerðir. Með því að vinna með hlutinn sem er sendur til aðgerðarhöfundarins án þess að klóna hann, getur þú í raun breytt undirliggjandi ástandi, eða brugðist við hlutarástandi fyrir sendingu þína.

Lausn okkar

Það eru mörg bókasöfn sem bjóða upp á einræktunaraðgerðir fyrir hluti og fylki, til dæmis Lodash.

Á pilcro notum við Immutable.js Facebook til að forðast þetta mál. Jafnvel þó að það sé stórt bókasafn, gerir það hönnuðum okkar kleift að skrifa fyrirsjáanlegt JavaScript og forðast þennan gryfju. Ég gat ekki mælt með því meira.

Svo þar höfum við það, mjög einfaldur en mikilvægur eiginleiki að vita um í Javascript. Ef þú ert ekki Javascript verktaki skaltu nota það til loka.

Ef þú ert háttsettur Javascript verktaki og þetta var frétt fyrir þig, þá ættirðu að líða svona:

gifhy

Ef þér líkaði vel við þessa sögu, vinsamlegast og vinsamlegast deildu með öðrum. Vinsamlegast skoðaðu fyrirtækið mitt á pilcro.com. Pilcro hjálpar gangsetningum að vera í samræmi við vörumerki á öllum mismunandi markaðsleiðum. Þú munt elska það sem við erum að gera!