Selle mõistmine versioonides ES5 vs ES6

Erinevalt minu eelmistest artiklitest jääb see artikkel lühikeseks, sest selles pole midagi suurt;)

see märksõna tähistab funktsiooni konteksti ja see sõltub sellest, kuidas funktsiooni kutsutakse, mitte kuidas te selle määratlesite.

Alustame lihtsast funktsioonist. Kui määratlete muutuja globaalses ulatuses, kuulub see aknaobjekti. Kuna JavaScripti funktsioonid on esmaklassilised objektid, käituvad nad ka muutujatena. Seega kuulub iga globaalselt nimetatud funktsioon aknaobjekti (globaalne ulatus). Vaatame kuidas.

var väärtus = 'HELLO';
funktsioon showValue () {}
console.log (see);
console.log (aken);
console.log ('aken === see:', aken === see);
console.log ('see.väärtus:', see.väärtus);
console.log ('this.showValue:', this.showValue);

Nüüd teate, see on lihtsalt objekt. Niisiis, globaalses plaanis tähendab see akent. Kuid selle väärtus varieerub sõltuvalt sellest, kus te seda nimetasite.

Võite kasutada ka ise, mis viitab alati globaalsele ulatusele, olenemata sellest, kus oma koodi kasutasite.

Funktsiooni sees viitab see objektile, millele funktsioon kuulub.

var väärtus = 'HELLO';
funktsioon showValue () {
    console.log ('see funktsioon showValue on:', see);
    console.log ('see === aken:', see === aken);
    tagastage see väärtus;
}
showValue ();

Kuna funktsioon showValue kuulub aknaobjekti, on see showValue aknaobjekt. Kuna väärtus kuulub ka aknaobjekti, on see väärtus sama, mis funktsiooni showValue sees window.value.

Räägime nüüd objektist ja kuidas objektile kuuluvad funktsioonid on selle väärtuse kõvasti kodeerinud.

var väärtus = 'akna väärtus';
var showValue = funktsioon (ulatus) {
    console.log ('see' + ulatus + 'on:', see);
    konsool.logi (see.väärtus);
};
var objekt = {
    väärtus: 'objekti väärtus',
    showValue: showValue
};
showValue ('aken');
objekt.showValue ('objekt');

Pole tähtis, kuidas te objekti.showValue kutsute, saate sama tulemuse. Kuna funktsioon showValue objekti sees kuulub objektile, osutab see funktsioon showValue objektile.

Kui helistate pesastatud funktsioonile, on selle vaikeväärtus aken.

Paks nool (ES6)

see võib kohati olla väga valus töötada, eriti anonüümsete funktsioonidega, kuna need kuuluvad akna ulatusse. Vaatame, kus võib sellega probleeme tekkida.

var objekt = {
    pakkuja: 'gmail.com',
    kasutajanimed: ['mike', 'john', 'nina'],
    getEmails: function () {
        tagasta see kasutajanimed.map (funktsioon (kasutajanimi) {
            tagasta kasutajanimi + '@' + this.provider;
        });
    }
};
var emails = object.getEmails ();
console.log (e-kirjad);

Selle teenusepakkuja väärtus oli määratlemata. Argumendina edastatud anonüümne funktsioon saab selle väärtuse funktsioonilt, kes seda täidab. Ülaltoodud näites on kaardifunktsioon, kus selle sisemine teostus täidab meie anonüümset funktsiooni. kaardiprototüübi meetod kasutab määratlemata väärtust meie anonüümse funktsiooni jaoks ja mitte-range režiimis langeb tagasi aknasse. Seega töötab meie allpool toodud näide.

var pakkuja = 'yahoo.com';
var objekt = {
    pakkuja: 'gmail.com',
    kasutajanimed: ['mike', 'john', 'nina'],
    getEmails: function () {
        tagasta see kasutajanimed.map (funktsioon (kasutajanimi) {
            tagasta kasutajanimi + '@' + this.provider;
        });
    }
};
var emails = object.getEmails ();
console.log (e-kirjad);

Ma ei usu, et ma pean midagi eespool selgitama. Niisiis, kuidas seda parandada. Funktsiooni sidumiseks objektiga saame kasutada funktsiooni sidumine, nii et see funktsiooni sees osutab meie pakutud objektile.

var pakkuja = 'yahoo.com';
var objekt = {
    pakkuja: 'gmail.com',
    kasutajanimed: ['mike', 'john', 'nina'],
    getEmails: function () {
        tagasta see kasutajanimed.map (funktsioon (kasutajanimi) {
            tagasta kasutajanimi + '@' + this.provider;
        } .bind (see));
    }
};
var emails = object.getEmails ();
console.log (e-kirjad);

Kuna see funktsioon getEmails osutab objektile, sunnib .bind (see) anonüümset funktsiooni kutsuma seda ka objektile osutama.

Selle väärtuse saate salvestada ka muutujasse _this ja kasutada anonüümse funktsiooni asemel _this.

Suureks kergenduseks ES6-ga on rasva noole funktsioon, see rasva noole funktsioon osutab sellele, mis selle sisemise ülemise funktsiooni väärtus on. Seega on selle noolefunktsiooni väärtus leksikaalselt ulatuslik.

var pakkuja = 'yahoo.com';
var objekt = {
    pakkuja: 'gmail.com',
    kasutajanimed: ['mike', 'john', 'nina'],
    getEmails: function () {
        tagasta see.usernames.map ((kasutajanimi) => {
            tagasta kasutajanimi + '@' + this.provider;
        });
    }
};
var emails = object.getEmails ();
console.log (e-kirjad);

Meil on endiselt anonüümne funktsioon, kuid seekord rasva noolega, mis säästab palju aega ja muudab süntaksi palju paremaks. see anonüümne funktsioon osutab funktsiooni getEmails ülemise funktsiooni väärtusele. Ja selle funktsiooni getEmails väärtus on objekt. Nii et kui annate argumendina noolefunktsiooni, on see väärtus eelnevalt määratletud ja see ei tekita mingeid kõrvalmõjusid, kui rakendate seda ükskõik kust.

(GitHub / Twitter)