Imisebenzi yomcibisholo kanye negama elingukhiye elithi this ku-JavaScript

Ikhaya » Python » Imisebenzi yomcibisholo kanye negama elingukhiye elithi this ku-JavaScript

Uma wake wangena ngemvume this emisebenzini ehlukene yeJavaScript futhi uthole imiphumela ehluke kakhulu, awuwedwa. Abathuthukisi abaningi bahlangana nezimo lapho indlela iphrinta into elindelekile, umsebenzi womcibisholo uphrinta window, bese umcibisholo ofakwe esidlekeni ngokuzumayo ukhomba “ngomlingo” entweni ezungezile. Ukuqonda ukuthi kungani lokho kwenzeka kuyisihluthulelo sokubhala ikhodi ebikezelwayo, engenamaphutha.

Imisebenzi yomcibisholo kanye this Amagama angukhiye angenye yezinhlobo ezibaluleke kakhulu (nezingaqondwanga kahle) ze-JavaScript yanamuhla. Imisebenzi yomcibisholo ibukeka njenge-syntax emfushane nje, kodwa ngaphansi kwe-hood iyashintsha indlela this Kusingathwa kanjani, ukuthi ama-callback aziphatha kanjani, ngisho nalapho kufanele uwasebenzise noma ungawasebenzisi njengezindlela. Ake sihambe kukho konke isinyathelo ngesinyathelo, kusukela ku-syntax kuya kumongo wokwenza, sisebenzisa isiNgisi esilula kanye nezibonelo eziningi ezisebenzayo.

I-syntax yomsebenzi womcibisholo ngaphandle kokudideka

Imisebenzi yomcibisholo yizisho zomsebenzi ezibhalwe nge => isichazamazwi esikhundleni se- function igama eliyisihluthulelo. Ngomqondo, ungacabanga ngazo njengendlela ehlanganisiwe yokubhala: “thatha la mapharamitha, uhlole lesi sisho noma ibhulokhi yekhodi, bese ubuyisela inani.” Ngaphansi, ziseyimisebenzi, kodwa ziziphatha ngendlela ehlukile ngezindlela eziningana ezibalulekile.

Umsebenzi womcibisholo oyisisekelo kakhulu uhambisana ngqo nokubonakaliswa komsebenzi ojwayelekile. Isibonelo, le nkulumo yomsebenzi yakudala:

const multiplyByTwo = function (value) { return value * 2; };

Ingabhalwa kabusha njengomsebenzi womcibisholo kanje:

const multiplyByTwo = (value) => { return value * 2; };

Imisebenzi yomcibisholo iyakhanya uma umzimba ungumuntu oyedwa. Uma umzimba umane nje uyisisho esisodwa esibuyisela okuthile, ungawalahla womabili ama-curly braces kanye ne-explicit return, okuvumela ukubuyiselwa okungacacile:

const multiplyByTwo = value => value * 2;

Uma kukhona ipharamitha eyodwa ngqo ungawashiya ama-parentheses azungezile, kodwa kuphela kuleso simo esithile. So x => x * 2 kuyasebenza, kodwa uma unemingcele engu-zero noma eminingi kufanele ugcine ama-parentheses:

• Amapharamitha ayi-zero: () => 42
• Ipharamitha eyodwa: x => x * 2 or (x) => x * 2
• Amapharamitha amabili noma ngaphezulu: (x, y) => x + y

Uma udinga izitatimende ezingaphezu kwesisodwa emzimbeni, kufanele usebenzise ama-curly braces kanye ne-clear return. Kuleso simo, imisebenzi yomcibisholo isebenza njengemisebenzi ejwayelekile maqondana nokubuyiselwa: cha return, akukho inani elibuyiselwe.

const feedCat = (status) => {
if (status === 'hungry') {
return 'Feed the cat';
} else {
return 'Do not feed the cat';
}
};

Qaphela lapho ubuyisela amagama ezinto ezivela kwimisebenzi yomcibisholo, ngoba ama-brace ento angadidaniswa nomzimba womsebenzi. Ukuze ugweme lokho kungaqondakali, songa into ngokoqobo kubakaki ukuze iJavaScript yazi ukuthi iyinkulumo okufanele ibuyiselwe:

const toObject = value => ({ result: value });

Enye into: imisebenzi yomcibisholo ihlala iyizinkulumo, hhayi izimemezelo. Lokho kusho ukuthi kumele babelwe ku-variable, impahla, noma badluliswe njengempikiswano; abakwazi ukuzimela bodwa njengo function myFunc() {}, futhi aziphakanyiswa ngendlela efanayo nezimemezelo zomsebenzi, ngakho awukwazi ukuzibiza ngaphambi kokuba zichazwe.

Yini ngempela this ku-JavaScript?

Igama elingukhiye this kuyisibopho esinamandla esidalelwa yiJavaScript uma isebenzisa umsebenzi noma indlela yeklasi. Ungacabanga ngayo njengepharamitha engabonakali enenani layo elincike ekutheni umsebenzi ubizwa kanjani futhi kuphi. Lokhu kuyenza ibe namandla futhi iguquguquke, kodwa futhi ibe umthombo omkhulu wokudideka.

Emsebenzini ongewona owesifunda, this ihlala ixazulula uhlobo oluthile lwento; kwimodi eqinile ingaba yinoma yiliphi inani, kufaka phakathi undefined. I-JavaScript inquma lelo nani ngokusekelwe kumongo wokwenziwa: umsebenzi ojwayelekile, ucingo lwendlela, ucingo lomakhi, ikilasi, ububanzi bomhlaba wonke, noma umsebenzi womcibisholo.

Ezingeni eliphezulu leskripthi sakudala (hhayi imodyuli), this ibhekisela kuwo globalThis, okuvame ukuba yisiphequluli window into. Ngakho-ke ukuqhathanisa okulandelayo kusiphequluli kuzoba yiqiniso:

console.log(this === window); // true

Emisebenzini engeyona imicibisholo, this kunqunywa ngokuphelele yisayithi lokushaya ucingo. Uma ushayela ucingo obj.method(), bese ungena ngaphakathi method inani le this is objUma uthatha lowo msebenzi ofanayo bese uwubiza ngokuthi uzimele njengo fn() kwimodi eqinile, this Yiba undefined; kumodi engaguquki, "i-JavaScript" "ithatha indawo" this nge globalThis.

Okubalulekile, okubalulekile akukhona ukuthi umsebenzi uchazwa kuphi, kodwa ukuthi ubizwa kanjani. Indlela ingaphila kuchungechunge lwesibonelo noma idluliselwe kwenye into bese ibona this njenganoma iyiphi into esetshenziswa ngesikhathi sokubiza. Ukudlulisa indlela kuvame ukushintsha indlela yayo this ngaphandle kokuthi uyilungise ngokucacile.

Kukhona futhi amathuluzi okulawula this ngokucacile: call, apply, bind, Futhi Reflect.apply. Lokhu kukuvumela ukuthi "ufake" okufiswayo this inani: fn.call(obj, arg1, arg2) izokhipha fn nge this isethwe ku objImithetho efanayo yokufaka esikhundleni iyasebenza kwimodi engaguquki: uma udlula null or undefined as this, zithathelwa indawo yi globalThis; izinto zokuqala zifakwa ebhokisini ezintweni zazo zokusonga.

Ama-callback angeza olunye ungqimba lwe-indirection, ngoba this kulawulwa yinoma ubani okushayela ucingo lwakho. Izindlela zokuphindaphinda kwe-Array, Promise umakhi, kanye nama-API afanayo avame ukubiza ama-callback nge this isethwe ku undefined (noma into yomhlaba wonke kumodi ye-sloppy). Amanye ama-API, njenge Array.prototype.forEach or Set.prototype.forEach, yamukela okuhlukile thisArg ipharamitha ongayisebenzisa ukusetha ama-callback this.

Amanye ama-API abiza ama-callback ngamabomu ngokwezifiso this amanani. Isibonelo, i reviver impikiswano ku- JSON.parse futhi replacer ngoba JSON.stringify ukuthola this okuboshelwe entweni engumnikazi wempahla ecutshungulwa njengamanje. Abaphathi bemicimbi ku-DOM baboshelwe entweni abanamathiselwe kuyo uma ibhalwe ngendlela "yakudala".

Umqondo oyinhloko: imisebenzi yomcibisholo ayidali eyayo this

Isici esichazayo semisebenzi yomcibisholo ukuthi ayikaze idale okusha this ukubopha. Kunalokho, bayavala (noma “babambe”) this kusukela endaweni ezungezile yesilulumagama ngesikhathi ezidalwe ngaso. Lapho umcibisholo usebenza kamuva, umane uphinde usebenzise lelo nani elibanjiwe, kungakhathaliseki ukuthi ulibiza kanjani.

Empeleni, umsebenzi womcibisholo uziphatha njengokungathi uboshwe ngokuzenzakalelayo unomphela ku- this kobubanzi bayo bangaphandle. Yingakho izindlela ezifana nalezi call, apply, Futhi bind ayikwazi ukushintsha this ngomsebenzi womcibisholo: i thisArg impikiswano ayinakwa nje. Usengadlula amapharamitha ajwayelekile kuwo, kodwa this inani likhiyiwe.

Cabanga ngalesi snippet kububanzi bomhlaba wonke befayela lesikripthi:

const arrow = () => console.log(this);
arrow();

Ngoba umcibisholo uchazwa kukhodi yomhlaba wonke, this kuyinto yomhlaba wonke this (ngokujwayelekile window kuskripthi sesiphequluli), futhi lokho akushintshi. Kufona arrow njengomsebenzi ocacile, ukuwunikeza impahla, noma ukuwudlulisa kuzohlala kubhala into efanayo yomhlaba wonke uma kubizwa kulo mongo.

Ukuziphatha okuthakazelisayo ngempela kuvela uma ufaka imisebenzi yomcibisholo ngaphakathi kwemisebenzi noma izindlela ezijwayelekile. Njengoba umcibisholo ubamba umsebenzi wangaphandle this, iba ithuluzi elinamandla lama-callback adinga ukubhekisela emuva entweni yawo equkethe ngaphandle kwento evamile .bind(this) umkhosi.

const counter = {
id: 42,
start() {
setTimeout(() => {
console.log(this.id); // uses counter.id
}, 1000);
},
};

If start bebesebenzisa umsebenzi wendabuko ongaziwa ngaphakathi setTimeout, kuzodingeka ubophe ngesandla this noma uyigcine ku-variable. Ngemicibisholo, ukuphinda ushayele ngokwemvelo kuzuza ifa this kusukela start, okuyi counter, kanjalo this.id ukuphrinta 42 njengoba kuhlosiwe.

Lokhu kuhlanganiswa kwesichazamazwi kuchaza futhi indlela yakudala ethi “kungani this umbuzo wokushintsha” lapho usebenzisa imicibisholo ezincwadini ezingokoqobo zezinto. Bheka lezi zinto ezimbili:

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

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

Kufona obj1.speak() ukuphrinta obj1, ngoba speak kuyindlela ejwayelekile futhi this isethwe ngokusekelwe kusayithi lokushaya ucingo. Ngokuphikisana, obj2.speak() izingodo zangaphandle this (imvamisa window kuziphequluli), ngoba umcibisholo awusebenzisi into njengeyayo thisInto engokoqobo ngokwayo ayidali into entsha this ububanzi; umzimba womsebenzi kuphela owenza lokho, futhi imisebenzi yomcibisholo yeqa leso sinyathelo.

Manje cabanga ngendlela yento edala futhi ibize umcibisholo wangaphakathi ngokushesha:

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

obj3.speak();

Kulesi simo, umsebenzi womcibisholo wangaphakathi udla ifa this kusukela speak, okuyi obj3 uma kuthiwa obj3.speak(). Ngisho noma umcibisholo uyisidleke, ubizwa ngokushesha, usakhomba ku obj3, hhayi into yomhlaba wonke. Yilokho okuyisisekelo sesichazamazwi this: ilandela ububanzi obuzungezile, hhayi indawo yokubiza yomcibisholo uqobo.

this kuyo yonke imisebenzi, izinto, kanye nabakhi

Ukuze ube yingcweti emisebenzini yomcibisholo futhi this, kuyasiza ukubona ukuthi kanjani this isebenza kuzo zonke izimo ezibalulekile: imisebenzi ejwayelekile, izindlela, abakhi, amakilasi, kanye nobubanzi bomhlaba wonke. Uma leyo mithetho isicacile, ukuziphatha komcibisholo kulula kakhulu ukucabanga ngakho.

Kumsebenzi ocacile (ongewona umcibisholo), this kuncike ku-100% endleleni umsebenzi obizwa ngayo. Uma ushayela ucingo fn() kwimodi eqinile, this is undefined; kwimodi yokungasheleli, ukufaka esikhundleni kwenza this babe globalThisUma ushayela ucingo obj.fn(), khona-ke this is obj. Thutha fn entweni ehlukile noma ku-variable kanye nenani le- this izohamba ngokufanele.

Ngendlela echazwe entweni engokoqobo, this kuyinto indlela efinyelelwa kuyo, hhayi ngempela leyo lapho indlela yayichazwe khona ekuqaleni. If obj.__proto__ ubamba indlela bese ushaya ucingo obj.method(), bese ungena ngaphakathi method, this is obj, hhayi i-prototype.

Abakhi bangenye indaba ekhethekile: uma ubiza umsebenzi nge new, this iboshelwe kusibonelo sento esanda kudalwa. Isibonelo, ku function User(name) { this.name = name; }, ukubiza new User('Alex') lishona this okusha User into. Uma umakhi ebuyisela ngokusobala into engeyona eyakudala, leyo nto ebuyisiwe ithatha indawo yayo. this njengenani lokugcina le new isisho.

I-syntax yekilasi yakhela phezu kwale mithetho ngezimo ezimbili eziyinhloko: i-instance kanye ne-static. Ngaphakathi kwendlela yokwakha noma yesibonelo, this ikhomba isibonelo sekilasi osebenza ngaso. Ngaphakathi kwezindlela ezimile noma amabhlogo okuqala amile, this kubhekisela ekilasini ngokwalo (noma ekilasini elithathwe lapho libizwa ngefa). Izinkambu ze-Instance zihlolwa nge this kuboshwe esimweni esisha; amasimu aqinile bheka this njengomakhi weklasi.

Abakhi beklasi abasuselwe baziphatha ngendlela ehlukile kancane: uze ushayele ucingo super(), akukho okungasetshenziswa this. Iyangena super() iqalisa this ngokunikeza umakhi wesisekelo; ukubuya ngaphambi kokwenza lokho kumakhi osuselwe kuvunyelwe kuphela uma ubuyisela ngokusobala into ehlukile.

Emongweni womhlaba wonke, this kuncike ekutheni imvelo yeJavaScript isonga futhi isebenzise kanjani ikhodi yakho. Kuskripthi sesiphequluli sakudala, izinga eliphezulu this kuyinto yomhlaba wonke; kumojuli ye-ES, izinga eliphezulu this uhlala njalo undefinedAmamojula e-Node.js CommonJS asongwa ngaphakathi futhi avame ukusebenza nge this isethwe ku module.exports. Izimfanelo zomphathi wemicimbi emugqeni ku-HTML execute nge this kusethwe ku-element ezinamathiselwe kuyo.

Umniningwane owodwa ocashile kodwa obalulekile: izinto ezingokoqobo ngokwazo azilethi okusha this ububanzi. Kubhala const obj = { value: this }; ngaphakathi kweskripthi kuzokwenza obj.value kulingana nengaphandle this, hhayi into. Imizimba yokusebenza kuphela (nemizimba yekilasi) eyakha i-dedicated this ukubopha; imicibisholo yeqa lesi sinyathelo ngamabomu bese idla ifa.

Kungani imisebenzi yomcibisholo ilungele ama-callback (futhi uma ingekho)

Ngoba umcibisholo usebenza eduze this, zilungele kahle izimo eziningi zokuphinda ushaye ucingo lapho ufuna ukuthi ukuphinda ushaye ucingo kuqhubeke kubhekisela entweni noma kumongo ozungezile. Lokhu kuyasiza kakhulu ngama-timers, izithembiso, kanye nezindlela zohlu ezifana map, filter, Futhi reduce.

Cabanga ngendlela edinga ukuvuselela impahla ethile ngokuphindaphindiwe usebenzisa setInterval. Ukusebenzisa umsebenzi wendabuko, this ngaphakathi kwe-callback kuzobe kuzenzakalelayo entweni yomhlaba wonke (noma kube undefined kumodi eqinile), ngakho-ke this.count ngeke ikhombe isibonelo sakho. Ngomsebenzi womcibisholo, i-callback isebenzisa ngokwemvelo i- this yendlela yangaphandle.

function Counter() {
this.count = 0;

setInterval(() => {
this.count++;
}, 1000);
}

Ngenxa yomcibisholo, this ngaphakathi kwe-interval callback kubhekisela ku- Counter isibonelo, hhayi window. Uma lokho kubizwa kabusha bekuwumsebenzi ojwayelekile, ubungadinga noma yikuphi .bind(this) noma i-variable ephakathi efana const self = this; ukugcina ireferensi.

Imisebenzi yomcibisholo iphinde ibe lula ikhodi isebenzisa izindlela ze-array, lapho uvame ukungakhathali khona this kube bonke. Uma udlula umsebenzi wendabuko njengokuphinda ushaye ucingo, okufakiwe this kuvamile undefined, futhi ungase ukhohlwe lokho. Imicibisholo ikwenza kucace ngokubonakalayo ukuthi umsebenzi uwukumapha nje kokufakwayo kokuphumayo.

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

Kodwa-ke, kunezimo ezibalulekile lapho imisebenzi yomcibisholo iyisinqumo esingalungile, ikakhulukazi uma udinga i-dynamic this. Amaphethini amabili ajwayelekile aphikisanayo asebenzisa imisebenzi yomcibisholo njengezindlela zezinto kanye nabaphathi bemicimbi ye-DOM abathembele ku- this ngokuba yisici.

Cabanga ngento elandela izimpilo zekati:

const cat = {
lives: 9,
jump: () => {
this.lives--; // bug: this is not cat
},
};

cat.jump();

Kusukela jump umcibisholo, this akubhekiseli ku- cat kodwa kunoma yini this yilapho into engokoqobo yadalwa khona (ngokuvamile into yomhlaba wonke). Okuhlosiwe this.lives-- noma ngabe iphonsa (kumodi eqinile) noma iguqula into engahlobene buthule. Ukusebenzisa indlela ejwayelekile yokubhala nansi indlela efanele.

Abalaleli bomcimbi we-DOM bayafana: iphethini ejwayelekile this.classList.toggle('on') ngaphakathi kokubuyela emuva komcimbi kuncike ku this ngokuba yisici esabangela umcimbi. Ngomsebenzi womcibisholo, this akusekho okukhomba into, ngakho ikhodi iyaphuka.

const button = document.getElementById('press');

button.addEventListener('click', () => {
this.classList.toggle('on'); // this is not button
});

Kulesi simo umphathi kufanele abe ngumsebenzi ojwayelekile ukuze this iboshelwe yisiphequluli entweni yenkinobho. Imisebenzi yomcibisholo ayisebenzi nje njengokufaka esikhundleni uma i-logic yakho ilindele this ukuba yinhloso yomcimbi oguqukayo.

Enye inkinga ecashile ukuthi imisebenzi yomcibisholo ayiziwa ngokwe-syntactically. Ngokuvamile azinalo igama lazo (ngale kwanoma yikuphi ukushintshashintsha ezinikezwe kona), okungenza ama-stack traces angachazi kahle futhi ukuphindaphinda kube nzima kancane. Eningini ikhodi yangempela lokho kuyindlela yokuhweba elawulekayo, kodwa kufanelekile ukukukhumbula.

Amacala akhethekile: ama-getter, ama-setter, izindlela eziboshiwe kanye nama-odd corners

Ama-Getter nama-setter alandela umthetho ofanayo "wesayithi lokushaya ucingo": this yinto lapho impahla ifinyelelwa khona, hhayi leyo lapho yayichazwe khona ekuqaleni. Uma i-getter izuzwe njengefa kumodeli bese uyibiza ngento ethathwe kuyo, this ngaphakathi kwe-getter kubhekisela entweni ethathwe kuyo.

Izindlela ezihlanganisiwe ezenziwe nge Function.prototype.bind kukunikeza ukuziphatha okufana kancane nemisebenzi yomcibisholo, kodwa ezingeni lemisebenzi evamile. Uma ufona f.bind(obj), udala umsebenzi omusha this imiselwe unomphela ku- obj, kungakhathaliseki ukuthi kubizwa kanjani. Lokhu kungaba usizo emakilasini lapho udinga ukugcina this noma ngabe indlela ihlukanisiwe.

class Example {
constructor() {
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
console.log(this); // always the instance
}
}

Ububi bezindlela eziboshiwe kanye nemisebenzi yomcibisholo esetshenziswa njengezinkambu zesibonelo ukuthi insiza ngayinye ithola ikhophi yayo yomsebenzi, okungakhulisa ukusetshenziswa kwememori. Lokhu kuthengiselana kuvame ukwamukeleka uma ubopha inani elincane lezindlela ezivame ukwahlukana, kodwa kuyinto okufanele uyiqaphele kukhodi ebalulekile yokusebenza.

Kukhona futhi amacala athile asendulo lapho this iziphatha ngendlela ehlukile, njengangaphakathi kwe- with isitatimende. Ngaphakathi a with (obj) { ... } ibhulokhi, ebiza umsebenzi oyimpahla ye obj isebenza kahle njengokungathi ubhalile obj.method(), kanjalo this ubophezelekile objIkhodi yesimanje kufanele igweme with, kodwa ukuqonda lokhu okuhlukile kucacisa ukuthi this kusancike kakhulu ekutheni ucingo lomsebenzi lwakhiwa kanjani.

Abaphathi bemicimbi esemgqeni ku-HTML nabo banomthetho okhethekile: ikhodi yomphathi wemicimbi esemgqeni ezungezile ibona this njengesici, kodwa imisebenzi yangaphakathi echazwe ngaphakathi kwalowo mphathi ibuyela emuva kokujwayelekile this imithetho. Ngakho-ke umsebenzi wendabuko wangaphakathi, ongaboshelwe kunoma yini, uzovame ukubona this as globalThis (noma undefined kumodi eqinile), hhayi into.

Okokugcina, khumbula ukuthi imisebenzi yomcibisholo ayinayo i- prototype impahla futhi ayikwazi ukusetshenziswa njengabakhi abane new. Ukuzama new MyArrow() izophonsa i-TypeError. Uma udinga umsebenzi ongasebenza njengomakhi, kumele usebenzise umsebenzi ojwayelekile noma ikilasi.

Ukukhumbula le mininingwane kwenza kube lula kakhulu ukukhetha phakathi kwemisebenzi yomcibisholo nemisebenzi yendabuko. Sebenzisa imicibisholo lapho ufuna khona isichazamazwi this kanye ne-syntax emfushane, bese ubuyela emisebenzini evamile noma nini lapho udinga i-dynamic, eqhutshwa yi-call site this ukuziphatha noma i-semantics yomakhi.

Uma usuqonda ukuthi kanjani this uma iboshiwe kuzo zonke izimo, imisebenzi yomcibisholo iba umsizi onamandla esikhundleni sokuba umthombo omangalisayo weziphazamisi. Zenza kube lula amaphethini avamile njengokubuyela emuva kanye nokuguqulwa okulula, kuyilapho imisebenzi ejwayelekile iqhubeka nokusingatha izindima ezincike kuzo. this ukubopha, njengezindlela, abakhi, kanye nabaphathi bemicimbi eguquguqukayo.