React ES6

React ES6
Ce este ES6?
ES6 standuri pentru ECMAScript 6.
ECMAScript a fost creat pentru a standardiza JavaScript și ES6 este al 6-lea versiune de
ECMAScript, a fost publicat în 2015, și este, de asemenea, cunoscut sub numele de
ECMAScript 2015.
De ce să învăț ES6?
React utilizări ES6, și ar trebui să fie familiarizați cu unele dintre noile caracteristici, cum
ar fi:
 Clase
 Funcții săgeată
 Variabile (let, const, var)
Clase
ES6 a introdus clase.
O clasă este un tip de funcție, dar în loc de a folosi cuvântul cheie functionpentru ao

iniția, vom folosi cuvântul cheie class, iar proprietățile sunt atribuite în interiorul
unei constructor()metode.
Exemplu
Un simplu constructor de clasă:
class Car {
constructor(name) {
this.brand = name;
}
}
Acum puteți crea obiecte folosind clasa auto:
Exemplu
Crearea unui obiect numit „MyCar“ bazat pe clasa auto:
class Car {
constructor(name) {
this.brand = name;
}
}
mycar = new Car("Ford");
Incearca-l tu insuti "

<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
document.write(mycar.brand);
</script>
</body>
</html>
Notă: Funcția de constructor este numit în mod automat atunci când obiectul este
inițializat.
Metoda din clase
Puteți adăuga propriile metode într-o clasă:
Exemplu
Creați o metodă numită „prezent“:
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
mycar.present();
<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
present() {
document.write(mycar.present());
</script>
</body>
</html>
Dupa cum se poate vedea în exemplul de mai sus, apelați metoda prin referire la numele
metodei obiectului urmat de paranteze (parametri ar merge în interiorul paranteze).
Clasa Moștenirea
Pentru a crea o moștenire de clasă, utilizați extends cuvântul cheie.
O clasă creată cu o moștenire de clasă moștenește toate metodele dintr-o altă clasă:
Exemplu
Creați o clasă numită „Model“, care va moșteni metodele din clasa „auto“:
class Car {
constructor(name) {
this.brand = name;
}
present() {
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
mycar = new Model("Ford", "Mustang");
mycar.show();
<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
present() {
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
show() {
return this.present() + ', it is a ' + this.model
mycar = new Model("Ford", "Mustang");
document.write(mycar.show());
</script>
</body>
</html>
super()Metoda se referă la clasa părinte.
Prin apelarea super()metodei în metoda constructor, noi numim metoda constructor

părintelui și are acces la proprietăți și metode ale societății - mamă.
Funcții săgeată
Funcții săgeată au fost introduse în ES6.
Funcții săgeată ne permit să scrie sintaxa funcției mai scurt:
Inainte de:
hello = function() {
return "Hello World!";
}

<!DOCTYPE html>
<html>
<body>
<h1>Function</h1>
<p>This demonstrates a regular function, NOT an arrow function.</p>
<p id="demo"></p>
<script>
hello = function() {
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Cu săgeată Funcția:
hello = () => {
}
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>A demonstration of a simple arrow function.</p>

<p id="demo"></p>
<script>
hello = () => {
</script>
/body>
</html>
Ea devine mai scurt! Dacă funcția are doar o singură declarație, iar declarația returnează
o valoare, puteți elimina parantezele șireturn cuvântul cheie:
Arrow Funcții de returnare Valoare implicit:

hello = () => "Hello World!";

<!DOCTYPE html>
<html>
<body>
<h2>Implicit Return</h2>
<p>The arrow function expects a return value, and returns the value by default, without the
<strong>return</strong> keyword.</p>
<p id="demo"></p>
<script>
hello = () => "Hello World!";
</script>
</body>
</html>
Notă: Aceasta funcționează numai dacă funcția are doar o singură declarație.
Dacă aveți parametri, le transferați în interiorul paranteze:
Arrow cu parametrii:
hello = (val) => "Hello " + val;

<!DOCTYPE html>
<html>
<body>
<p>A demonstration of an arrow function in one line, with parameters.</p>
<p id="demo"></p>
<script>
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("World");
</script>
</body>
</html>
De fapt, dacă aveți doar un singur parametru, puteți sări peste paranteze, precum:
Arrow Funcție Fără Parantezele:

hello = val => "Hello " + val;

<!DOCTYPE html>
<html>
<body>
<p>As you can see in this example, you can skip the parentheses when you have only one parameter.</p>
<p id="demo"></p>
<script>
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("World");
</script>
</body>
</html>
Despre this?
Manipularea thiseste de asemenea diferită în funcțiile săgeată în comparație cu funcțiile

obișnuite.
Pe scurt, cu funcții de săgeată nu există nici o legare this.

În funcțiile regulate thiscuvântul cheie a reprezentat obiectul care a apelat funcția, care
ar putea fi fereastra, documentul, un buton sau orice altceva.
Cu funcțiile săgeții, este thiscuvântul cheie întotdeauna reprezintă obiectul care a definit

funcția de săgeată.
Să ne aruncăm o privire la două exemple pentru a înțelege diferența.
Ambele exemple numesc o metodă de două ori, prima dată când se încarcă pagina, și
încă o dată când utilizatorul face clic pe un buton.
Primul exemplu utilizează o funcție normală, iar al doilea exemplu utilizează o funcție
săgeată.
rezultat arată că primul exemplu returnează două obiecte diferite (buton de ferestre și),
și al doilea exemplu returnează obiectul antet de două ori.
Exemplu
Cu o funcție normală, thisreprezintă obiectul care a apelat funcția:
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

<!DOCTYPE html>
<html>
<body>
<h1>Regular Function</h1>
<p>The <strong>this</strong> keyword represents different objects depending on how the function was called.</p>
<button id="btn">Click Me!</button>
<p><strong>this</strong> represents:</p>
<p id="demo"></p>
<p>See the difference before and after the button is clicked.</p>
<script>
class Header {
constructor() {
this.color = "Red";
changeColor = function() {
</script>
</body>
Exemplu
Cu o funcție de săgeată, thisreprezintă obiectul Antet , indiferent cine apelată funcția:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
}
}
<!DOCTYPE html>
<html>
<body>
<p>The <strong>this</strong> keyword represents the Header object.</p>

<button id="btn">Click Me!</button>
<p><strong>this</strong> represents:</p>
<p id="demo"></p>
<script>
class Header {
constructor() {
this.color = "Red";
changeColor = () => {
</script>
</body>
Amintiți-vă aceste diferențe atunci când lucrați cu funcții. Uneori, comportamentul

funcțiilor obișnuite este ceea ce doriți, dacă nu, utilizarea săgeată funcții.
variabile
Înainte de ES6 au existat doar un singur mod de a defini variabilele: cu varcuvântul

cheie. Dacă nu le -a defini, ar fi atribuite obiectului global. Dacă nu au fost în modul
strict, atunci s - ar obține o eroare în cazul în care variabilele au fost nedefinită.
Acum, cu ES6, există trei modalități de definire a variabilelor tale: var, letși const.
var
var x = 5.6;
Dacă utilizați în varafara unei funcții, aceasta face parte din domeniul de aplicare la nivel
mondial.
Dacă utilizați în varinteriorul unei funcții, aparține acestei funcții.
Dacă utilizați în varinteriorul unui bloc, adică o pentru buclă, variabila este încă
disponibilă în afara acelui bloc.
varare o funcție de domeniul de aplicare, nu un bloc domeniu de aplicare.
lăsa
let x = 5.6;
letare un bloc domeniu de aplicare.
leteste blocul de versiune scoped var, și este limitată la blocul (sau expresie) în cazul
în care este definită.
Dacă utilizați în letinteriorul unui bloc, adică o pentru buclă, variabila este disponibilă
numai în interiorul buclei.
const
const x = 5.6;
const este o variabilă că, odată ce acesta a fost creat, valoarea sa nu se poate schimba.
constare un bloc domeniu de aplicare.

React ES6

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

React ES6

Încărcat de

Drepturi de autor:

Formate disponibile

React ES6

ES6 standuri pentru ECMAScript 6.

ES6 a introdus clase.

O clasă este un tip de funcție, dar în loc de a folosi cuvântul cheie functionpentru ao

Un simplu constructor de clasă:

Acum puteți crea obiecte folosind clasa auto:

Crearea unui obiect numit „MyCar“ bazat pe clasa auto:

Incearca-l tu insuti "

mycar = new Car("Ford");

Metoda din clase

Puteți adăuga propriile metode într-o clasă:

Creați o metodă numită „prezent“:

Incearca-l tu insuti "

return 'I have a ' + this.brand;

mycar = new Car("Ford");

Pentru a crea o moștenire de clasă, utilizați extends cuvântul cheie.

Incearca-l tu insuti "

return 'I have a ' + this.brand;

class Model extends Car {

return this.present() + ', it is a ' + this.model

mycar = new Model("Ford", "Mustang");

Prin apelarea super()metodei în metoda constructor, noi numim metoda constructor

Funcții săgeată au fost introduse în ES6.

Funcții săgeată ne permit să scrie sintaxa funcției mai scurt:

Incearca-l tu insuti "

<p>This demonstrates a regular function, NOT an arrow function.</p>

return "Hello World!";

Incearca-l tu insuti "

<p>A demonstration of a simple arrow function.</p>

return "Hello World!";

Arrow Funcții de returnare Valoare implicit:

Incearca-l tu insuti "

hello = () => "Hello World!";

Notă: Aceasta funcționează numai dacă funcția are doar o singură declarație.

Dacă aveți parametri, le transferați în interiorul paranteze:

Incearca-l tu insuti "

<p>A demonstration of an arrow function in one line, with parameters.</p>

hello = (val) => "Hello " + val;

Arrow Funcție Fără Parantezele:

Incearca-l tu insuti "

hello = val => "Hello " + val;

Manipularea thiseste de asemenea diferită în funcțiile săgeată în comparație cu funcțiile

Pe scurt, cu funcții de săgeată nu există nici o legare this.

Cu funcțiile săgeții, este thiscuvântul cheie întotdeauna reprezintă obiectul care a definit

Să ne aruncăm o privire la două exemple pentru a înțelege diferența.

Cu o funcție normală, thisreprezintă obiectul care a apelat funcția:

Incearca-l tu insuti "

<button id="btn">Click Me!</button>

<p>See the difference before and after the button is clicked.</p>

myheader = new Header();

//The window object calls the function:

//A button object calls the function:

Cu o funcție de săgeată, thisreprezintă obiectul Antet , indiferent cine apelată funcția:

Incearca-l tu insuti "

<p>The <strong>this</strong> keyword represents the Header object.</p>

myheader = new Header();

//The window object calls the function:

//A button object calls the function:

Amintiți-vă aceste diferențe atunci când lucrați cu funcții. Uneori, comportamentul

Înainte de ES6 au existat doar un singur mod de a defini variabilele: cu varcuvântul

Acum, cu ES6, există trei modalități de definire a variabilelor tale: var, letși const.

varare o funcție de domeniul de aplicare, nu un bloc domeniu de aplicare.

constare un bloc domeniu de aplicare.

S-ar putea să vă placă și