de Mariya Diminsky

Aflați ES6 The Dope Way Partea II: Funcțiile săgeată și cuvântul cheie „acest”

Aflati ES6 The Dope Way Partea II Functiile sageata si

Bine ați venit la Partea II din Aflați ES6 The Dope Way, o serie creată pentru a vă ajuta să înțelegeți cu ușurință ES6 (ECMAScript 6)!

Deci, ce naiba este =>; ?

Probabil că ați văzut aceste simboluri hieroglifice ciudate cu aspect egiptean, ici și colo, mai ales în codul altcuiva, unde în prezent depanați un „acest’ problema cuvântului cheie. După o oră de jocuri, acum parcurgeți bara de căutare Google și urmăriți Stack Overflow. Suna familiar?

Împreună, să acoperim trei subiecte în Aflați ES6 The Dope Way Partea II:

  • Cum ‘acestcuvântul cheie se referă la =>.
  • Cum se migrează funcțiile de la ES5 la ES6.
  • Ciudățenii importante de care trebuie să știi când folosești =>.

Funcții săgeată

Funcțiile săgeată au fost create pentru a simplifica sfera funcției și a face folosindacestCuvânt cheie mult mai simplu. Ei folosesc = > sintaxă, care arată ca o săgeată. Chiar dacă nu cred că trebuie să urmeze o dietă, oamenii îl sună pe it „grăsimea arrow ”(și entuziaștii Ruby s-ar putea să o știe mai bine ca the „hash rocket ”) – ceva de care să fii conștient.

Cum se referă cuvântul cheie „acest” la funcțiile săgeată

Înainte de a ne adânci în funcțiile săgeții ES6, este important să avem mai întâi o imagine clară despre ceacest‘se leagă în codul ES5.

Dacăacest„cuvântul cheie se afla în interiorul unui obiect metodă (o funcție care aparține unui obiect), la ce s-ar referi?

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

bunny.showName(); // Usagi

Corect! S-ar referi la obiect. Vom ajunge de ce mai târziu.

Acum ce se întâmplă dacăacest„Cuvântul cheie se afla în funcția metodei?

// Test it here: https://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.

Ce ai primit? Stai, ce s-a întâmplat cu iepurașul nostru …?

Ah, ai crezutacest‘se referă la funcția interioară a metodei?

Poate obiectul în sine?

Ești înțelept să crezi așa, dar nu este așa. Permiteți-mi să vă învăț ceea ce mă învățaseră odinioară bătrânii de codificare:

Coding Elder:Ah, da, tcodul este puternic cu acesta. Este într-adevăr practic să crezi că cuvântul cheie „acest” se leagă de funcție, dar adevărul este că „acesta” a căzut acum din sfera de aplicare … Acum îi aparține … ”, face o pauză ca și când ar experimenta frământări interioare, „Obiectul ferestrei.

Asta e corect. Exact așa s-a întâmplat.

De ceacest‘legați de obiectul ferestrei? Pentru că ‘acest‘, face întotdeauna referire la proprietarul funcției în care se află, pentru acest caz – întrucât este acum în afara domeniului – fereastra / obiectul global.

Când se află în interiorul metodei unui obiect – proprietarul funcției este obiectul. Astfelacestcuvântul cheie este legat de obiect. Cu toate acestea, atunci când se află într-o funcție, fie independentă, fie într-o altă metodă, se va referi întotdeauna la fereastră / obiect global.

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

standAloneFunc(); // [object Window]

Dar de ce…?

Aceasta este cunoscută sub numele de quirk JavaScript, ceea ce înseamnă ceva care se întâmplă doar în JavaScript, care nu este chiar simplu și nu funcționează așa cum ați crede. Acest lucru a fost, de asemenea, considerat de dezvoltatori ca o alegere de design slabă, pe care acum o remediază cu funcțiile săgeții ES6.

Înainte de a continua, este important să fim conștienți de două moduri inteligente în care programatorii rezolvă „acest‘problema din codul ES5, mai ales că veți continua să rulați în ES5 pentru o vreme (nu fiecare browser a migrat complet pe ES6 încă):

# 1 Creați o variabilă în afara funcției interioare a metodei. Acum metoda „forEach” câștigă acces la „acest‘și astfel proprietățile obiectului și valorile lor. Asta pentru ca ‘acest‘este stocat într-o variabilă în timp ce se află încă în domeniul de aplicare al metodei directe a obiectului’ showTasks ‘.

// Test it here: https://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 Utilizați legare pentru a atașaacest„cuvânt cheie care se referă la metodă la funcția interioară a metodei.

// Test it here: https://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

Și acum introducem … funcții săgeată! Să mă ocup deacest‘problema nu a fost niciodată mai ușoară și mai simplă! Soluția simplă ES6:

// Test it here: https://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

În timp ce în ES5 ‘acest„referit la părintele funcției, în ES6, funcțiile săgeată folosesc scop lexical -”acest‘se referă la domeniul său de aplicare actual și nu mai departe. Astfel, funcția interioară a știut să se lege numai de funcția interioară și nu de metoda obiectului sau de obiectul în sine.

Cum se migrează funcțiile de la ES5 la 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 ai făcut-o! Buna treaba! Destul de simplu nu? Iată câteva alte exemple care utilizează săgeata slabă, pentru a vă obișnui ochii:

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

Ciudățenii importante de care trebuie să știți când utilizați funcțiile Arrow

Dacă utilizați cuvântul cheie „nou” cu funcțiile =>, va apărea o eroare. Funcțiile săgeată nu pot fi utilizate ca constructor – funcțiile normale acceptă „noul” prin prototipul proprietății și metoda internă [[Construct]]. Funcțiile săgeată nu folosesc niciuna, așa că noul (() => {}) aruncă o eroare.

Alte ciudățenii de luat în considerare:

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

Felicitări! Ai reușit Aflați ES6 The Dope Way Partea II și acum aveți o bază pentru cunoașterea funcției săgeții, beneficiile lexicale pe care le oferă „acestși, de asemenea, v-ați înșelat câteva abilități JavaScript quirk! 🙂

Păstrați-vă înțelepciunea actualizată, plăcându-vă și urmând tot mai mult Aflați ES6 The Dope Way vine în curând la Medium!

Partea I: const, let & var

Partea II: (Săgeată) => funcții și cuvântul cheie „acest”

Partea a III-a: Litere de șabloane, operatori de propagare și generatoare!

Partea a IV-a: Parametrii impliciți, Alocarea destructurării și o nouă metodă ES6!

Partea V: Cursuri, Transpunerea codului ES6 și mai multe resurse!

Mă găsești și pe github ❤ https://github.com/Mashadim