предисловие

Половина праздника Национального дня закончилась, и эта статья ошеломляет.

ES6 не новинка, ES7 и ES8 были запущены в спешке. Впрочем, что-то не новое, а подытоженное. Каждый, кто изучает интерфейс, также должен иметь переведенные «Введение в стандарт ES6» учителя Бена Руана или «Углубленное понимание ECMAScript6». Эта статья в основном суммирует некоторые общеизвестные моменты ES6. Если вам понравилась моя статья, добро пожаловать в комментарии, добро пожаловать в Star~. Добро пожаловать, чтобы следовать за мнойблог на гитхабе

текст

Мы проведем углубленный анализ содержания, перечисленного ранее.

Новые определения переменных - let и const

Когда ES6 не был популярен, мы использовали метод определения переменных — var. На самом деле var может не показаться странным человеку, который только что познакомился с js. Однако для разработчика это может означать внутреннюю критику. Потому что это один из недостатков javascript, уродство в глазах других языков. Итак, давайте посмотрим, где вина?

1. может быть переопределен. Я не знаю, будет ли в вашем коде такой код, например:

    var a = 10;
    var a = 11;

   Возможно, вы увидите такой способ письма и почувствуете, что это ерунда, тогда вы очень серьезны (вэй) и вредны (сянь). На самом деле, недостатки этого очевидны. В крупномасштабных инженерных разработках вы определяете а, я определяю а, и вас и меня тысячи.В это время технический директор должен беспокоиться. Итак, это первая раздражающая часть var, но что, если вы скажете, что строгого режима нет. Это правда, что строгий режим имеет некоторую спецификацию, но мы не будем это обсуждать. Ведь именно здесь находится ES6 (^-^).

2. Может быть изменен по желанию. Почему он может быть изменен по желанию? Не переменная, а константа. Пример:

    var PI = 3.1415926
    PI = 4.1415926

   Из примера видно, что PI — это константа, которую мы часто используем и которая признана неизменной. Но это не так в javascript. В тот день, если ваш ИП сменил новый стажер в вашей компании, вам может понадобиться много времени, чтобы найти ошибки, но это не вина стажера, возможно, он не знает, что это константа. Впрочем, эта ситуация тоже шутка (^_^).

3. нет области блока. Если вы даже не знаете область действия на уровне блока, поторопитесь и добавьте ее в закладки ^_^ и оглянитесь на нее~, например:

    if(true){
        var i = 10;
    }
    console.log(i);  //10

   Я считаю, что отсутствие блочной области действия для этой переменной доставило нам много неприятностей. Я не знаю когда, я должен снова положить слой закрытия в петлю. Более того, для не-js-разработчиков это может ощущаться как особая (сяо) точка (хуа).

Итак, пусть и const приходят на помощь var, как ее сохранить?

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

   

2. Переменные, определенные константой, не могут быть изменены дважды. Восстановите предыдущий пример, как показано на рисунке:

   

   Тебе не нужно снова беспокоиться о предыдущем интерне, йоу! ! !

3. Переменные, определенные параметрами let и const, формируют область действия блока:Непосредственно выше см.:

   

4. Переменные, которые они определяют, не имеют продвижения переменных, и существует временная мертвая зона.

   Я хотел бы привести пример, чтобы проиллюстрировать этот вопрос более удобно. Во-первых, давайте рассмотрим простой письменный тестовый вопрос:

   var a = 10;
   function hello(){
       console.log(a);
         var a = 11;
         console.log(a);
   }
   hello();

   Думаю, ответ само собой разумеющийся, undefined и 11. Причина: В первой консоли переменная a, определенная ниже, продвигается вперед, поэтому a становится неопределенной, а вторую легче понять. Этот пример, думаю, доставит много хлопот новичкам, как и мне в начале.

   Использование let и const будет отличаться, у них нет переменного продвижения, как показано на рисунке:

   

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

Что такое стрелочная функция, начнем с примера:

export const addToCart = productId => (dispatch, getState) => {
  if (getState().products.byId[productId].inventory > 0) {
    dispatch(addToCartUnsafe(productId))
  }
}

Это фрагмент, который я взял из примера с редуксом. Первое впечатление — "стиль кода лаконичен". Общая спецификация кода очень хороша. В конце концов, это образец кода? Но это трудно понять. Поэтому, чтобы в будущем не смущаться непонимания, давайте поговорим об этой волшебной штуке.

На самом деле эта штука похожа на лямбду Python. Однако он действительно подходит для языка js, всего одно слово «круто». Несколько его правил:

• Если есть только одна переменная, вы можете опустить ()
• Если есть только один оператор возврата, вы можете напрямую опустить эту часть {return}
• Поскольку он называется самой стрелкой, вы должны каждый раз приводить символ =>

Если вы не можете писать сначала, вам придется много практиковаться, чтобы потом было действительно легче.

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

1. Стрелочные функции нельзя использовать в качестве конструкторов.. Как показано на рисунке:

   

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

   

3. Стрелочные функции не имеют аргументов. Мы можем проверить это напрямую, как показано на рисунке:

   

Какой? Без аргументов, что, если я случайно его использую? Как это может быть сделано? Вот еще одно интересное изменение -остальные параметры.

Что такое остаточный параметр? Не волнуйтесь, просто посмотрите на пример, чтобы понять.

const restParam = function(a, ...args){
    console.log(args);
};
restParam(1, 2, 3, 4);   //[2, 3, 4]

Здесь вы обнаружите, что переменная args содержит все введенные позже аргументы, кроме a. Итак, это так называемый остаточный параметр. Среди них а…этот символ. На самом деле, этот символ очень полезен, и его можно назвать символом расширения в ES6. Итак, давайте посмотрим на использование стрелочных функций.

Конечно, при использовании остальных параметров нужно обратить внимание на проблему, т.е.Расположение остальных настроек параметров. Сначала посмотрим на картинку:

Поэтому при использовании остальных параметров следует учитывать, что эта часть помещается вПоследняя позиция. На самом деле, ES6 также вносит еще одно изменение параметра —параметры по умолчанию. Пожалуй, стоит сначала взглянуть на проблему параметров по умолчанию, как мы с ней справлялись раньше. Сценарий: как правило, при настройке задержки будет установлено значение времени по умолчанию, чтобы пользователи не могли использовать его без его настройки.Взгляните на следующий пример:

function defaultParam(time){
    let wait = time || 1000;
      setTimeout(() => {
        //...
    }, wait);
}

Этот способ письма должен быть очень распространенным и широко использоваться. Однако, используя синтаксис ES6, он станет таким, например:

function defaultParam(time = 1000){
    setTimeout(() => {
        //...
    }, time);
}

Кажется, что такой способ написания сделает функцию более лаконичной и понятной.

Назначение деконструкции массива, двоичный массив

Говоря о деструктуризации заданий? Не поймите неправильно, что это свойство массивов. Нет, объекты тоже могут быть удовлетворены. Я просто подумал, что будет лучше написать это здесь

Новая функция присваивания деструктурирования очень проста в использовании. Начнем с более сложного примера:

let [a, b , {name, age}, ...args ] = [1, 2, {name: 'zimo', age: 24}, 3, 4];
console.log(a, b, name, age, args); //1, 2, 'zimo', 24, [3, 4]

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

Это условие, которое должно быть выполнено при деструктурировании присваивания——Часть, которую вы хотите деконструировать, содержание остается прежним. Это обеспечивает идеальную деконструкцию. Для деконструкции длина содержимого слева и справа несовместима, и проблем нет. Например, когда у вас немного больше контента справа, это не имеет большого значения, вам просто нужно убедиться, что часть структуры слева — это то, что вам нужно, например:

let [a, b, c] = [1, 2, 3, 4, 5];
console.log(a, b, c); //1, 2, 3

Это называется частичной деконструкцией, и левая сторона такая же.Для частей из нескольких мест она станет неопределенной. Пример:

let [a,b,c] = [1, 2];
console.log(a, b, c);  //1 2 undefined

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

1. Должен убедиться, что существует процесс назначения. См. пример:

   

   Вы можете видеть пример на рисунке, a и b объявлены отдельно, но нет процесса присваивания, и будет сообщено об ошибке.

2. Структура раздела контента слева должна соответствовать структуре справа.. Как показано на рисунке:

   

   Структуры с обеих сторон здесь несовместимы, если это foo и bar, то их можно нормально деконструировать. Но целью этого примера может быть деконструкция значения в foo, но есть определенные проблемы в способе написания.

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

1. Использование значений по умолчанию.由于之前说过的部分解构的情况出现，所以我们在解构时，可以使用默认值的形式。

    let [a, b = 10] = [1];
    console.log(a, b);  //1, 10

   В этом примере исходная b не определена, но установлена ​​по умолчанию, переменной undefined будет присвоено значение по умолчанию.

2. Использование деструктуризации в функциональных переменных. Для функции ее параметры также могут быть массивами или объектами, и именно так мы можем использовать деструктурирующее присваивание.

   function destructuring({name, age}){
       console.log(name, age);
   }
   destructuring({name: 'zimo', age: 21}); // zimo 21

Частота деструктурирующих назначений тоже сейчас очень велика, и надо хорошо в ней разбираться.

После этого мы можем поговорить о концепции бинарных массивов.

Что такое двоичный массив? На самом деле, мы можем сначала понять массив javascript. Любой, кто знаком с js, знает, что производительность массива js невысока, его суть — объект. Причина, по которой вы можете видеть, что скорость массива в порядке, заключается в том, что движок js выполнил различные оптимизации при его обработке. Взяв за пример движок v8, компилятор c будет использоваться при компиляции и запуске массивов с одним и тем же типом внутренних элементов. Если внутренние типы элементов различаются, он сначала разделит массив, а затем скомпилирует. В частности, вы можете просмотретьГлубокое погружение в массивы JavaScript: эволюция и производительность

Таким образом, мы можем напрямую понять использование двоичных массивов. Двоичные массивы могут состоять из Int8Array, Int16Array, Int32Array и т. д. С точки зрения целых чисел удобство использования велико.

const buffer = new Buffer(100000000);
const arr = new Int8Array(buffer);
console.time('test time');
for(let i = 0; i < arr.length; i++){
    arr[i] = i;
}
console.timeEnd('test time');

На самом деле частота бинарных массивов сейчас мало используется, а ES6 только предлагается, и в дальнейшем будет проведена более детальная доработка массива.

Строка - строка шаблона, начинается с, заканчивается с

В ES6 также были внесены некоторые улучшения в строки. Начнем с нашего нового друга — шаблонных строк. На самом деле в языке существует множество способов представления строк: одинарные, двойные кавычки и обратные кавычки. В javascript двойные и одинарные кавычки одинаковы, в отличие от некоторых статических языков. Однако иногда объединение строк может раздражать разработчиков. Как это решить?

ES6 предлагает решение — шаблонные строки. Что такое строка шаблона? Оберните `` обратными кавычками, затем используйте ${} для переноса переменных. мы можем попрактиковаться

const name="zimo";
const str = `My name is ${name}`;
console.log(str);  //My name is zimo

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

const width = 100;
const height = 200;
const src = "http://www.example.com/example.png";
const html = `<div class="block" width="${0.5 * width}px" height="${height}"><img src="${src}" /></div>`;

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

С помощью строк-шаблонов можно решать очень сложные задачи. Итак, какова роль startWith и EndsWith в заголовке? Возможно, вы будете использовать регулярные выражения, тогда вы можете не использовать эти два API.

По соглашению все же необходимо ввести эти два API.

startsWith: возвращаемое значение логическое, а затем перейти к началу строки, например:

const str = "start in the head";
console.log(str.startsWith('start'));  //true
console.log(str.startsWith('head'));  //false

На самом деле этого можно добиться и с помощью регулярных выражений. Восстановление приведенного выше примера:

const str = "start in the head";
console.log(/^start/.test(str));   //true
console.log(/^head/.test(str));   //false

На самом деле разницы между двумя методами в принципе нет, но функция регулярных выражений лучше и совершеннее. Этот API полезен только в некоторых сценариях. Например, нам часто приходится использовать этот метод, когда нам нужно сопоставить заголовок протокола URL-адреса. пример:

const url = "http://www.example.com";
if(url.startsWith('http')){
    console.log('this is http');
}else if(url.startsWith('https')){
    console.log('this is https');
}else if(url.startsWith('ws')){
    console.log('this is websocket');
}    //this is http

Точно так же endWith имеет тот же эффект.

endsWith: возвращаемое значение имеет логический тип, а затем перейти к концу строки для сопоставления. Например:

const str = "something in the end";
console.log(str.endsWith('end'));   //true
console.log(str.endsWith('something'));  //false

Точно так же его можно реализовать и с помощью регулярных выражений:

const str = "something in the end";
console.log(/end$/.test(str));   //true
console.log(/something$/.test(str));   //false

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

const filename = "upload.jpg";
if(filename.endsWith('.jpg')){
    console.log('this is jpg file');
}else if(filename.endsWith('.png')){
    console.log('this is png file');
}else if(filename.endsWith('.webp')){
    console.log('this is webp file');
}   //this is jpg file

В то же время, строка также добавляет много вещей, Если вам интересно, вы можете перейти к книге, чтобы узнать об этом больше.

Итератор и for...of

Концепция Iterator - это итератор. В ES6 это свойство было наконец официально добавлено. Итераторы в основном представляют собой механизм обхода элементов класса коллекции. Что такое элемент коллекции? Наиболее распространенными являются массивы и объекты. Итераторы могут помочь разработчикам завершить процесс обхода коллекции. Сначала javascript не задавал интерфейс для настройки итераторов, но начиная с ES6 мы можем настраивать итераторы. Прежде чем настраивать итератор, нам нужно знать, что он делает:

• Укажите единый, простой интерфейс доступа для различных структур данных
• Позволяет расположить элементы структуры данных в определенном порядке.
• В ES6 итераторы в основном используются для службы for...of, о которой мы поговорим позже.

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

При этом ES6 также предоставляет интерфейс Iterator — Symbol.iterator. Во-первых, давайте взглянем на классы коллекций с нативными интерфейсами — массивы, массивоподобные объекты, Set и Map. Таким образом, мы можем напрямую вызвать его интерфейс для цикла:

let arr = ['my', 'name', 'is', 'iterator'];
let iter = arr[Symbol.iterator]();
console.log(iter.next());   //{ value: 'my', done: false}
console.log(iter.next());   //{ value: 'name', done: false}
console.log(iter.next());   //{ value: 'is', done: false}

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

let arr = ['I', 'has', 'iterator'];
for(let item of arr){
    console.log(item);
}   //'I', 'has', 'iterator'

Однако, если структура данных интерфейса итератора не определена, нет возможности пройти таким образом, как показано на рисунке:

Тогда что нам делать? На самом деле, для некоторых итерируемых структур данных мы можем настроить итераторы, например:

let iteratorObj = {
    0: 'a',
      1: 'b',
      2: 'c',
      length: 3,
     [Symbol.iterator]: Array.prototype[Symbol.iterator]
}
for(let item of iteratorObj){
    console.log(item);
}  // 'a', 'b', 'c'

Итераторы — очень полезная вещь, вы можете попробовать их и одновременно улучшить свой код.

Генераторы и промисы

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

генератор, называемый генератором. Можно сказать, что он чем-то похож на итератор, и тоже выполняется пошагово через функцию next. В то же время, когда он определен, он использует идентификатор функции*. Он также имеет оператор yield, который может реализовать пошаговое нисходящее выполнение. Давайте посмотрим на пример:

function* generator(){
  yield 1;
  yield 2;
  yield 3;
};

let generate = generator();

console.log(generate.next());  //{value: 1, done: false}
console.log(generate.next());  //{value: 2, done: false}
console.log(generate.next());  //{value: 3, done: true}
console.log(generate.next());  //{value: undefined, done: true}

Таким образом, кажется, что это шаги итератора. Фактически интерфейс итератора может быть определен в такой форме. Однако генераторы делают больше. Это похоже на конечный автомат, который может переключаться из предыдущего состояния в следующее состояние. И как только встречается часть yield, это может указывать на то, что текущий шаг приостановлен. Вам нужно дождаться вызова следующего метода, прежде чем переходить к следующему шагу. В то же время мы также можем использовать значение результата предыдущего шага для выполнения следующей операции. Пример:

function* generator(){
  yield 1;
  let value = yield 2;
  yield 3 + value;
};

let generate = generator();

let value1 = generate.next();
let value2 = generate.next();
let value3 = generate.next(value2.value);
console.log(value1);  //{value: 1, done: false}
console.log(value2);  //{value: 2, done: false}
console.log(value3);  //{value: 5, done: true}

В этом случае вы можете использовать значение в качестве значения параметра вашего третьего шага.

Как я уже говорил, следующий генератор должен вызываться сам по себе. Но как заставить его вызывать себя автоматически. Мы можем использовать for...of для автоматического вызова next, как итератор. Пример:

function* generator(){
  yield 1;
  yield 2;
  yield 3;
};
for(let value of generator()){
  console.log(value);
}   //1, 2, 3

На самом деле, то, о чем я говорил раньше, — это просто базовое использование генераторов. Генераторы в основном используются в области асинхронного программирования. Благодаря функциям, о которых мы говорили ранее, он очень подходит для использования в асинхронном программировании. Конечно, мы также должны упомянуть героя асинхронного программирования, обещания.

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

callback1(function(data){
    //...
      callback2(function(data1){
        const prevData = data;
          //...
          callback3(function(){
            //...
              callback4(function(){
                //...
            });
        });
    });
});

Функция обратного вызова, написав больше, мы обнаружим, что эта перевернутая пирамида будет становиться все глубже и глубже, и нами будет все труднее управлять.

На этот раз, возможно, обещания сыграют свою роль. Только представьте, почему эти callback-функции могут выполняться вне другой callback-функции? основная причина:

1. Для каждой функции обратного вызова невозможно определить, когда будет вызвана другая функция обратного вызова, поскольку элемент управления находится не в текущей программе.
2. Каждая функция обратного вызова более или менее зависит от времени выполнения и данных предыдущей функции обратного вызова.

Основываясь на этих двух моментах, мы обнаружим, что, если вам нужно написать код таким образом, вы должны убедиться, что ваша предыдущая функция обратного вызова выполняется до следующей функции обратного вызова. Мы также можем обнаружить, что между ними отсутствует контракт, то есть, как только произойдет предыдущее, правильное оно или неправильное, контракт соответствующей функции обратного вызова будет уведомлен.

Обещания могут играть такую ​​роль. Он имеет три состояния: ожидание, решено и отклонено. Они соответствуют трем результатам: выполняется, разрешено и отклонено. Функция обратного вызова запустится из состояния ожидания и перейдет либо в разрешенное, либо в отклоненное состояние. И это преобразованиенеизменныйДа, то есть, как только вы перейдете из состояния ожидания в состояние разрешения, вы не сможете снова перейти в состояние отклонения.

Затем обещание будет иметь функцию then, которая может передать значение результата, возвращенное предыдущей функцией обратного вызова. Мы можем написать пример обещания:

new Promise((resolved, rejected) => {
  resolved(1);
}).then(data => {
  console.log(data);
}, err => {
  console.log(err);
}).catch(err => {
  console.log(err);
});  // 1

На самом деле, чтобы написать обещание, достаточно запомнить такую ​​форму. Обещания писать относительно легко. Потому что его форма относительно проста, и есть много лучше инкапсулированных библиотек асинхронных запросов, все со свойствами Promise, такими как axios.

Promise также поставляется с некоторыми другими API, и мы также использовали один из них выше.

• catch: используется для указания функции обратного вызова при возникновении ошибки. Главным образом потому, что ранее мы говорили, что Promise обладает неизменяемой функцией, поэтому, как только в этом процессе возникает ошибка, состояние нельзя изменить, и ошибка может быть обнаружена только в следующем процессе. Поэтому, чтобы предотвратить ошибки в последнем процессе, необходимо использовать catch в конце для отлова ошибок в последнем процессе.
• all: используется для переноса нескольких экземпляров Promise в новый экземпляр Promise.
  • Эта функция требует, чтобы все экземпляры Promise в ней стали Fulfilled, прежде чем обернуть результат в массив и передать его следующему Promise.
  • Если один из экземпляров Promise становится Rejected, результат первого Rejected будет передан следующему Promise.
• race: также используется для переноса нескольких экземпляров Promise в новый экземпляр Promise. Но эта функция отличается
  • Если обещание в этой функции становится выполненным, оно передает результат следующему обещанию.
• разрешение: он преобразует текущий объект в объект Promise
• reject: вернуть объект Promise с ошибкой

Promise можно использовать с генератором, упомянутым ранее, мы можем взглянуть на сценарии использования:

Функция Generator используется для управления процессом, а когда встречаются асинхронные операции, для их обработки используется Promise.

function usePromise(){
  return new Promise(resolve => {
    resolve('my name is promise');
  });
}

function* generator(){
  try{
    let item = yield usePromise();
    console.log(item);
  }catch(err){
    console.log(err);
  }
}

let generate = generator();
generate.next().value.then(data => {
  console.log(data);
}, err => {
  console.log(err);
}).catch(err => {
  console.log(err);
});   //my name is promise

Возможно, вы также можете писать более сложные программы.

Класс и расширения

Последняя тема для разговора — это занятия. Я считаю, что есть бесчисленное множество функций, которые жалуются на то, что в javascript нет классов. В то же время вам также необходимо понимать концепцию наследования классов в js. Что ж, ES6 также предлагает наш самый популярный раздел модуля класса. Мы не будем рассказывать о том, как конструировать объекты (например, конструкторы), прежде чем познакомимся с ними.

Итак, давайте взглянем на новые изменения, которые принес мне ES6:

class Animal{
  constructor(name){
      this.name = name;
  }

  sayName(){
      return this.name;
  }
}

const animal = new Animal('dog');
console.log(animal.sayName());  // 'dog'

Кажется, что эта форма лучше, чем предыдущий метод конструктора. Мы можем понять эту структуру:

• Его внутренний конструктор: указывает на конструктор всего класса
• Его внутренние функции: эти функции определены в прототипе класса.

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

function Animal(name){
    this.name = name;
}
Animal.prototype.sayName = function(){
    return this.name;
}

На самом деле класс инкапсулирован в ES6, что может сделать текущий метод более красивым.

После этого мы кратко разбираемсянаследоватьЭто понятие.

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

function Animal(name){
  this.name = name;
}
Animal.prototype.sayName = function(){
  return this.name;
}
function Dog(name, barking){
  Animal.call(this, name);
  this.barking = barking;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.makeBarking = function(){
  return this.barking;
}
const dog = new Dog('zimo', '汪汪汪');
console.log(dog.makeBarking());   //汪汪汪
console.log(dog.sayName());  //zimo

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

class Animal{
    constructor(name){
        this.name = name;
    }

      sayName(){
        return this.name;
    }
}
class Dog extends Animal{
    constructor(name, barking){
        super(name);
          this.barking = barking;
    }

      makeBarking(){
        return this.barking;
    }
}

Таким образом, вы можете легко выполнить предыдущие этапы композиционного наследования. Если вас интересует инкапсуляция расширений, взгляните на эту статью.наследование аналогового класса JavaScript

Суммировать

Содержание ES6 здесь представляет собой лишь краткое изложение частей, которые можно условно разделить на следующие части:

• Определение переменной - let и const
• Вариант функции - стрелочная функция, остальные параметры
• Изменения массива - деконструкция, расширение
• Строка - строка шаблона, начинается с, заканчивается с
• Итератор и for...of
• Генераторы и промисы
• Класс и расширения

Надеюсь, вы сможете узнать больше об ES6 из этого содержания.В то же время, если вы хотите узнать больше о ES6, самый прямой способ — это читать книги. Надеюсь, ваш код будет писаться все элегантнее.

Если у вас есть какие-либо вопросы по поводу того, что я написал, вы можете прокомментировать.Если есть ошибка в том, что я написал, пожалуйста, поправьте меня. Если вам нравится мой блог, подписывайтесь на меня в Star~ Yo. Давайте добиваться прогресса вместе. Добро пожаловать, чтобы следовать за мнойблог на гитхабе