Opi ES6 The Dope Way, osa II: Nuolitoiminnot ja 'tämä' avainsana

Tervetuloa Learn ES6 Dope Way -sarjaan , sarjaan , joka on luotu auttamaan sinua ymmärtämään helposti ES6: ta (ECMAScript 6)!

Joten mikä hitto on => ; ?

Olet todennäköisesti nähnyt näitä outoja egyptiläisen näköisiä hieroglyfisymboleja täällä ja siellä, varsinkin jonkun toisen koodissa, jossa olet virheenkorjaamassa ' tätä' avainsanaongelmaa. Tunnin nokkaamisen jälkeen vaellat nyt Google-hakupalkissa ja etsit Stack Overflow -palvelua. Kuulostaa tutulta?

Käsittelemme yhdessä kolme aihetta oppimisen ES6 The Dope Way II osassa:

  • Kuinka ' tämä ' avainsana liittyy => .
  • Toimintojen siirtäminen ES5: stä ES6: een.
  • Tärkeitä haittoja, joista on syytä olla tietoinen, kun käytetään => .

Nuolitoiminnot

Nuolitoiminnot luotiin yksinkertaistamaan toimintojen laajuutta ja tekemään ' tämän ' avainsanan käytöstä paljon yksinkertaisempaa. He käyttävät = & gt; syntaksi, joka näyttää nuolelta. Vaikka mielestäni sen ei tarvitse mennä ruokavalioon, ihmiset kutsuvat minua "fat fat ow": ksi (ja Ruby-harrastajat saattavat tuntea sen paremmin nimellä "hash rock et") - jotain on tietoinen.

Kuinka 'tämä' avainsana liittyy nuolitoimintoihin

Ennen kuin sukellamme syvemmälle ES6-nuolitoimintoihin, on tärkeää, että sinulla on ensin selkeä kuva siitä, mihin tämä liittyy ES5-koodissa.

Jos ' tämä ' avainsana olisi objektin menetelmässä ( objektille kuuluva toiminto), mihin se viittaisi?

// Test it here: //jsfiddle.net/maasha/x7wz1686/ var bunny = { name: 'Usagi', showName: function() { alert(this.name); } }; bunny.showName(); // Usagi

Oikea! Se viittaa esineeseen. Tulemme siihen miksi myöhemmin.

Entä jos ' tämä ' avainsana olisi menetelmän toiminnassa?

// Test it here: //jsfiddle.net/maasha/z65c1znn/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { this.tasks.forEach(function(task) { alert(this.name + " wants to " + task); }); } }; bunny.showTasks(); // [object Window] wants to transform // [object Window] wants to eat cake // [object Window] wants to blow kisses // please note, in jsfiddle the [object Window] is named 'result' within inner functions of methods. 

Mitä sinä sait? Odota, mitä tapahtui pupullemme ...?

Ah, luulitko, että tämä viittaa menetelmän sisäiseen toimintaan?

Ehkä esine itse?

Olet viisas ajatella niin, mutta se ei ole niin. Sallikaa minun opettaa sinulle, mitä koodaavat vanhimmat olivat minulle kerran opettaneet:

Coding Elder :Ai niin, t hän koodi on vahva tähän. On todellakin käytännöllistä ajatella, että "tämä" avainsana sitoutuu toimintoon, mutta totuus on, että "tämä" on nyt pudonnut soveltamisalasta ... Se kuuluu nyt ... ", hän pysähtyy kuin kokisi sisäisen myllerryksen ," ikkunaobjektin .

Oikein. Näin se tapahtui.

Miksi ' tämä ' sitoutuu ikkunaobjektiin? Koska ' tämä ' viittaa aina sen toiminnon omistajaan, jossa se on, tässä tapauksessa - koska se on nyt soveltamisalan ulkopuolella - ikkuna / globaali objekti.

Kun se on objektin menetelmän sisällä - funktion omistaja on objekti. Siten ' tämä ' avainsana on sidottu objektiin. Silti kun se on toiminnon sisällä, joko erillisenä tai toisessa menetelmässä, se viittaa aina ikkunaan / globaaliin objektiin.

// Test it here: //jsfiddle.net/maasha/g278gjtn/ var standAloneFunc = function(){ alert(this); } standAloneFunc(); // [object Window]

Mutta miksi…?

Tätä kutsutaan JavaScriptiä tarkoittavaksi, mikä tarkoittaa jotain, joka vain tapahtuu JavaScriptissä, joka ei ole aivan suoraviivaista ja se ei toimi samalla tavalla kuin luulisi. Kehittäjät pitivät tätä myös huonona suunnitteluvaihtoehtona, jota he nyt korjaavat ES6: n nuolitoiminnoilla.

Ennen kuin jatkat, on tärkeää olla tietoinen kahdesta fiksusta tavasta, joilla ohjelmoijat ratkaisevat tämän ongelman ES5-koodissa, varsinkin kun jatkat ES5: n käyttöä jonkin aikaa (kaikki selaimet eivät ole vielä siirtyneet täysin ES6: een):

# 1 Luo muuttuja menetelmän sisäisen toiminnon ulkopuolelle. Nyt 'forEach' -menetelmä saa pääsyn ' tähän ' ja siten kohteen ominaisuuksiin ja niiden arvoihin. Tämä johtuu siitä, että " tätä " tallennetaan muuttujaan, kun se on edelleen objektin suoran "showTasks" -menetelmän piirissä.

// Test it here: //jsfiddle.net/maasha/3mu5r6vg/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { var _this = this; this.tasks.forEach(function(task) { alert(_this.name + " wants to " + task); }); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

# 2 Liitä " this " -avainsana, joka viittaa menetelmään, liittämisen avulla metodin sisäiseen toimintoon.

// Test it here: //jsfiddle.net/maasha/u8ybgwd5/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { this.tasks.forEach(function(task) { alert(this.name + " wants to " + task); }.bind(this)); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

Ja nyt esittelyssä ... Nuolitoiminnot! Joka koskee ' tämän ' ongelman ole koskaan ollut helpompaa ja yksinkertaisempaa! Yksinkertainen ES6-ratkaisu:

// Test it here: //jsfiddle.net/maasha/che8m4c1/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks() { this.tasks.forEach((task) => { alert(this.name + " wants to " + task); }); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

Vaikka ES5: ssä ' tämä ' tarkoitti toiminnon vanhempaa, ES6: ssa nuolitoiminnot käyttävät leksikaalista ulottuvuutta - ' tämä ' viittaa sen nykyiseen ympäröivään laajuuteen eikä enää. Siten sisäinen toiminto tiesi sitoutuvan vain sisäiseen toimintaan, ei objektin menetelmään tai itse esineeseen.

Toimintojen siirtäminen ES5: stä ES6: een.

// Before let bunny = function(name) { console.log("Usagi"); } // After let bunny = (name) => console.log("Usagi") // Step 1: Remove the word ‘function’. let bunny = (name) { console.log("Usagi"); } // Step 2: If your code is less than a line, remove brackets and place on one line. let bunny = (name) console.log("Usagi"); // Step 3. Add the hash rocket. let bunny = (name) => console.log("Usagi");

Teit sen! Hyvää työtä! Tarpeeksi yksinkertainen, eikö? Tässä on vielä muutama esimerkki rasvaisen laihan nuolen hyödyntämisestä silmiesi totuttamiseksi:

// #1 ES6: if passing one argument you don't need to include parenthesis around parameter. var kitty = name => name; // same as ES5: var kitty = function(name) { return name; }; // #2 ES6: no parameters example. var add = () => 3 + 2; // same as ES5: var add = function() { return 3 + 2; }; // #3 ES6: if function consists of more than one line or is an object, include braces. var objLiteral = age => ({ name: "Usagi", age: age }); // same as ES5: var objLiteral = function(age) { return { name: "Usagi", age: age }; }; // #4 ES6: promises and callbacks. asyncfn1().then(() => asyncfn2()).then(() => asyncfn3()).then(() => done()); // same as ES5: asyncfn1().then(function() { asyncfn2(); }).then(function() { asyncfn3(); }).done(function() { done(); });

Tärkeitä omituisuuksia, jotka on oltava tietoisia nuolitoimintojen käytössä

Jos käytät uutta avainsanaa => -toiminnoilla, se aiheuttaa virheen. Nuolitoimintoja ei voida käyttää rakentajana - normaalit toiminnot tukevat "uutta" ominaisuusprototyypin ja sisäisen menetelmän kautta [[Rakenna]]. Nuolitoiminnot eivät käytä kumpaakaan, joten uusi (() => {}) heittää virheen.

Muita harkittavia asioita:

// Line breaks are not allowed and will throw a syntax error let func1 = (x, y) => { return x + y; }; // SyntaxError // But line breaks inside of a parameter definition is ok let func6 = ( x, y ) => { return x + y; }; // Works! // If an expression is the body of an arrow function, you don’t need braces: asyncFunc.then(x => console.log(x)); // However, statements have to be put in braces: asyncFunc.catch(x => { throw x }); // Arrow functions are always anonymous which means you can’t just declare them as in ES5: function squirrelLife() { // play with squirrels, burrow for food, etc. } // Must be inside of a variable or object property to work properly: let squirrelLife = () => { // play with squirrels, burrow for food, etc. // another super squirrel action. }

Onnittelut! Olet päässyt oppimaan Learn ES6 The Dope Way Part II -sovelluksen kautta, ja nyt sinulla on perusta nuolitoimintojen tuntemiseen, leksikaalisiin etuihin, joita se antaa ' tälle ', ja otit itsellesi myös joitain JavaScriptiä! :)

Pidä viisautesi ajan tasalla pitämällä ja seuraamalla lisää. Opi ES6 Dope Way on tulossa pian Mediumiin!

Osa I: const, let & var

Osa II: (Nuoli) => toiminnot ja 'tämä' avainsana

Osa III: Template Literals, levitysoperaattorit ja generaattorit!

Osa IV: Oletusparametrit, uudelleenjärjestelytehtävä ja uusi ES6-menetelmä!

Osa V: Luokat, ES6-koodin siirtäminen ja muita resursseja!

Löydät minut myös githubista ❤ //github.com/Mashadim