JavaScriptin 'this'-sidonta: Kontekstin vaihto vs. Nuolifunktioiden käyttäytyminen

JavaScriptin 'this'-avainsana on yksi kielen tehokkaimmista, mutta usein väärinymmärretyistä ominaisuuksista. Sen käyttäytyminen voi olla hämmennyksen lähde, erityisesti uusille JavaScript-kehittäjille tai niille, jotka ovat tottuneet kieliin, joissa on tiukemmat scope-säännöt. Pohjimmiltaan 'this' viittaa kontekstiin, jossa funktio suoritetaan. Tämä konteksti voi muuttua dynaamisesti, mikä johtaa usein kutsuttuun 'kontekstin vaihtoon'. 'This'-avainsanan muuttumisen syiden ja tapojen ymmärtäminen on välttämätöntä kestävän ja ennustettavan JavaScript-koodin kirjoittamiseksi, erityisesti monimutkaisissa sovelluksissa ja globaalin tiimin kanssa työskennellessä. Tämä postaus syventyy perinteisten JavaScript-funktioiden 'this'-sidonnan monimutkaisuuksiin, vertaa sitä nuolifunktioiden käyttäytymiseen ja tarjoaa käytännön näkemyksiä kehittäjille ympäri maailmaa.

'this'-avainsanan ymmärtäminen JavaScriptissä

'this' on viittaus objektiin, joka parhaillaan suorittaa koodia. 'this'-arvon määrää se, miten funktiota kutsutaan, ei se, missä funktio määritellään. Tämä dynaaminen sidonta tekee 'this'-avainsanasta niin joustavan, mutta myös yleisen sudenkuopan. Käymme läpi erilaisia skenaarioita, jotka vaikuttavat 'this'-sidontaan standardifunktioissa.

1. Globaali konteksti

Kun 'this' -avainsanaa käytetään minkä tahansa funktion ulkopuolella, se viittaa globaaliin objektiin. Selaimessa globaali objekti on window. Node.js:ssä se on global.

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

// Node.js-ympäristössä
// console.log(this === global); // true (ylimmällä tasolla)

            

              
                Copy
              
            
          

Globaali näkökulma: Vaikka window on selaimille ominainen, käsite globaalista objektista, johon 'this' viittaa ylätasolla, pätee eri JavaScript-ympäristöissä. Tämä on perustavanlaatuinen osa JavaScriptin suorituskontekstia.

2. Metodin kutsuminen

Kun funktiota kutsutaan objektin metodina (piste- tai hakasulumerkinnällä), 'this' kyseisen funktion sisällä viittaa objektiin, johon metodia kutsuttiin.

            const person = {
  name: "Alice",
  greet: function() {
    console.log(`Hei, nimeni on ${this.name}`);
  }
};

person.greet(); // Tuloste: Hei, nimeni on Alice

            

              
                Copy
              
            
          

Tässä esimerkissä greet-funktiota kutsutaan person-objektin avulla. Siksi greet-funktion sisällä 'this' viittaa person-objektiin, ja this.name hakee oikein "Alice".

3. Konstruktorikutsu

Kun funktiota käytetään konstruktorina new-avainsanalla, konstruktorin sisällä oleva 'this' viittaa juuri luotuun objektin instanssiin.

            
function Car(make, model) {
  this.make = make;
  this.model = model;
  this.displayInfo = function() {
    console.log(`Tämä auto on ${this.make} ${this.model}`);
  };
}

const myCar = new Car("Toyota", "Corolla");
myCar.displayInfo(); // Tuloste: Tämä auto on Toyota Corolla

            

              
                Copy
              
            
          

Tässä new Car(...) luo uuden objektin, ja Car-funktion sisällä oleva 'this' osoittaa tähän uuteen objektiin. Ominaisuudet make ja model määritetään sille.

4. Yksinkertainen funktion kutsuminen (kontekstin vaihto)

Tässä hämmennys usein alkaa. Kun funktiota kutsutaan suoraan, ei metodina tai konstruktorina, sen 'this'-sidonta voi olla hankala. Ei-tiukassa tilassa 'this' on oletusarvoisesti globaali objekti (window tai global). Tiukassa tilassa ('use strict';) 'this' on undefined.

            function showThis() {
  console.log(this);
}

// Ei-tiukka tila:
showThis(); // Selaimessa: osoittaa window-objektiin

// Tiukka tila:
'use strict';
function showThisStrict() {
  console.log(this);
}
showThisStrict(); // undefined

            

              
                Copy
              
            
          

Globaali näkökulma: Tiukan ja ei-tiukan tilan ero on globaalisti kriittinen. Monet modernit JavaScript-projektit pakottavat tiukan tilan oletuksena, jolloin undefined-käyttäytyminen on yleisempi skenaario yksinkertaisille funktion kutsuille. On tärkeää olla tietoinen tästä ympäristöasetuksesta.

5. Tapahtumankäsittelijät

Selainympäristöissä, kun funktiota käytetään tapahtumankäsittelijänä, 'this' viittaa tyypillisesti DOM-elementtiin, joka laukaisi tapahtuman.

            // Olettaen HTML-elementti: Klikkaa minua

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

button.addEventListener('click', function() {
  console.log(this); // 'this' viittaa button-elementtiin
  this.textContent = "Klikattu!";
});

            

              
                Copy
              
            
          

Globaali näkökulma: Vaikka DOM-manipulaatio on selainkohtaista, perusperiaate siitä, että 'this' sidotaan tapahtuman käynnistäneeseen elementtiin, on yleinen malli tapahtumavetoisessa ohjelmoinnissa eri alustoilla.

6. Call, Apply ja Bind

JavaScript tarjoaa menetelmiä 'this'-arvon asettamiseksi nimenomaisesti funktion kutsumisen yhteydessä:

• call(): Kutsuu funktion määritellyllä 'this'-arvolla ja yksittäin annetuilla argumenteilla.
• apply(): Kutsuu funktion määritellyllä 'this'-arvolla ja taulukkona annetuilla argumenteilla.
• bind(): Luo uuden funktion, jonka 'this'-avainsana on määritetty annettuun arvoon riippumatta siitä, miten sitä kutsutaan.

            const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // undefined (tiukassa tilassa) tai virhe (ei-tiukassa)

// Käyttämällä callia 'this'-arvon nimenomaiseen määrittämiseen
const boundGetXCall = unboundGetX.call(module);
console.log(boundGetXCall); // 42

// Käyttämällä applya (argumentit taulukkona, ei relevantti tässä, mutta näyttää syntaksin)
const boundGetXApply = unboundGetX.apply(module);
console.log(boundGetXApply); // 42

// Käyttämällä bindia uuden funktion luomiseen, jossa 'this' on pysyvästi sidottu
const boundGetXBind = unboundGetX.bind(module);
console.log(boundGetXBind()); // 42

            

              
                Copy
              
            
          

bind() on erityisen hyödyllinen oikean 'this'-kontekstin säilyttämiseksi, erityisesti asynkronisissa operaatioissa tai kun funktioita välitetään takaisinkutsuina. Se on tehokas työkalu nimenomaiseen kontekstin hallintaan.

'this'-avainsanan haasteet takaisinkutsuissa

Yksi yleisimmistä 'this'-sidontaongelmien lähteistä liittyy takaisinkutsuihin, erityisesti asynkronisissa operaatioissa, kuten setTimeout, tapahtumankäsittelijöissä tai verkkopyynnöissä. Koska takaisinkutsu suoritetaan myöhemmin ja eri kontekstissa, sen 'this'-arvo poikkeaa usein odotetusta.

            function Timer() {
  this.seconds = 0;

  setInterval(function() {
    // 'this' viittaa tässä globaaliin objektiin (tai undefined tiukassa tilassa)
    // EI Timer-instanssiin!
    this.seconds += 1;
    console.log(this.seconds);
  }, 1000);
}

// const timer = new Timer(); // Tämä todennäköisesti aiheuttaa virheitä tai odottamatonta käyttäytymistä.

            

              
                Copy
              
            
          

Yllä olevassa esimerkissä setIntervalille välitetty funktio on yksinkertainen funktion kutsu, joten sen 'this'-konteksti katoaa. Tämä johtaa siihen, että yritetään kasvattaa globaalin objektin (tai undefined) ominaisuutta, mikä ei ole tarkoituksenmukaista.

Ratkaisut takaisinkutsujen kontekstiongelmiin

Historiallisesti kehittäjät käyttivät useita kiertoteitä:

• Itsereferenssi (that = this): Yleinen malli oli tallentaa viittaus 'this'-avainsanaan muuttujaan ennen takaisinkutsua.

            function Timer() {
  this.seconds = 0;
  const that = this; // Tallenna 'this'-konteksti

  setInterval(function() {
    that.seconds += 1;
    console.log(that.seconds);
  }, 1000);
}

const timer = new Timer();

            

              
                Copy
              
            
          

• bind(): Käyttämällä bind()-funktiota 'this'-kontekstin nimenomaiseen määrittämiseen takaisinkutsua varten.

            function Timer() {
  this.seconds = 0;

  setInterval(function() {
    this.seconds += 1;
    console.log(this.seconds);
  }.bind(this), 1000);
}

const timer = new Timer();

            

              
                Copy
              
            
          

Nämä menetelmät ratkaisivat tehokkaasti ongelman varmistamalla, että 'this' viittasi aina tarkoitettuun objektiin. Ne kuitenkin lisäävät verbositeettia ja vaativat tietoista ponnistelua muistaa ja soveltaa niitä.

Nuolifunktioiden esittely: Yksinkertaisempi lähestymistapa

ECMAScript 6 (ES6) toi mukanaan nuolifunktiot, jotka tarjoavat tiiviimmän syntaksin ja, mikä ratkaisevaa, erilaisen lähestymistavan 'this'-sidontaan. Nuolifunktioiden keskeinen ominaisuus on, että niillä ei ole omaa 'this'-sidontaa. Sen sijaan ne kaappaavat lexikaalisesti 'this'-arvon ympäröivästä scopesta.

Lexikaalinen 'this' tarkoittaa, että nuolifunktion sisällä oleva 'this' on sama kuin 'this' nuolifunktion ulkopuolella, missä tahansa nuolifunktio määritelläänkin.

Katsotaanpa Timer-esimerkkiä uudelleen nuolifunktiota käyttäen:

            function Timer() {
  this.seconds = 0;

  setInterval(() => {
    // Nuolifunktion sisällä oleva 'this' on lexikaalisesti sidottu
    // ympäröivän Timer-funktion 'this'-avainsanaan.
    this.seconds += 1;
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();

            

              
                Copy
              
            
          

Tämä on huomattavasti siistimpää. Nuolifunktio () => { ... } perii automaattisesti 'this'-kontekstin Timer-konstruktorifunktiosta, jossa se määritellään. Ei tarvetta that = this tai bind() tätä erityistapausta varten.

Milloin käyttää nuolifunktioita 'this'-avainsanalle

Nuolifunktiot ovat ihanteellisia, kun:

• Tarvitset funktion, joka perii 'this'-avainsanan ympäröivästä scopesta.
• Kirjoitat takaisinkutsuja metodeille, kuten setTimeout, setInterval, taulukkojen metodit (map, filter, forEach) tai tapahtumankäsittelijät, joissa haluat säilyttää ulomman scopesta peräisin olevan 'this'-kontekstin.

Milloin EI käytä nuolifunktioita 'this'-avainsanalle

On tilanteita, joissa nuolifunktiot eivät sovellu, ja perinteisen funktion lausekkeen tai määritelmän käyttö on välttämätöntä:

• Objektimetodit: Jos haluat, että funktio on objektin metodi ja 'this' viittaa itse objektiin, käytä tavallista funktiota.

            const counter = {
  count: 0,
  // Tavallisen funktion käyttö metodille
  increment: function() {
    this.count++;
    console.log(this.count);
  },
  // Nuolifunktion käyttö tässä EI toimisi odotetusti 'this'-avainsanan osalta
  // incrementArrow: () => {
  //   this.count++; // 'this' ei viittaisi 'counteriin'
  // }
};

counter.increment(); // Tuloste: 1

            

              
                Copy
              
            
          

Jos incrementArrow määriteltäisiin nuolifunktiona, 'this' sidottaisiin lexikaalisesti ympäröivään scopeen (todennäköisesti globaali objekti tai undefined tiukassa tilassa), ei counter-objektiin.

• Konstruktorit: Nuolifunktioita ei voi käyttää konstruktoreina. Niillä ei ole omaa 'this'-avainsanaa, eikä niitä siksi voi kutsua new-avainsanalla.

            // const MyClass = () => { this.value = 1; }; // Tämä aiheuttaa virheen, kun sitä käytetään 'new'-avainsanan kanssa
// const instance = new MyClass();

            

              
                Copy
              
            
          

• Tapahtumankäsittelijät, joissa 'this' tulisi olla DOM-elementti: Kuten tapahtumankäsittelijäesimerkissä nähtiin, jos haluat 'this'-avainsanan viittaavan tapahtuman laukaisseeseen DOM-elementtiin, sinun on käytettävä perinteistä funktion lauseketta.

            // Tämä toimii odotetusti:
button.addEventListener('click', function() {
  console.log(this); // 'this' on button
});

// Tämä EI toimisi odotetusti:
// button.addEventListener('click', () => {
//   console.log(this); // 'this' sidottaisiin lexikaalisesti, ei button
// });

            

              
                Copy
              
            
          

Globaalit näkökohdat 'this'-sidonnalle

Ohjelmistojen kehittäminen globaalissa tiimissä tarkoittaa erilaisten koodaustyylien, projektikonfiguraatioiden ja vanhojen koodikantojen kohtaamista. Selkeä ymmärrys 'this'-sidonnasta on välttämätöntä saumattoman yhteistyön kannalta.

• Johdonmukaisuus on avainasemassa: Luo selkeät tiimikäytännöt nuolifunktioiden ja perinteisten funktioiden käytölle, erityisesti 'this'-sidonnan suhteen. Näiden päätösten dokumentointi on elintärkeää.
• Ympäristötietoisuus: Ota huomioon, toimiiko koodisi tiukassa vai ei-tiukassa tilassa. Tiukan tilan undefined-arvo paljaissa funktion kutsuissa on moderni oletusarvo ja turvallisempi käytäntö.
• 'this'-käyttäytymisen testaus: Testaa perusteellisesti funktioita, joissa 'this'-sidonta on kriittistä. Käytä yksikkötestejä varmistaaksesi, että 'this' viittaa odotettuun kontekstiin eri kutsumissyissä.
• Koodikatselmukset: Koodikatselmusten aikana kiinnitä erityistä huomiota siihen, miten 'this'-avainsanaa käsitellään. Se on yleinen alue, jossa hienovaraisia virheitä voi esiintyä. Kannusta tarkastajia kyseenalaistamaan 'this'-käyttöä, erityisesti takaisinkutsuissa ja monimutkaisissa objektirakenteissa.
• Modernien ominaisuuksien hyödyntäminen: Kannusta nuolifunktioiden käyttöä aina kun se on mahdollista. Ne johtavat usein luettavampaan ja ylläpidettävämpään koodiin yksinkertaistamalla 'this'-kontekstin hallintaa yleisissä asynkronisissa malleissa.

Yhteenveto: Kontekstin vaihto vs. Lexikaalinen sidonta

Perinteisten funktioiden ja nuolifunktioiden välinen perustavanlaatuinen ero 'this'-sidonnan suhteen voidaan tiivistää seuraavasti:

• Perinteiset funktiot: 'this' on dynaamisesti sidottu sen perusteella, miten funktiota kutsutaan (metodi, konstruktori, globaali jne.). Tämä on kontekstin vaihto.
• Nuolifunktiot: 'this' on lexikaalisesti sidottu ympäröivään scopeen, jossa nuolifunktio määritellään. Niillä ei ole omaa 'this'-avainsanaa. Tämä tarjoaa ennustettavan lexikaalisen 'this'-käyttäytymisen.

'this'-sidonnan hallitseminen on jokaisen JavaScript-kehittäjän kulkutie. Ymmärtämällä perinteisten funktioiden säännöt ja hyödyntämällä nuolifunktioiden johdonmukaista lexikaalista sidontaa voit kirjoittaa selkeämpää, luotettavampaa ja ylläpidettävämpää JavaScript-koodia maantieteellisestä sijainnistasi tai tiimisi rakenteesta riippumatta.

Toimintakehotteet kehittäjille maailmanlaajuisesti

Tässä muutamia käytännön vinkkejä:

1. Oletusarvoisesti nuolifunktiot takaisinkutsuille: Kun välität funktioita takaisinkutsuina asynkronisiin operaatioihin (setTimeout, setInterval, Promises, tapahtumankäsittelijät, joissa elementti ei ole kohde-this), suosi nuolifunktioita niiden ennustettavan 'this'-sidonnan vuoksi.
2. Käytä tavallisia funktioita objektimetodeihin: Jos funktion tarkoituksena on olla objektin metodi ja se tarvitsee pääsyn objektin ominaisuuksiin 'this'-avainsanan kautta, käytä tavallista funktion määritelmää tai lauseketta.
3. Vältä nuolifunktioita konstruktoreina: Ne eivät ole yhteensopivia new-avainsanan kanssa.
4. Ole nimenomainen bind()-avainsanan kanssa tarvittaessa: Vaikka nuolifunktiot ratkaisevat monia ongelmia, joskus tarvitset silti bind()-avainsanan, erityisesti vanhemman koodin tai monimutkaisempien funktionaalisen ohjelmoinnin mallien kanssa, kun haluat ennalta määrittää 'this'-avainsanan funktiolle, jota välitetään erikseen.
5. Kouluta tiimiäsi: Jaa tämä tieto. Varmista, että kaikki tiimin jäsenet ymmärtävät nämä käsitteet yleisten virheiden välttämiseksi ja koodin laadun ylläpitämiseksi kaikilla tasoilla.
6. Käytä lintereitä ja staattista analyysiä: Työkalut, kuten ESLint, voidaan konfiguroida havaitsemaan yleisiä 'this'-sidontavirheitä, mikä auttaa tiimikäytäntöjen noudattamisessa ja virheiden havaitsemisessa varhaisessa vaiheessa.

Näiden periaatteiden sisäistämällä kehittäjät mistä tahansa taustasta voivat navigoida JavaScriptin 'this'-avainsanan monimutkaisuuksissa luottavaisesti, mikä johtaa tehokkaampiin ja yhteistyökykyisempiin kehityskokemuksiin.