de Ashay Mandwarya ?️??

Un ghid pentru asta în JavaScript

Un ghid pentru acest lucru in JavaScript
Fotografie de Sydney Rae pe Unsplash

this descărcarea cuvintelor cheie este una dintre cele mai utilizate și totuși neînțelese în JavaScript. Voi încerca să schimb asta astăzi.

Să ne întoarcem la vremurile bune de școală veche, când am aflat despre pronume.

Phelps înoată repede pentru că el vrea să câștige cursa.

Rețineți utilizarea pronumelui „el”. Nu ne adresăm direct lui Phelps aici, ci folosim pronumele pentru el a se referi la Phelps. În mod similar, JavaScript folosește this cuvânt cheie ca referent pentru a se referi la obiectul din context adică subiectul.

Exemplu:

Un ghid pentru acest lucru in JavaScript
var car= {make: "Lamborghini",model: "Huracán",fullName: function () {console.log(this.make+" " +this.model);console.log(car.make+ " " +car.model);}}car.fullName();

În codul de mai sus, avem un obiect car care are proprietățile make, model și fullName. Valoarea a fullName este o funcție care tipărește numele complet al mașinii folosind 2 sintaxe diferite.

  • Folosind this = & gt; this.make+” “ +this.model the tlui se referă la obiectul în context care is car so this.make este eficiently car.make și așa is this.model.
  • Folosind notația punct, putem accesa proprietățile obiectelor, car.make & car.model .

this este!

Acum, că am înțeles ce este this și este cea mai simplă utilizare, haideți să facem câteva reguli generale, astfel încât să ne putem aminti întotdeauna.

JS this cuvântul cheie se referă la obiectul căruia îi aparține.

var car={make:'....'func:()=>{console.log(this.make)}}

this în fragmentul de mai sus aparține mașinii obiect.

Este nevoie de valori diferite în funcție de utilizare

  1. În interiorul unei metode.
  2. În interiorul unei funcții.
  3. Singur.
  4. Într-un eveniment.
  5. call(), și apply().

În interiorul unei metode

Când this este folosit în interiorul unei metode, se referă la obiectul proprietar.

Funcțiile definite în interiorul unui obiect se numesc metode. Să luăm din nou exemplul mașinii noastre.

var car= {make: "Lamborghini",model: "Huracán",fullName: function () {console.log(this.make+" " +this.model);console.log(car.make+ " " +car.model);}}car.fullName();

fullName() aici este o metodă. this în interiorul acestei metode aparține car.

În interiorul unei funcții

this în interiorul unei funcții este puțin complicat. Primul lucru de înțeles este că, la fel ca toate obiectele au proprietăți, la fel funcțiile au și proprietăți. Ori de câte ori funcția respectivă este executată, primește this property, care este o variabilă cu valoarea obiectului care o invocă.

acest este într-adevăr doar o referință rapidă pentru „obiectul antecedent” – obiectul invocator. – javascriptissexy.com

Dacă funcția nu este invocată de un obiect, atunci this în interiorul funcției aparține obiectului global, care se numește fereastră. În acest caz, acest lucru se va referi la valorile definite în domeniul global. Să vedem un exemplu pentru o mai bună înțelegere:

var make= "Mclaren";var model= "720s"function fullName(){ console.log(this.make+ " " + this.model);}
var car = {    make:"Lamborghini",    model:"Huracán",    fullName:function () {    console.log (this.make + " " + this.model);    }}    car.fullName(); // Lmborghini Huracán    window.fullName(); // Mclaren 720S    fullName(); // Mclaren 720S
1612099088 428 Un ghid pentru acest lucru in JavaScript

Aici make, model și fullName sunt definite la nivel global, în timp ce car obiectul are o implementare de fullName de asemenea. Când este invocat de car obiect se referă la proprietățile definite în interiorul obiectului. Pe de altă parte, celelalte două apeluri funcționale sunt aceleași și returnează proprietățile definite global.

Singur

Când este utilizat singur, nu se află în interiorul niciunei funcții sau obiecte, this se referă la obiectul global.

1612099088 580 Un ghid pentru acest lucru in JavaScript

this aici se referă la proprietatea de nume global.

Într-un eveniment

Evenimentele pot fi de orice tip, dar, din motive de simplitate și claritate, să luăm un eveniment de clic.

1612099089 540 Un ghid pentru acest lucru in JavaScript

Ori de câte ori se face clic pe un buton și se ridică un eveniment, acesta poate apela o altă funcție pentru a face o anumită sarcină pe baza clicului. Dacă this este folosit în interiorul acelei funcții, se va referi la elementul care a generat evenimentul. În DOM, toate elementele sunt stocate ca obiecte. De aceea, atunci când un eveniment este ridicat, acesta se referă la acel element, pentru că elementul paginii web este de fapt un obiect din interiorul DOM.

Exemplu:

<button onclick="this.style.display='none'">  Remove Me!</button>

call (), apply () & bind ()

  • legare: ne permite să setăm this valoare pe metode.
  • call & apply: permiteți-ne să împrumutăm funcții și să setăm this valoare la invocarea funcției.

Call, Bind și Apply sunt în sine un subiect al unei alte postări. Ele sunt foarte importante, iar explicarea lor aici nu este posibilă, deoarece ar trebui să știm totul despre this pentru a cunoaște utilizarea acestor funcții.

Cea mai dificilă parte

Dacă se înțelege bine, this face munca noastră mai ușoară într-un fel. Dar există unele cazuri în care este înțeles greșit.

Exemplul 1.

1612099089 962 Un ghid pentru acest lucru in JavaScript
var car = {make:"Lamborghini",model:"Huracán",name:null,fullName:function () {this.name=this.make + " " + this.model;console.log (this.name);}}
var anotherCar={make:"Ferrari",model:"Italia",name:null}
    anotherCar.name= car.fullName();

Aici obținem un rezultat neașteptat. Am împrumutat o metodă care folosește this dintr-un alt obiect, dar problema aici este că metoda este atribuită numai anotherCar funcție, dar este de fapt invocat pe car obiect. De aceea, obținem rezultatul ca Lamborghini și nu Ferrari.

Pentru a rezolva acest lucru, folosim call() metodă.

1612099090 972 Un ghid pentru acest lucru in JavaScript

Aici call() apeluri de metodă fullName() pe anotherCar obiect care inițial nu are fullName() funcţie.

Putem vedea, de asemenea, când înregistrăm fișierul car.name și anotherCar.name obținem rezultatul pentru acesta din urmă nu pe fost, ceea ce înseamnă că funcția a fost într-adevăr invocată pe anotherCar și nu pe car.

Exemplul 2.

1612099090 382 Un ghid pentru acest lucru in JavaScript
var cars=[{ make: "Mclaren", model: "720s"},{make: "Ferrari",model: "Italia"}]
var car = {cars:[{make:"Lamborghini", model:"Huracán"}],fullName:function () {console.log(this.cars[0].make + " " + this.cars[0].model);}}var vehicle=car.fullName;vehicle()

În fragmentul de mai sus avem un obiect global numit mașini și avem același nume de obiect în interiorul obiectului mașină. fullName() metoda este apoi atribuită variabilei vehiculului care este apoi numită. Variabila aparține obiectului global deci this numeste global cars obiect în loc de cars obiect din cauza contextului.

Pentru a rezolva acest lucru pe care îl folosim .bind() funcție pentru a rezolva problema.

1612099090 634 Un ghid pentru acest lucru in JavaScript

Legarea ne ajută să setăm în mod specific this valoarea și, prin urmare, variabila vehicul indică în mod explicit obiectul mașinii și nu obiectul global, deci aceasta se află în contextul car obiect.

Exemplul 3.

1612099091 279 Un ghid pentru acest lucru in JavaScript
var car = {cars:[{make:"Lamborghini",model:"Huracán"},{ make: "Mclaren", model: "720s"},{make: "Ferrari",model: "Italia"}],fullName:function(){this.cars.forEach(()=>{console.log (this.make + " " + this.model);})}}car.fullName();

În fragmentul de mai sus, fullName() apelează la o funcție care a iterat prin matricea de mașini folosind forEach. În interiorul forEach există o funcție anonimă în care acest lucru își pierde contextul. O funcție din interiorul unei funcții din JavaScript se numește a closure. Closures sunt foarte importante și utilizate pe scară largă în JavaScript.

Un alt concept important care joacă un rol aici este scope. O variabilă din interiorul unei funcții nu poate accesa variabile și proprietăți în afara acesteia scope. this în interiorul funcției anon nu poate accesa this în afara ei. Asa de this nu are încotro să meargă decât să arate spre obiect global. Dar acolo, nu este definită nicio proprietate this pentru a accesa astfel undefined este tipărit.

O soluție pentru cele de mai sus este că putem atribui unei variabile valoarea this, în afara funcției anonime și apoi utilizați-o în interiorul acesteia.

1612099091 338 Un ghid pentru acest lucru in JavaScript

Aici, variabila auto conține valoarea lui this care este folosit cu funcția interioară oferindu-ne astfel ieșirea.

Exemplul 4.

1612099091 552 Un ghid pentru acest lucru in JavaScript
var car= {make: "Lamborghini",model: "Huracán",fullName: function (cars) {cars.forEach(function(vehicle){console.log(vehicle +" "+ this.model);})}}car.fullName(['lambo','ferrari','porsche']);

Acesta este un exemplu revizuit, în care this nu a fost accesibil, așa că am păstrat valoarea utilizând o variabilă numită auto. Să folosim funcția săgeată pentru a rezolva același lucru:

1612099092 736 Un ghid pentru acest lucru in JavaScript

După cum puteți vedea, folosind o funcție săgeată în forEach() rezolvă automat problema și nu trebuie să facem legare sau să oferim this valoare pentru o altă variabilă. Acest lucru se datorează faptului că funcțiile săgeată își leagă contextul astfel this se referă de fapt la contextul originar sau la obiectul originar.

Exemplul 5.

1612099092 468 Un ghid pentru acest lucru in JavaScript
var car= {make: "Lamborghini",model: "Huracán",fullName: function () {console.log(this.make +" "+ this.model);}}var truck= {make: "Tesla",model: "Truck",fullName: function (callback) {console.log(this.make +" "+ this.model);callback();}}truck.fullName(car.fullName);

Codul de mai sus este format din două obiecte identice, cu unul care conține un sună din nou funcţie. A sună din nou funcția este o funcție trecută într-o altă funcție ca argument, care este apoi invocată în interiorul funcției externe pentru a finaliza un fel de rutină.

Aici, obiectul camionului fullName metoda constă dintr-o sună din nou care este invocat și în interiorul său. Obiectul mașinii noastre este ca înainte. Când invocăm camionul fullName metoda cu callback (argument) ca fullName metoda obiectului mașinii, obținem rezultate ca Tesla Truck și undefined undefined.

După ce am citit despre this este posibil ca unii dintre voi să fi primit o bănuială care car.fullName ar imprima modelul și marca obiectului camionului, dar spre dezamăgirea ta, this din nou ne-a jucat un truc. Aici car.fullName este transmis ca argument și nu este de fapt invocat de obiectul camionului. Callback-ul invocă metoda obiectului auto, dar rețineți că site-ul de apel efectiv pentru funcție este callback-ul care leagă acest lucru de obiectul global. Este un pic confuz, așa că citește-l din nou!

1612099093 719 Un ghid pentru acest lucru in JavaScript

Aici, pentru a obține claritate, imprimăm this în sine. Putem vedea că this de apel invers are un domeniu global. Deci, pentru a obține un rezultat, creăm global make și model proprietăți.

1612099093 988 Un ghid pentru acest lucru in JavaScript

Din nou, rularea aceluiași cod cu global make și model proprietăți obținem în cele din urmă răspunsul la global this. Acest lucru demonstrează că this face referire la obiectul global.

Pentru a obține rezultatele pe care le dorim, car.fullName rezultat pe care îl vom folosi din nou bind() pentru a lega greu obiectul mașinii de apelare, ceea ce va face totul din nou corect.

1612099093 780 Un ghid pentru acest lucru in JavaScript

Rezolvat!

Fără îndoială că this este foarte util, dar are și propriile capcane. Sper că ți-am înțeles destul de ușor. Dacă doriți mai mult conținut simplificat astfel, urmați-mă pe Medium. Vă rugăm să lăsați răspunsurile dvs. și să le împărtășiți dacă v-a plăcut.

Un ghid pentru acest lucru in JavaScript
Google