Imisebenzi yomcibisholo kanye ne-`this` ku-JavaScript: umhlahlandlela ophelele

Uma ubulokhu uhlela iJavaScript isikhathi esithile, uzoliqaphela igama elingukhiye Lokhu kukunike izinhloko ezingaphezu kweyodwaFuthi njengoba imisebenzi yomcibisholo ivele ku-ES6, izinto zaba nzima nakakhulu... noma zaba lula, kuye ngokuthi uyibheka kanjani.

Kulesi sihloko sizobheka kabanzi ukuthi isebenza kanjani Lokhu kusebenza emisebenzini yendabuko kanye nemisebenzi yomcibisholo.Kungani ngezinye izikhathi kubonakala sengathi kukhomba into ethile kanti ngezinye izikhathi kukhomba into yomhlaba wonke, futhi kuziphi izimo lapho kunengqondo ukusebenzisa imisebenzi yomcibisholo nokuthi kuziphi izimo okungcono ukuyigwema?

Yini ngempela this ku-JavaScript

Igama eligodliwe this Kuyinkomba yomongo wokwenziwa yomsebenzi osebenzayo njengamanje. Ngokungafani nezinye izilimi, ku-JavaScript isinqumo asisekelwe ekutheni umsebenzi uchazwe kuphi, kodwa kunalokho sisekelwe ekusebenzeni komsebenzi. indlela yokubiza.

Lokhu kusho ukuthi umsebenzi ofanayo ungabizwa ngezindlela ezahlukene, futhi kuzo zonke, this ingakhomba into ehlukileAkuyona into ongayishintsha ngesabelo esiqondile (awukwazi ukuyenza) this = algo), kodwa ungayithonya ngezindlela ezithile ezifana call, apply y bind.

Ngaphezu kwalokho, ukuziphatha kwabo kuyahlukahluka phakathi imodi eqinile kanye nemodi engaqinileKwimodi engeyona eqinile, uma ubiza umsebenzi ngokuthi "ungenalutho" (ngaphandle kwento ephambi kwawo), this Ngokuvamile kuyinto yomhlaba wonke (kusiphequluli, window), ngenkathi kumodi eqinile kungaba undefinedLo mehluko ubalulekile uma kuqhathaniswa izibonelo zekhodi ezivela emithonjeni ehlukene.

Lokhu kumongo womhlaba wonke kanye nemisebenzi evamile

Kuziphequluli, uma ungekho ngaphakathi kwanoma iyiphi imodyuli noma umsebenzi, umongo womhlaba wonke uyinto windowfuthi lapho this khomba leyo ntoOkusho ukuthi, uma uthayipha okulandelayo kukhonsoli:

console.log(this === window); // true en un entorno de navegador no estricto

Ngaphakathi komsebenzi omenyezelwe ngendlela "yakudala" (umsebenzi ojwayelekile), inani le this Kuya ngokuthi lowo msebenzi ubizwa kanjani.Uma uyibiza ngaphandle kwento yangaphambilini, kumodi engeyona eqinile this Ngokuvamile kuyinto yomhlaba wonke, futhi empeleni kuyoba njalo undefinedYingakho ngezinye izikhathi, lapho ususa ikhodi kusuka kwenye indawo uye kwenye, Lokhu akusekho lokho obukulindele..

Lokhu ngezindlela zezinto ezichazwe ngemisebenzi evamile

Uma uchaza indlela entweni usebenzisa isichazamazwi sendabuko, this ngaphakathi kwendlela, ireferensi entweni uqobo lwayo lapho leyo ndlela isetshenziswe khona.

Isibonelo, uma unento efana nale:

const obj = {
  speak() {
    console.log(this);
  }
};
obj.speak();

Ikholi obj.speak() kwenza this ngaphakathi speak yiba yilowo objLokhu ukuziphatha abantu abavame ukulindela ngokwemvelo: indlela ikhuluma “egameni” lento.

Uma usebenzisa umsebenzi wakudala esikhundleni se-syntax efingqiwe, umphumela uyafana, ngoba Isihluthulelo sisekutheni indlela esetshenziswa ngayoAkunandaba ukuthi usebenzise isifinyezo sendlela noma igama elingukhiye function ngaphakathi kwento.

Lokhu ngezindlela ezichazwe ngemisebenzi yomcibisholo

Izinto ziyashintsha uma uchaza indlela ngomsebenzi womcibisholo. Okufana nalokhu:

const obj2 = {
  speak: () => {
    console.log(this);
  }
};
obj2.speak();

Kulokhu, lapho kwenziwa obj2.speak() uzobona lokho this Akusekho obj2kodwa umongo wangaphandle wesichazamazwi kuleyo nto, okuthi kuskripthi sesiphequluli sakudala ngokuvamile kube yinto yomhlaba wonke window.

Lokhu kuyadida uma uyibona okokuqala, ngoba ulindele indlela yento ukuthi ikhombe into uqobo lwayo. Kodwa-ke, imisebenzi yomcibisholo ayidali eyayo thisBazuza ifa lenani this yesilinganiso lapho zichazwe khona. Uma leso silinganiso singomhlaba wonke, bazuza ifa lesilinganiso somhlaba wonke; uma singesinye, bazozuza leso silinganiso somhlaba wonke.

Ngakho-ke, isincomo esiphindaphindwayo njalo kumadokhumenti anamuhla yilesi: Ungasebenzisi imisebenzi yomcibisholo njengezindlela zezinto uma udinga this qondisa kuleyo nto.

Ububanzi besichazamazwi this imisebenzi yomcibisholo

Umehluko oyinhloko phakathi kwemisebenzi evamile nemisebenzi yomcibisholo ukuthi lokhu okulandelayo babe nesixhumanisi sesichazamazwi se thisKalula nje: abazinqumeli this hhayi lapho befonelana, kodwa lapho befonelana dala.

Cabanga ngalesi sibonelo:

const obj3 = {
  speak() {
    (() => {
      console.log(this);
    })();
  }
};
obj3.speak();

Lapha kungase kubonakale sengathi, njengangaphakathi speak senza umsebenzi womcibisholo, Lokhu kufanele "kusethwe kabusha" kube yi-globalKodwa kwenzeka okuphambene nalokho: umsebenzi womcibisholo ubamba this yomsebenzi owuzungezileokuyinto kulokhu okuyindlela speak kubizwe ngokuthi obj3.speak()Ngakho-ke, inani le- this Leyo eboniswe kukhonsoli yileyo evela ku- obj3.

Ngisho, imisebenzi yomcibisholo ayinayo eyayo thiskodwa kunalokho sebenzisa kabusha lokho okuzungezileLokhu kuwusizo kakhulu kuma-callback ahlanganisiwe, ama-timer, izithembiso, nanoma yikuphi lapho, ngemisebenzi yakudala, kwadingeka ulwe khona .bind noma ngamaqhinga anjengokuthi const that = this;.

Izibonelo ezisebenzayo zokulahlekelwa nokulondolozwa this

Enye yezinkinga zakudala kuJavaScript ukuthi, lapho kuchazwe umsebenzi ngaphakathi kwendlela, ulahlekelwa ukubhekisela ku- this lokho kwakhomba into futhi ugcina ngowomhlaba wonke noma undefined.

Ake sithathe icala elijwayelekile lokusebenzisa setTimeout ngaphakathi kwendlela yento enomsebenzi wendabuko:

const persona = {
  nombre: 'Agustin',
  decirNombre: function() {
    setTimeout(function() {
      console.log(this.nombre);
    }, 3000);
  }
};
persona.decirNombre(); // Muestra undefined

Lapha lokhu ngaphakathi komsebenzi odluliselwe ku- setTimeout Akuseyona into personaLowo msebenzi wokubuyela emuva usebenza kumongo womhlaba wonke (kusiphequluli, window), ngakho-ke this.nombre Izama ukufunda impahla emhlabeni jikelele, engekho, bese igcina iyi- undefined.

Ngaphambi kokuba kube nemisebenzi yomcibisholo, ikhambi elivamile kwakuwukugcina inani le- this ku-variable eyisizayo ukuze "ukuhudula" kusebenze:

const persona = {
  nombre: 'Agustin',
  decirNombre: function() {
    let that = this; // aquí this es persona
    setTimeout(function() {
      console.log(that.nombre);
    }, 3000);
  }
};

Ngenxa yalolo shintsho, ukubhekisela okufanele entweni kuyagcinwa. Kodwa kuyiqhinga elibi neliphindaphindayo. Ngemisebenzi yomcibisholo, le nkinga yenziwe lula kakhulu:

const persona = {
  nombre: 'Agustin',
  decirNombre: function() {
    setTimeout(() => {
      console.log(this.nombre);
    }, 3000);
  }
};

Lapha umsebenzi womcibisholo awudali owawo this, ngakho ifa le this yendlela decirNombreokuyinto personaUmphumela: I-“Agustin” iboniswa kahle ngaphandle kwesidingo seziguquguquko eziphakathi noma .bind.

shayela, sebenzisa futhi ubophe: ukulawula inani le this

Ngaphezu kwendlela "yemvelo" yokusetha umongo nge-method call, iJavaScript isinika amathuluzi okwenza phoqelela inani le this emisebenzini evamile: call, apply y bind.

Izindlela call() y apply() Babiza umsebenzi ngokushesha, okukuvumela ukuthi udlulise into ofuna ukuyisebenzisa njenge this. Umehluko ukuthi call uthola izimpikiswano ngayinye ngayinye, kuyilapho apply Zitholwa ngohlu. bind(), esikhundleni salokho, ibuyisela umsebenzi omusha nge this “kunamathiselwe” enanini olibonisileukuze ukwazi ukumshayela ucingo kamuva uma kufaneleka.

Nokho, ngemisebenzi yomcibisholo, lezi zindlela azisizi ekushintsheni this ngoba inani layo lixhumene ngokwesichazamazwi. Ungasebenzisa call, apply o bind ukudlulisa izimpikiswano, kodwa hhayi ukushintsha umongo wemisebenzi yomcibisholo, okuwumehluko obaluleke kakhulu ngemisebenzi ejwayelekile.

I-syntax eyisisekelo yemisebenzi yomcibisholo

Ngale kokuziphatha kwe thisImisebenzi yomcibisholo inikeza isichazamazwi esicacile nesicacile ezimweni eziningi. Ifomu elijwayelekile yileli:

(arg1, arg2, ..., argN) => expresion

Leli fomu libuyisela ngokuzenzakalelayo umphumela wokubonakaliswa ngakwesokudla komcibisholo, ngakho-ke Asikho isidingo sokubhala igama return uma unenkulumo eyodwa elula.

Amanye amaphuzu avamile e-syntax:

• Ngaphandle kwemingcele:
  () => 42 noma ngisho _ => 42 uma ungenandaba negama lempikiswano.
• Ngepharamitha eyodwa:
  Ama-parentheses ayazikhethela; ungabhala x => x * 2 o (x) => x * 2.
• Ngamapharamitha amaningi:
  Kudingeka obakaki: (x, y) => x + y.

Uma udinga izitatimende eziningi, ungasebenzisa umzimba webhulokhi ngezihluthulelo:

const sumar = (x, y) => {
  const resultado = x + y;
  return resultado;
};

Kulokhu, njengoba kukhona okhiye, Akusekho ukubuyiselwa okungabonakaliuma ungafaki returnumsebenzi uzobuya undefinedLokhu kusebenza kokubili emisebenzini yomcibisholo kanye nemisebenzi yendabuko.

Buyisela izinto ezingokoqobo ngemisebenzi yomcibisholo

Kukhona imininingwane encane kodwa evamile kakhulu yokubhala: lapho umsebenzi womcibisholo ubuyisela i- into yangempela ngqoKumelwe uyifake kubakaki ukuze umhumushi angaphambanisi nebhulokhi.

Isibonelo:

x => ({ y: x })

Ngaphandle kwalawo ma-parentheses, i-JavaScript ibingachaza ama-curly braces njengokuqala komzimba womsebenzi, hhayi njengento. Kuyiqhinga elilula, kodwa libangela amaphutha amaningi ayisiwula uma ulikhohlwa.

Imisebenzi yomcibisholo: engaziwa futhi ngaphandle kweprototype

Imisebenzi yomcibisholo yile okungaziwa ngokwe-syntaxAzinawo amagama afanele, okungenza izinto zibe nzima ngandlela thile. ukulungisa amaphutha kanye nemiyalezo yamaphuthangoba ku-trace awuboni isihlonzi somsebenzi ngqo, ngaphandle kokuthi usinikeze i-constant enegama elibonakalayo.

Ngaphezu kwalokho, umcibisholo usebenza Abanazo izindawo zabo prototype futhi azikwazi ukusetshenziswa njengezinkampani zokwakhaUma uzama ukubabiza newUzothola iphutha. Ukuze udale izinto usebenzisa abakhi noma amakilasi, kusadingeka usebenzise imisebenzi evamile noma i-syntax. class.

Omunye umphumela wukuthi Azifaneleki kumaphethini adinga ukubhekisela ngaphakathi, njengezinhlobo ezithile zokuphindaphinda noma abaphathi bemicimbi okudingeka bazikhiphe ohlwini besebenzisa this noma igama lomsebenzi uqobo.

Lapho imisebenzi yomcibisholo ikhanya khona

Amandla amakhulu emisebenzi yomcibisholo yiwo kanye lawo ukuxhumanisa amagama thisZilungele izimo lapho ufuna khona ukubizwa kabusha okudlulisela komunye umsebenzi ukuze ulondoloze this yendawo ezungezile.

Isibonelo, entweni enendlela eqala isibali sikhathi futhi edinga ukuqhubeka nokufinyelela izakhiwo zento ngokwayo zisebenzisa this:

const contador = {
  id: 42,
  iniciar() {
    setTimeout(() => {
      console.log(this.id); // this es contador
    }, 1000);
  }
};

Ku-ES5 kwakuvamile ukuthi kudingeke kubekwe .bind(this) ku-callback noma ukulondoloza this kwenye i-variable. Ngemisebenzi yomcibisholo, Ikhodi iba hlanzekile futhi isondele enhlosweni yangempela..

Ziyasebenza kakhulu ngezindlela ze-array ezifana ne- map, filter, reduce kanye nenkampani, ngoba nciphisa umsindo we-syntactic lapho umqondo womsebenzi umfushane:

const numeros = [1, 2, 3];
const dobles = numeros.map(n => n * 2);

Uma zisetshenziswa kancane, lezi zimo ezincane zenza kube lula ukulandela ukugeleza kwedatha ngokushesha.

Nini ukugwema imisebenzi yomcibisholo

Nakuba imisebenzi yemicibisholo iwusizo kakhulu, ayithathi indawo yemisebenzi evamile. Kunezimo eziningana ezicacile lapho Kungcono ukungazisebenzisi.:

• Izindlela zezinto ezincike ku- this:
  Uma uchaza indlela ngokuthi saltos: () => { this.vidas--; } ngaphakathi kwento gato, this Ngeke ikhombe ikati, kodwa endaweni engaphandle, futhi indawo ngeke ibuyekeze njengoba ulindele.
• Ukubizwa kabusha kwemicimbi ye-DOM okudinga this ashukumisayo:
  Kumphathi ofana boton.addEventListener('click', () => { this.classList.toggle('on'); });, this Ngeke kube ukucindezelwa kwenkinobho, kodwa umongo ophezulu, okuzokunikeza iphutha lohlobo.
• Abakhi noma imisebenzi edinga prototype:
  Njengoba ingasetshenziswa ne newImisebenzi yomcibisholo ayifanele ukudala izimo noma amaphethini asekelwe kumodeli.

Kuzo zonke lezi zimo, Umsebenzi ojwayelekile uhlala uyithuluzi elifanele ngoba kuvumela lokho this Ixhumeke ngendlela enamandla endleleni obiza ngayo umsebenzi.

Uma ujwayela ukukhetha ngamabomu phakathi komsebenzi ojwayelekile nomsebenzi womcibisholo kuye ngokuthi yini oyidingayo this futhi kusukela kumongo, Ikhodi yakho izoba lula ukuyiqagela futhi ifundeke kalula. noma ubani ogcina lokho kamuva.

Ekugcineni, ukuqonda ukuthi inani le this ku-JavaScript, nokuthi imisebenzi yomcibisholo izuza kanjani lelo nani Isihluthulelo sokuyeka ukubhekana nemiphumela engalindelekile, ukusebenzisa ushukela we-syntactic we-ES6, nezindlela zokubhala, ama-callback, kanye nabaphathi bemicimbi abenza lokho kanye obekucabanga ukuqonda ububanzi be-lexical lapho bedalwa khona.