Uzziniet ES6 Dope Way II daļa: bultiņu funkcijas un atslēgvārds “this”

Laipni lūdzam sērijas Learn ES6 The Dope Way II daļā , kas izveidota, lai palīdzētu jums viegli saprast ES6 (ECMAScript 6)!

Tātad, kāds ir heck => ; ?

Jūs droši vien esat redzējuši šos dīvainos ēģiptiešu izskata hieroglifu simbolus šeit un tur, it īpaši kāda cita kodā, kur jūs pašlaik atkļūdojat “ šo” atslēgvārda problēmu. Pēc stundas lāpīšanas jūs tagad klīstat Google meklēšanas joslā un meklējat Stack Overflow. Izklausās pazīstami?

Kopā aplūkosim trīs tēmas: Learn ES6 The Dope Way II:

  • Kā “ šis ” atslēgvārds ir saistīts ar => .
  • Kā migrēt funkcijas no ES5 uz ES6.
  • Svarīgas dīvainības, par kurām jāzina, lietojot => .

Bultu funkcijas

Bultas funkcijas tika izveidotas, lai vienkāršotu funkciju tvērumu un padarītu “ šī ” atslēgvārda izmantošanu daudz vienkāršāku. Viņi izmanto = & gt; sintakse, kas izskatās kā bulta. Lai gan es nedomāju, ka tam vajadzētu ieturēt diētu, cilvēki mani sauc par “tauku tauku ow” (un Rubīna entuziasti to var labāk zināt kā “hash rock et”) - kaut kas jāapzinās.

Kā atslēgvārds “šis” ir saistīts ar bultiņu funkcijām

Pirms mēs iedziļināmies dziļāk ES6 bultiņu funkcijās, vispirms ir svarīgi, lai būtu skaidrs priekšstats par to, ar ko tas saistās ES5 kodā.

Ja ' šis ' atslēgvārds atrastos objekta metodē (funkcija, kas pieder objektam), uz ko tas atsauktos?

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

Pareizi! Tas attiektos uz objektu. Mēs vēlāk nonāksim pie tā, kāpēc.

Kā būtu, ja atslēgvārds “ šis ” atrastos metodes funkcijās?

// 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. 

Ko tu dabūji? Pagaidiet, kas notika ar mūsu zaķi ...?

Ah, vai jūs domājāt, ka " tas " attiecas uz metodes iekšējo funkciju?

Varbūt pats objekts?

Jūs esat gudrs tā domāt, tomēr tas tā nav. Ļaujiet man iemācīt jums to, ko mani kādreiz bija mācījuši kodētāji vecākie:

Kodēšana Elder : " Ak jā, ● lai viņš kods ir spēcīga ar šo vienu. Patiešām ir praktiski domāt, ka “šis” atslēgvārds saistās ar funkciju, bet patiesība ir tāda, ka “šis” tagad ir izstājies no darbības jomas ... Tas tagad pieder ... ”, viņš apstājas, it kā piedzīvotu iekšēju satricinājumu ,“ loga objekts .

Pareizi. Tas notika tieši tā.

Kāpēc “ šis ” saistās ar loga objektu? Tā kā “ šis ” vienmēr atsaucas uz tās funkcijas īpašnieku, kurā tā atrodas, šajā gadījumā - tā kā tā vairs nav darbības jomā - logs / globālais objekts.

Kad tas atrodas objekta metodē - objekta funkcijas īpašnieks. Tādējādi atslēgvārds “ šis ” ir saistīts ar objektu. Tomēr, kad tas atrodas funkcijas iekšpusē, vai nu atsevišķi, vai kādā citā metodē, tas vienmēr atsauksies uz logu / globālo objektu.

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

Bet kāpēc…?

Tas ir pazīstams kā JavaScript dīvains, kas nozīmē kaut ko tādu, kas vienkārši notiek JavaScript iekšienē, un tas nav gluži vienkārši un tas nedarbojas tā, kā jūs domājat. Izstrādātāji to arī uzskatīja par sliktu dizaina izvēli, ko viņi tagad novērš ar ES6 bultiņu funkcijām.

Pirms turpinām, ir svarīgi zināt divus gudrus veidus, kā programmētāji atrisina “ šo ” problēmu ES5 kodā, it īpaši tāpēc, ka jūs kādu laiku turpināsiet darboties ar ES5 (ne katrs pārlūks vēl ir pilnībā migrējis uz ES6):

# 1 Izveidojiet mainīgo ārpus metodes iekšējās funkcijas. Tagad metode “forEach” iegūst piekļuvi “ šim ” un līdz ar to arī objekta īpašībām un to vērtībām. Tas ir tāpēc, ka “ šis ” tiek glabāts mainīgajā, kamēr tas joprojām ietilpst objekta tiešās metodes “showTasks” darbības jomā.

// 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 Izmantojiet saiti, lai pievienotu atslēgvārdu “ šis ”, kas attiecas uz metodi, metodes iekšējai funkcijai.

// 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

Un tagad ieviešam ... bultiņu funkcijas! Darīšana ar šo jautājumu nekad nav bijusi tik vienkārša un vienkāršāka! Vienkāršais ES6 risinājums:

// 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

Kamēr ES5 “ tas ” attiecās uz funkcijas vecāku, ES6 bultiņu funkcijās tiek izmantota leksiskā darbības joma - “ šis ” attiecas uz tā pašreizējo apkārtējo darbības jomu un ne tālāk. Tādējādi iekšējā funkcija zināja saistīties tikai ar iekšējo funkciju, nevis ar objekta metodi vai pašu objektu.

Kā migrēt funkcijas no ES5 uz ES6.

// 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");

Tu to izdarīji! Lielisks darbs! Pietiekami vienkārši vai ne? Šeit ir vēl daži piemēri, izmantojot taukaino, izdilis bultiņu, lai pieradinātu acis:

// #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(); });

Svarīgas dīvainības, kas jāzina, izmantojot bultiņu funkcijas

Ja izmantojat “jauno” atslēgvārdu ar => funkcijām, tas radīs kļūdu. Bultas funkcijas nevar izmantot kā konstruktoru - parastās funkcijas atbalsta “jauno”, izmantojot rekvizītu prototipu un iekšējo metodi [[Construct]]. Bultiņu funkcijas nelieto nevienu no tām, tādējādi jaunā (() => {}) rada kļūdu.

Apsveriet vēl citas dīvainības:

// 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. }

Apsveicu! Jūs to esat paveicis, izmantojot Learn ES6 The Dope Way II daļu, un tagad jums ir pamats zināšanām par bultiņu funkcijām, leksiskajām priekšrocībām, ko tas dod šim, un arī sev piesaistījāt dažas JavaScript dīvainības prasmes! :)

Atjauniniet savu gudrību, patika un sekojiet līdzi vairāk. Uzziniet ES6 Dope Way drīz nonāks Medium!

I daļa: const, let & var

II daļa: (Bultiņa) => funkcijas un 'šis' atslēgvārds

III daļa: Veidņu literāļi, izplatīšanas operatori un ģeneratori!

IV daļa: noklusējuma parametri, pārstrukturēšanas uzdevums un jauna ES6 metode!

V daļa: Nodarbības, ES6 koda pārsūtīšana un citi resursi!

Jūs varat mani atrast arī vietnē github ❤ //github.com/Mashadim