Suprasti tai ES5 vs ES6

Skirtingai nuo ankstesnių mano straipsnių, šis trumpas, nes apie tai nėra nieko esminio;)

šis raktinis žodis žymi funkcijos kontekstą ir priklauso nuo to, kaip jūs vadinate funkciją, o ne nuo to, kaip ją apibrėžėte.

Pradėkime nuo paprastos funkcijos. Kai apibrėžiate kintamąjį globalioje apimtyje, jis priklauso lango objektui. Kadangi „JavaScript“ funkcijos yra pirmosios klasės objektai, jos taip pat elgiasi kaip kintamieji. Taigi bet kuri globaliai pavadinta funkcija priklauso (visuotinės apimties) lango objektui. Pažiūrėkime kaip.

var reikšmė = 'HELLO';
funkcija showValue () {}
console.log (tai);
console.log (langas);
console.log ('langas === tai:', langas === tai);
console.log ('this.value:', this.value);
console.log ('this.showValue:', this.showValue);

Dabar, jūs žinote, tai tik objektas. Taigi visame pasaulyje tai reiškia langą. Tačiau to vertė skiriasi priklausomai nuo to, kur jūs jį vadinote.

Taip pat galite naudoti save, kuris visada nurodo visuotinę taikymo sritį, nesvarbu, kur naudojote savo kodą.

Funkcijos viduje tai reiškia objektą, kuriam priklauso funkcija.

var reikšmė = 'HELLO';
funkcija showValue () {
    console.log ('ši funkcija „showValue“ yra:', tai);
    console.log ('šis === langas:', šis === langas);
    grąžinti šią vertę;
}
showValue ();

Kadangi „showValue“ funkcija priklauso lango objektui, tai „showValue“ yra lango objektas. Kadangi vertė taip pat priklauso lango objektui, ši vertė yra tokia pati kaip lango vertė, esanti „showValue“ funkcijos viduje.

Dabar pakalbėkime apie objektą ir tai, kaip objekto priklausančios funkcijos užkoduoja šią vertę.

var value = 'lango vertė';
var showValue = funkcija (apimtis) {
    console.log ('tai viduje' + taikymo sritis + 'yra:', tai);
    console.log (this.value);
};
var object = {
    reikšmė: 'objekto vertė',
    showValue: showValue
};
showValue ('langas');
object.showValue ('objektas');

Nesvarbu, kaip jūs skambinate object.showValue, gausite tuos pačius rezultatus. Kadangi objekto „showValue“ funkcija priklauso objektui, ši „showValue“ funkcija nurodo objektą.

Jei skambinate įdėta funkcija, jos numatytoji reikšmė yra langas.

Riebalų rodyklė (ES6)

kartais tai gali būti labai skausminga, ypač naudojant anonimines funkcijas, nes jos priklauso lango sričiai. Pažiūrėkime, kur gali kilti problemų.

var object = {
    teikėjas: „gmail.com“,
    vartotojo vardai: ['mike', 'john', 'nina'],
    getEmails: function () {
        grąžinti this.usernames.map (funkcija (vartotojo vardas) {
            grąžinti vartotojo vardą + '@' + this.provider;
        });
    }
};
var email = object.getEmails ();
console.log (el. laiškai);

Mes gavome šio teikėjo vertę kaip neapibrėžtą. Anoniminė funkcija, perduodama kaip argumentas, gauna šią vertę iš funkcijos, kuri ją vykdo. Aukščiau pateiktame pavyzdyje - žemėlapio funkcija, kai kurioje jos vidinėje diegimo dalyje vykdoma mūsų anoniminė funkcija. žemėlapio prototipo metodas naudojamas neapibrėžtas, nes ši mūsų anoniminės funkcijos reikšmė yra, o ne griežtu režimu - vėl į langą. Taigi, mūsų žemiau pateiktas pavyzdys veikia.

var teikėjas = 'yahoo.com';
var object = {
    teikėjas: „gmail.com“,
    vartotojo vardai: ['mike', 'john', 'nina'],
    getEmails: function () {
        grąžinti this.usernames.map (funkcija (vartotojo vardas) {
            grąžinti vartotojo vardą + '@' + this.provider;
        });
    }
};
var email = object.getEmails ();
console.log (el. laiškai);

Nemanau, kad turiu ką nors paaiškinti aukščiau. Taigi, kaip mes galime tai išspręsti. Mes galime naudoti įrišimo funkciją, norėdami susieti funkciją su objektu, kad ši funkcija nurodytų mūsų pateiktą objektą.

var teikėjas = 'yahoo.com';
var object = {
    teikėjas: „gmail.com“,
    vartotojo vardai: ['mike', 'john', 'nina'],
    getEmails: function () {
        grąžinti this.usernames.map (funkcija (vartotojo vardas) {
            grąžinti vartotojo vardą + '@' + this.provider;
        } .bind (tai));
    }
};
var email = object.getEmails ();
console.log (el. laiškai);

Kadangi ši vidinė „getEmails“ funkcija nurodo objektą, „.bind“ (šis) kvietimas į anoniminę funkciją verčia jį nukreipti ir į objektą.

Taip pat galite išsaugoti šios vertės reikšmę kintamajam _this ir naudoti _this vietoj šios anoniminės funkcijos viduje.

Didelis „ES6“ reljefas yra riebalų rodyklės funkcija, ši riebalų rodyklės funkcija nurodo bet kokią šios viršutinės funkcijos vertę. Taigi šios rodyklės funkcijos reikšmė yra leksine prasme.

var teikėjas = 'yahoo.com';
var object = {
    teikėjas: „gmail.com“,
    vartotojo vardai: ['mike', 'john', 'nina'],
    getEmails: function () {
        grąžinti this.usernames.map ((vartotojo vardas) => {
            grąžinti vartotojo vardą + '@' + this.provider;
        });
    }
};
var email = object.getEmails ();
console.log (el. laiškai);

Vis dar turime anoniminę funkciją, tačiau šį kartą naudodamiesi riebiąja rodykle, sutaupome daug laiko ir sintaksė atrodo daug geriau. ši anoniminė funkcija nurodo šią viršutinės funkcijos vertę, kuri yra funkcija getEmails. Ir šios „getEmails“ funkcijos vertė yra objektas. Taigi, kai perduodate strėlės funkciją kaip argumentą, ši vertė yra iš anksto nustatyta ir ji nesukels jokio šalutinio poveikio, kai ją vykdysite iš bet kurios vietos.

(„GitHub“ / „Twitter“)