Ismerje meg az ES6-ot A Dope Way II. Rész: Nyílfüggvények és az 'this' kulcsszó

Üdvözöljük a Learn ES6 The Dope Way II részében , amely az ES6 (ECMAScript 6) könnyebb megértése érdekében készült sorozat!

Szóval, mi a fene => ; ?

Valószínűleg látta már ezeket a furcsa egyiptomi kinézetű hieroglifaszimbólumokat itt-ott, főleg valaki más kódjában, ahol jelenleg egy „ ez” kulcsszóproblémát keres . Egy órás bütykölés után most a Google keresősávon barangol és a Stack Overflow után kutat. Ismerős?

Vegyünk át három témát a Learn ES6 The Dope Way II részében:

  • Hogyan kapcsolódik a ' this ' kulcsszó a => kifejezéshez .
  • A funkciók migrálása az ES5-ről az ES6-ra.
  • Fontos furcsaságok, amelyekkel tisztában kell lenni az => használatakor .

Nyílfunkciók

A nyílfüggvényeket azért hoztuk létre, hogy leegyszerűsítsük a függvény hatókörét és sokkal egyszerűbbé tegyük az ' this ' kulcsszó használatát. Használják a = & gt; szintaxis, amely nyílnak tűnik. Annak ellenére, hogy nem hiszem, hogy diétázni kellene, az emberek a „fat fat ow” -nak hívják (és a Ruby rajongói talán jobban tudják ezt a „hash rock et” néven) - amivel tisztában kell lenni.

Hogyan kapcsolódik az „ez” kulcsszó a nyílfüggvényekhez

Mielőtt mélyebben belemerülnénk az ES6 nyílfunkciókba, fontos, hogy először tiszta képet kapjunk arról, hogy mihez kötődik ez az ES5 kódban.

Ha az ' ez ' kulcsszó egy objektum metódusán belül lenne (egy objektumhoz tartozó függvény), mire utalna?

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

Helyes! Az objektumra vonatkozna. A későbbiekben ráérünk a miértre.

És mi lenne, ha az ' ez ' kulcsszó benne lenne a módszer funkciójában?

// 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 kaptál? Várj, mi történt a nyuszinkkal ...?

Ah, azt gondolta, hogy „ ez ” a módszer belső működésére utal?

Talán maga a tárgy?

Bölcs vagy ezt gondolni, mégsem így van. Engedje meg, hogy megtanítsam, amit a kódoló vének egykor tanítottak nekem:

Coding Elder :Ó, igen, t ő kód erős ez. Valójában praktikus azt gondolni, hogy az „ez” kulcsszó kötődik a függvényhez, de az az igazság, hogy „ez” most kiesett a hatókörből ... Most már a… tulajdonába tartozik ” - szünetet tart, mintha belső zűrzavart tapasztalna ,„ az ablakobjektum .

Úgy van. Pontosan így történt.

Miért kötődik „ ez ” az ablakobjektumhoz? Mivel az ' ez ' mindig hivatkozik annak a funkciónak a tulajdonosára, amelyben van, ebben az esetben - mivel ez már nem tartozik a hatókörébe - az ablak / globális objektum.

Amikor egy objektum metódusán belül van - a függvény tulajdonosa az objektum. Így az ' ez ' kulcsszó az objektumhoz van kötve. Mégis, ha egy függvény belsejében van, akár önállóan, akár egy másik módszeren belül, mindig az ablakra / globális objektumra fog hivatkozni.

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

De miért…?

Ezt JavaScript-mókának nevezik, ami olyasmit jelent, ami csak a JavaScript-en belül történik, ami nem éppen egyszerű és nem úgy működik, ahogy gondolná. Ezt a fejlesztők is rossz tervezési lehetőségnek tekintették, amelyet most az ES6 nyílfunkcióival orvosolnak.

Mielőtt folytatnánk, fontos, hogy tisztában legyünk a két okos módszerrel, amellyel a programozók megoldják ezt a problémát az ES5-kódon belül, különösen azért, mert egy ideig továbbra is futni fog az ES5-be (még nem minden böngésző költözött át teljesen az ES6-ra):

# 1 Hozzon létre egy változót a módszer belső funkcióján kívül. Most a 'forEach' metódus hozzáférést kap ehhez és ehhez az objektum tulajdonságaihoz és értékeihez. Ennek az az oka, hogy az „ ezt ” egy változóban tárolják, miközben még mindig az objektum „showTasks” közvetlen módszerének hatókörébe tartozik.

// 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 A bind használatával csatolja a metódusra utaló ' this ' kulcsszót a módszer belső funkciójához.

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

És most bemutatjuk ... Arrow funkciókat! Soha nem volt ilyen egyszerű és egyszerűbb kezelni ezt a kérdést! Az egyszerű ES6 megoldás:

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

Míg az ES5-ben „ ez ” a függvény szülőjére vonatkozott, addig az ES6-ban a nyílfüggvények lexikális hatókört használnak - „ ez ” a jelenlegi környező hatókörre utal, és nem tovább. Így a belső funkció tudta, hogy csak a belső funkcióhoz kötődik, és nem az objektum módszeréhez vagy magához a tárgyhoz.

A funkciók migrálása az ES5-ről az ES6-ra.

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

Megcsináltad! Nagyszerű munka! Elég egyszerű, igaz? Íme még néhány példa a zsírosabb sovány nyíl felhasználásával, hogy megszokja a szemét:

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

Fontos furcsaságok, amelyekkel tisztában kell lenni a nyíl funkciók használatakor

Ha az 'új' kulcsszót használja a => függvényekkel, ez hibát fog okozni. A nyílfüggvények nem használhatók konstruktorként - a normál függvények a tulajdonságprototípuson és a belső módszeren keresztül [[Construct]] támogatják az „újat”. A nyílfüggvények egyiket sem használják, így az új (() => {}) hibát dob.

További megfontolandó furcsaságok:

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

Gratula! Már áttört Tudjon ES6 The Dope Way Part II, és most van egy alapja nyíl funkció ismeretek, lexikális előnyöket ad a „ ez ”, és azt is beakad magának egy kis JavaScript trükkje készség! :)

Tartsa naprakészen bölcsességét tetszés szerint, és kövesse a további tudnivalókat. Tanuljon ES6 A Dope Way hamarosan a Medium-ra érkezik!

I. rész: const, let & var

II. Rész: (Arrow) => függvények és 'ez' kulcsszó

III. Rész: Template Literals, Spread Operator & Generators!

IV. Rész: Alapértelmezett paraméterek, szerkezetátalakítási hozzárendelés és egy új ES6 módszer!

V. rész: Osztályok, az ES6 kód átvitele és további források!

A githubon is megtalálsz ❤ //github.com/Mashadim