scrii JavaScript și dintr-o dată seama cu groază și groază pe care le-ați scris o funcție uriașă. Li s-a întâmplat celor mai buni dintre noi. Acum vine nevoia aproape de neoprit de a separa funcția în bucăți mai mici.
funcțiile mari înseamnă o mulțime de responsabilități într-un singur loc și, eventual, miros de cod, deci este o idee bună în sine. Dar doriți să rupeți funcția în așa fel încât să nu-și piardă sensul Sau contextul. Pentru a face acest lucru, trebuie să vă gândiți la înlănțuirea metodei – numită și înlănțuirea funcției. Acest articol va explica ce vreau să spun prin asta.
cerințe preliminare
înainte de a începe, iată câteva concepte JavaScript cu care trebuie deja să vă familiarizați:
- funcții săgeată
- metode matrice
- funcții asincron
cei mai experimentați dezvoltatori vor avea o anumită experiență cu Array metode, cum ar fi harta, reduce, și filtru. Probabil că ați întâlnit deja ceva de genul acesta:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: înlănțuirea metodei se întâmplă atunci când doriți să apelați mai multe funcții folosind același obiect și referința acestuia. În exemplul de mai sus, metoda matrice map returnează un Array, care are un număr formidabil de metode.
deoarece returnați o referință care indică un Array, veți avea acces la toate proprietățile Array. Este același principiu pe care îl utilizați pentru propria metodă de înlănțuire.
o mai bună înțelegere a acestui
Nu voi acoperi toate nuanțele this, dar este bine să înțelegem de ce this funcționează așa cum o face. Nu contează cât de experimentat esti, cuvântul cheie Acest lucru poate fi greu de înțeles. Este adesea motivul pentru care lucrurile nu funcționează așa cum vă așteptați să funcționeze.
Iată esența acesteia: this va indica întotdeauna curentul scope sau instanța de unde se numește. Un exemplu:
const dog = { is: null, log: () => console.log(this.is), bark() { this.is = "woofing"; this.log(); return this; }, walk() { this.is = "walking"; this.log(); return this; }, eat() { this.is = "eating"; this.log(); return this; }};dog .bark() .eat() .walk();când scrieți o funcție ca aceasta (fără joc de cuvinte intenționat), este posibil să doriți să înlănțuiți metode care sunt legate de obiect. Obiectul dog are 3 metode: walk, barkși eat. De fiecare dată când numesc oricare dintre funcțiile sale, o consolă ar trebui să arate reprezentarea a ceea ce face câinele în acel moment exact.
dar există o problemă cu asta. Dacă îl rulați în browser, veți realiza că nu funcționează așa cum era de așteptat. Asta pentru că funcțiile săgeată folosesc domeniul lexical, unde this se referă la domeniul său înconjurător – în acest caz window, nu obiectul în sine.
pentru a rezolva acest lucru, ar trebui să folosim un apel de funcție anonim pentru a reprezenta proprietatea log :
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); }acum, domeniul de aplicare al câinelui this va fi accesibil în interiorul funcției.
folosind clasa
puteți obține același rezultat folosind clase:
class Dog { is = null; log() { console.log(this.is); } bark() { this.is = "woofing"; this.log(); return this; } walk() { this.is = "walking"; this.log(); return this; } eat() { this.is = "eating"; this.log(); return this; }}const dog = new Dog();dog .bark() .eat() .walk();utilizarea prototipului
dacă trebuie să utilizați prototipul, faceți-l în acest fel:
function Dog() {}Dog.prototype.is = null;Dog.prototype.log = function() { console.log(this.is);};Dog.prototype.bark = function() { this.is = "woofing"; this.log(); return this;};Dog.prototype.walk = function() { this.is = "walking"; this.log(); return this;};Dog.prototype.eat = function() { this.is = "eating"; this.log(); return this;};const dog = new Dog();dog .bark() .eat() .walk();Ce Zici De Funcțiile Asincron?
async funcțiile sunt zahăr sintetic pentru promisiuni și generatoare. Când declarați o funcție async, știți că va returna o promisiune. Din acest motiv, veți avea acces și la toate metodele promisiunii.
const requests = { user: null, action: null, log(something) { console.log(this); }, async getUser() { this.user = await new Promise(resolve => { setTimeout(() => { resolve("Douglas Pires"); }, 1000); }); this.log("user"); return this; }, async registerAction() { this.action = await new Promise(resolve => { setTimeout(() => { resolve("programming stuff"); }, 1000); }); this.log("action"); return this; }};requests.getUser().then(() => requests.registerAction()); cu toate acestea, nu este o idee bună să legați o grămadă de promisiuni împreună. Vă recomandăm să utilizați o grămadă de await cuvinte cheie în schimb. Este mai ușor și va face codul mult mai ușor de citit.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programmingși veți avea acces la aceleași proprietăți aici:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programmingîn concluzie
înlănțuirea funcții vine la îndemână atunci când trebuie să manipuleze un obiect. Este, de asemenea, o modalitate practică de a îmbunătăți lizibilitatea codului. Cu toate acestea, după cum ați văzut mai sus, ar trebui să vă legați cu înțelepciune.
în acest articol, am vorbit despre this, clase, prototipuri și async funcții în contextul înlănțuirii metodei JavaScript. Sper că ați luat câteva sfaturi utile și acum sunteți mai bine informați despre subiect. Puteți găsi depozitul meu cu tot codul pe metoda JavaScript înlănțuirea chiar aici. Ne vedem în următoarea postare!
ți-a plăcut să citești acest articol? Simțiți-vă liber să partajați pe rețelele de socializare folosind butoanele de mai jos. Alternativ, am scris și despre cum puteți construi un generator de palete de culori folosind nuxt și Vuetify. Du-te și verifică!
