Узнайте ES6 POPE Way Part V: Классы, транспилинг ES6 код и больше ресурсов!

Автор оригинала: FreeCodeCamp Community Member.

Мария Дминского

Добро пожаловать в часть V Узнайте ES6 путь допинга , серия, созданная, чтобы помочь вам легко понять ES6 (Ecmascript 6)!

Сегодня мы исследуем ES6 Классы , Узнайте, как скомпилировать наш код в ES5 для совместимости браузера и узнайте о некоторых потрясающих ресурсах, которые помогут нам понять ES6 на большую глубину! Время приключений! ❤.

Классы в ES6

Преимущества:

Прощественный способ борьбы с прототипом JavaScript – это просто «синтаксический сахар».
Вы все еще используете одну и ту же объектно-ориентированную модель наследования.
Похоже на Класс Синтаксис в Java, Python, Ruby and Php.
Сохраняет вам много печати.

Остерегаться:

Использование может вызывать только Класс через Новый не вызов функции.
Использовать Super () позвонить в Конструктор родительского класса.
А Класс Похоже на объект, но ведет себя как функция – потому что это функция.
Класс Декларации не поднимаются, поскольку объявления функций являются.
Имя, данное Класс Выражение только местное для Класс тело.
А SyntaxError будет брошен, если класс содержит более одного возникновения Конструктор метод.
Хотя члены объекта литерала разделены запятыми, запятые незаконные в Классы – Это подчеркивает разницу между ними. Занимаются запятыми только для будущего синтаксиса (возможно, ES7), которые могут включать свойства, отменяемые запятой.
В Полученные классы (объяснил позже), Super () Необходимо назвать первым, прежде чем вы сможете использовать это ключевое слово. В противном случае это приведет к Собственный ресурс Отказ
Статический Свойства являются свойствами Класс сам. Таким образом, хотя они могут быть унаследованы и доступны непосредственно призвать Класс Имя, если вы позвоните экземпляру Класс (и хранить его в переменной) Вы не сможете получить доступ к этому с этой переменной.

Создание класса

Так как мы создаем Класс ? Давайте сначала просмотрите, как объекты создаются в ES5 без использования Классы :

function Bunny(name, age, favoriteFood) {
  this.name = name;
  this.age = age;
  this.favoriteFood = favoriteFood;
}
  
Bunny.prototype.eatFavFood = function () {
  console.log('\"Mmmm! Those ' + this.favoriteFood + ' were delicious\", said ' + this.name + ', the ' + this.age + ' year old bunny.');
};

var newBunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves');
newBunny.eatFavFood();
// "Mmmm! Those Raspberry Leaves were delicious", said Brigadier Fluffkins, the 3 year old bunny.

Теперь соблюдайте то же самое с ES6 Классы :

class Bunny {
  constructor(name, age, favoriteFood){
    this.name = name;
    this.age = age;
    this.favoriteFood = favoriteFood;
  }
  
  eatFavFood() {
    console.log(`"Mmmm! Those ${this.favoriteFood} were delicious", said ${this.name} the ${this.age} year old bunny.`);
  };
}

let es6Bunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves');
es6Bunny.eatFavFood();
// "Mmmm! Those Raspberry Leaves were delicious", said Brigadier Fluffkins the 3 year old bunny.

Каковы основные различия? Ясно, что Класс Синтаксис выглядит как объект, но помните, что на самом деле это все еще функция и ведет себя так. Проверьте себя:

typeof Bunny
// function

Другое главное отличие – все, что вы хотите хранить, должно быть в пределах Конструктор метод. Любой метод прототипа Класс должно быть внутри этого Класс, Но за пределами Конструктор, без письма ». Прототип ‘, а в функциональном синтаксисе функций ES6.

Два способа определения класса и прототипа наследования

Теперь есть два основных способа определения Класс – пример выше является одним из более распространенных способов, а Класс Декларация. В то время как Класс Действительно, функция и декларации функций поднимаются – это означает, что функция может быть доступна независимо от того, если она называется, прежде чем она объявлена – но вы не можете поднять A Класс Декларация. Это важно помнить:

// Normal function declaration
// called before it is declared and it works.
callMe(); // Testing, Testing.

function callMe() {
  console.log("Testing, Testing.")
}

// This is called after, as we would do in a function expression,
// and it works too!
callMe() // Testing, Testing.


// But with classes...You can't create an instance of a class 
// before creating it:
let es6Bunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves');
es6Bunny.eatFavFood();

class Bunny {
  constructor(name, age, favoriteFood){
    this.name = name;
    this.age = age;
    this.favoriteFood = favoriteFood;
  }
  
  eatFavFood() {
    console.log(`"Mmmm! Those ${this.favoriteFood} were delicious", said ${this.name} the ${this.age} year old bunny.`);
  };
}

// Instead we get this: Uncaught ReferenceError: Bunny is not defined

Причина этого ограничения в том, что Классы может иметь расширяется Пункт – используется для наследования – чье значение может быть указано позднее или может даже зависеть от входного значения или вычисления. Поскольку некоторые выражения могут когда-нибудь должны быть оценены в другой раз, имеет смысл для этой оценки, не подниматься, прежде чем все значения оцениваются. Не делать это может вызвать ошибки в вашем коде.

Тем не менее, можно хранить экземпляр A Класс Прежде чем он создан в функции для последующего использования и оценить его после Класс был определен:

function createNewBunny() { new Bunny(); }
createNewBunny(); // ReferenceError

class Bunny {...etc}
createNewBunny(); // Works!

Второй способ определить класс – Класс выражение. Как и с функциональными выражениями, класс Выражения может быть назван или анонимным. Будьте в курсе, эти имена только местные для Класс тело и не может быть доступен за пределами этого:

// anonymous:
const Bunny = class {
  etc...
};
const BunnyBurgerKins = new Bunny();

// named
const Bunny = class SurferBunny {
  whatIsMyName() {
    return SurferBunny.name;
  }
};
const BunnyBurgerKins = new Bunny();

console.log(BunnyBurgerKins.whatIsMyName()); // SurferBunny
console.log(SurferBunny.name); // ReferenceError: SurferBunny is not defined

Есть два типа Классы : База Класс – или родительский класс – и полученный Класс – Унаследованный подкласс. Здесь Зайчик это базовый класс и Бельгианхаре это полученный класс, так как у него есть расширяется пункт. Обратите внимание, насколько просто синтаксис для наследования прототипа является Классы :

class Bunny {
  constructor(name, age, favoriteFood){
    this.name = name;
    this.age = age;
    this.favoriteFood = favoriteFood;
  }
  
  eatFavFood() {
    console.log(`"Mmmm! That ${this.favoriteFood} was delicious", said ${this.name} the ${this.age} year old bunny.`);
  };
}

class BelgianHare extends Bunny {
  constructor(favDrink, favoriteFood, name, age) {
    super(name, age, favoriteFood);
    this.favDrink = favDrink;
  }
  
  drinkFavDrink() {
    console.log(`\"Thank you for the ${this.favDrink} and ${this.favoriteFood}!\", said ${this.name} the happy ${this.age} year old Belgian Hare bunny.`)
  }
}

let newBelgHare = new BelgianHare('Water', 'Grass', 'Donald', 5);
newBelgHare.drinkFavDrink();
// "Thank you for the Water and Grass!", said Donald the happy 5 year old Belgian Hare bunny.
newBelgHare.eatFavFood();
// "Mmmm! That Grass was delicious", said Donald the 5 year old bunny.

Super () Функция внутри выведенного Класс , Бельгианхаре дает нам доступ к Конструктор в базе Класс , Зайчик Так, когда мы называем методы прототипа от обоих Классы ( PrimeFavdrink () Из полученных класс, и Eatfavfood () От базы Класс ), они оба работают!

Совместимость браузера

Не все функции ES6 полностью поддерживаются на всех браузерах. Между тем оставайтесь в курсе, проверив эти сайты:

Просмотр диаграммы совместимости: https://kangax.github.io/compat-table/es6/
Введите любую функцию ES6 вручную: http://caniuse.com/#search=const.

Транслирующий код ES6

Поскольку не все браузеры поддерживают все функции ES6, вам необходимо транситировать свой код ES6 в компилятор, такой как Бабел или модуль Bundler, как WebPack Отказ

Транспилинг просто означает выделение кода ES6 и преобразование его в ES5, так что его можно прочитать всеми браузерами – как меры безопасности безопасности!

Есть много транспиловочных инструментов, самые популярные также являются теми, которые поддерживают большинство функций ES6:

Babel.js.
Закрытие
Трассер

Вы можете использовать любой из них, но из трех перечисленных, я бы порекомендовал Бабел для меньших проектов. Пожалуйста, следуйте своим простым шагам для установки Бабел в ваш проект через Узел : https://babeljs.io/

Для более крупных проектов я рекомендую использовать WebPack Отказ WebPack Для вас много сложных вещей, в том числе: транспиловочный код, конверсии SAS, управление зависимостями и даже замена таких инструментов, как Грунт , Гульп и Брасифицировать Отказ У вас уже есть информативное руководство, написанное на УБПАК. здесь Отказ

Ресурсы

Проверьте эти ресурсы, чтобы узнать и исследовать ES6 на большей глубине:

Сеть Developer Mozilla (MDN) является превосходным инструментом для изучения всех концепций ES6, на самом деле что-либо JavaScript. Например, давайте узнаем больше о Классы : https://developer.mozilla.org/en-us/docs/web/javascript/reference/Classes.

Babel.js имеет супер полезную статью, суммирую все наши очки ES6 в одну: https://babeljs.io/docs/learn-es2015/

Этот парень всегда весело смотреть: https://www.youtube.com/playlist?list=pl0zvegevsaehjpparlrqjetpnch6vw-sm.

И проверить этот исчерпывающий список исследовательских ресурсов ES6: https://github.com/ericdouglas/es6-learning.

Есть много, многое другое. Идите моего ребенка, исследуйте Thy Internet.

Помните, независимо от того, насколько вы испытываете – Google твой друг.

Поздравляю! Вы сделали это через Узнайте ES6 путь допинга Часть v И теперь вы изучали умный способ использования прототипа наследования через ES6 Классы Поймите, что это важно для всегда транпировать свой код, так как не все браузеры поддерживают Все Особенности ES6- либо через Babel.js для меньших проектов или WebPack для больших проектов.

Держите свою мудрость обновляемой, понравив и следуя. Это последний урок в Узнайте ES6 путь допинга ряд! Поздравляю, вы сделали это !! Похлопайте себя в спину, вы сделали отличную работу! Я так тобой горжусь! Ура!!!

Спасибо за чтение ❤ Оставайтесь настроиться для большего количества уроков JavaScript!

Часть I: const, давай

Часть II: (стрелка) => функции и «это» ключевое слово

Часть III: Шаблонные литералы, Распределительные операторы и генераторы!

Часть IV: параметры по умолчанию, деструктурное назначение и новый метод ES6!

Часть V: Классы, транспилинг ES6 код и больше ресурсов!

Вы также можете найти меня на Github ❤ https://github.com/mashadim.