React ES6

Что такое ES6?

ES6 означает ECMAScript 6.

ECMAScript был создан для стандартизации JavaScript, а ES6 - 6-я версия ECMAScript, она была опубликована в 2015 году и также известна как ECMAScript 2015.

Почему я должен изучить ES6?

React использует ES6, и вы должны быть знакомы с некоторыми новыми функциями, такими как:

• Классы
• Стрелки функций
• Переменные (let, const, var)

Классы

ES6 вводимые классы.

Класс - это тип функции, но вместо использования ключевого слова function чтобы инициировать его, мы используем ключевое слово class, и эти свойства назначаются внутри метода constructor().

class Car {
  constructor(name) {
    this.brand = name;
  }
}

Теперь вы можете создавать объекты с помощью class Car:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

mycar = new Car("Ford");

Метод в классах

Вы можете добавить свои собственные методы в класс:

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

mycar = new Car("Ford");
mycar.present();

Как вы можете видеть в приведенном выше примере, вы вызываете метод, ссылаясь на имя метода объекта, за которым следуют круглые скобки (параметры будут входить в круглые скобки).

Наследование классов

Чтобы создать наследование класса, используйте ключевое слово extends.

Класс, созданный с помощью наследования класса, наследует все методы из другого класса:

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

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();

Методsuper() ссылается на родительский класс.

Вызывая метод super() в методе конструктора, мы вызываем метод конструктора родителя и получаем доступ к свойствам и методам родителя.

Стрелки функций

Функции стрелки были введены в ES6.

Функции со стрелками позволяют нам писать более короткий синтаксис функций:

hello = function() {
  return "Hello World!";
}

hello = () => {
  return "Hello World!";
}

Он становится короче! Если функция имеет только один оператор, и этот оператор возвращает значение, вы можете снять скобки и ключевое слово return:

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

Если у вас есть параметры, вы передаете их внутри круглых скобок:

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

На самом деле, если у вас есть только один параметр, вы также можете пропустить круглые скобки:

hello = val => "Hello " + val;

Как насчет this?

Обработка this также отличается в функциях стрелки по сравнению с обычными функциями.

Короче говоря, с функциями стрелок нет никакой привязки к this.

В обычных функциях ключевое слово this представляет объект, вызывающий функцию, который может быть окном, документом, кнопкой или чем-то еще.

С помощью функций стрелки ключевое слово this всегда представляет объект, который определяет функцию стрелки.

Давайте рассмотрим два примера, чтобы понять разницу.

В обоих примерах метод вызывается дважды: сначала при загрузке страницы и еще раз, когда пользователь нажимает кнопку.

В первом примере используется обычная функция, а во втором - функция стрелки.

Результат показывает, что первый пример возвращает два разных объекта (окно и кнопка), а второй пример возвращает объект заголовка дважды.

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

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    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);

Помните об этих различиях, когда вы работаете с функциями. Иногда поведение регулярных функций - это то, что вы хотите, если нет, используйте функции со стрелками.

Переменные

До появления ES6 существовал только один способ определения ваших переменных: с помощью ключевого слова var. Если бы вы не определили их, они были бы назначены глобальному объекту. Если бы вы не были в строгом режиме, то вы получили бы ошибку, если бы ваши переменные были неопределенными.

Теперь, с ES6, есть три способа определения ваших переменных: var, let, и const.

var x = 5.6;

Если вы используете var вне функции, то она принадлежит к глобальной области видимости.

Если вы используете var внутри функции, она принадлежит этой функции.

Если вы используете var внутри блока, т.е. цикл for, переменная все еще доступна вне этого блока.

let x = 5.6;

let является блочной версией var и ограничивается блоком (или выражением), в котором он определен.

Если вы используете lt внутри блока, т.е. цикла for, переменная доступна только внутри этого цикла.

const x = 5.6;

Переменная const, которая после того, как она была создана, ее значение никогда не может измениться.