Рубрики
Без рубрики

Введение в Ecmascript 6, Часть 1: Функции стрелки, Классы и объектные литералы

Эта статья является частью 1 серии Ecmascript 6, и он основан на часах офиса кодамента, размещенного Джеком Франклин. Эта статья пройдет через функции стрелки, классы и объектные литералы в ES6.

Автор оригинала: Jack Franklin.

Эта статья является частью 1 серии Ecmascript 6, и он основан на часах офиса кодамента, размещенного Джеком Франклин. Эта статья пройдет через функции стрелки, классы и объектные литералы в ES6.

Ecmascript

Функции стрелки

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

Синтаксис

var num = [1,2,3];
num.map(function(x) {
 return X * 2;
});

Выше это карта Функция, в которой вы даете ей анонимную функцию, она берет аргумент, и вы возвращаете X раз в два. Это собирается взять на себя множество номеров и вернуть новый массив, где каждый номер в нем был удвоен, поэтому мы вернемся 2, 4, 6.

Это работает, но это довольно многословно. В Ruby у нас есть гораздо приятный синтаксис, у нас нет этого ключевого слова длинного функции.

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

num.map((x) => x * 2);

В ES6 ключевое слово функции заменяется стрелкой жира.

Как и синтаксис CoffeeScript, ES6 имеет «тонкую стрелку» и синтаксис «FAT AROW AROW». Вам на самом деле не нужно явно возвращаться. Просто последнее утверждение в этой функции – это то, что возвращается – это последнее выражение.

Эти два бита кода достигают одного и того же, но второй – это гораздо приятный синтаксис.

Проблема с областями в ES5

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

var jack = {
 name: 'jack',
 friend: ['james', 'steve'],
 printFriends: function() {
  this.friends.forEach(function(F) {
   log(this.name, 'knows', f);
  })
 }
];
// undefined knows james
// undefined knows steve

В приведенном выше примере Джек объекта имеет имя и массив друзей (Джеймс и Стива). Подписные подруги Функция проходит все друзья, используя foreach , Откуда лесозагодился ” это. Немайте ” должен указывать на мое имя, Джек, а затем на строку ” знает “, то имя друга. Итак, всякий раз, когда я называю эту функцию, я могу ожидать, что эта функция распечатана «Джек знает Джеймс», а «Джек знает Стив».

Тем не менее, проблема здесь – функция заканчивается ведение журнала «Неопределенные знание Джеймса», а «undefined знает Стив». Это связано с правилами того, что такое применение этой функции, когда она вызывается. В этом случае функциональный депозит foreach Будет ли вызвать такой, что его область (ключевое слово в этой функции) не является объектом Jack, как мы ожидаем, но вместо этого он вместо него. Если мы работаем браузер, это было бы окно. Если мы работаем в узле или iOS, это был бы глобальный объект маршрута.

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

Лексический охват в ES6

Функции стрелки решают задачу Scoping – я могу написать один и тот же код, описанный выше, и просто поменяйте ключевые слова функции для моей функции стрелки. Это называется лексической охватившейся.

var jack = {
  name: 'jack',
  friends: ['james', 'steve'],
  printFriends: function() {
    this.friends.forEach((f) => {
      log(this.name, 'knows', f);
    })
  }
};

// jack knows james
// jack knows steve

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

Мы определяем Это` в пределах Подписные подруги Функция объекта Jack (который является глотком), а это Вид связан с объектом Джека. Когда foreach Переходит на каждый элемент, и он вызывает эту функцию, объем этой функции является объектом. Мы можем сделать «Это. Им» Так же, как мы сделали раньше, но функция стрелки жира имеет вид, что сохранил эту область. Теперь мы получаем «Джек знает Джеймс», а «Джек знает Стив».

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

Типичный случайный корпус

Люди приходят в JavaScript для чего-то вроде jQuery или другой библиотеки. Одна из первых, которые люди делают, это сделать запросы на API (например, apis twitter, Facebook, Instagram, что бы это ни было. Они обычно проходят в обратных вызовах вещей, таких как getjson Функция, которая делает HTTP-запросы для получения некоторых данных , Опять же здесь, ” Это. Недвижимость ” не будет ссылаться на разъем из-за объема, когда вызывается эта функция обратного вызова.

var someAjax = {
 name: 'jack',
 get: function() {
  $.getJSON(url, funtion(d) {
   log(this.name, d);
  })
 }
};

Но потом я разбираю это для функции стрелки, а теперь Это. Немайте делает указать на домкрат, как и ожидалось.

var someAjax = {
  name: 'jack',
  get: function() {
    $.getJSON(url,(d) => {
      log(this.name, d);
    })  }
};

Вещи, чтобы отметить о функциях стрелки

Когда функция стрелки находится на одной строке, вам не нужны фигурные скобки при отображении примера. Если я переехал Журнал Из примера выше на той же линии, что и стрелка жира, я мог бы опустить фигурные скобки.

Однако, как только вы хотите разделить стрелку для нескольких строк, вам нужны эти брекеты.

Классы

Большая функция, приходящая к JavaScript и ES6, – это классы. Некоторые люди назвали этими одной из худших особенностей, чтобы прийти к JavaScript, в то время как другие считают, что классы действительно хороши. Я вроде сидеть примерно в середине. Я постараюсь объяснить, почему.

Это то, как будет выглядеть класс в JavaScript:

class Person {
 constructor(name, age) {
  this.name = name,
  this.age = age
 }
 about() {
  log(this.name, this.age);
 }
};

В приведенном выше примере у меня есть « человек » класс. У него есть конструктор, который принимает имя и возраст. Это также устанавливает имя и возрастные свойства. Затем я определил метод под названием « о », который просто регистрирует имя и возраст.

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

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

var jack = 
 new Person('jack', 22);
jack.about();
//=> jack 22

Теперь у меня есть стрелки, проходящие через код. У нас есть конструктор – это то, что он называется, когда вы делаете « var человек », и вы получаете этот аргумент. Конструктор похож на функцию, которая запускается при первом инициализации экземпляра этого класса.

Мы можем определить другие методы, такие как « о » и используйте это через Новый человек («Джек», 22) (который вызывает конструктор). Тогда мы можем назвать « jack.ouout », чтобы получить ” Джек 22 ” – Мое имя и возраст.

Ключевые вынос:

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

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

Наследование класса ES6 использует прототип JavaScript, поэтому здесь нет ничего нового, это просто сахар.

class Son extends Person {
 constructor(name, age) {
  super(name, age);
  this.son = true;
 }
};
var jack = new Son('jack, 22);
jack.about(); //=> jack 22
jack.son; //=> true

В приведенном выше примере класс называется _ Сын _ расширяет Человек класс. Мы называем конструктор, а _ это. _ переопределит конструктор на Человек класс. Когда я создаю новый экземпляр _ Сын, _ Это позвонит _ это. _ конструктор.

Тогда я могу позвонить _ супер _ вызывать метод того же имени в родительском классе. Призыв Супер (имя, возраст) позвонит конструктору в классе человека, проходящей это имя и возраст. Я также установил дополнительную собственность – в этом случае у меня есть «Это .son» для равных прав.

Теперь, если я создаю новый _ сын _ вместо создания нового _ человек _, вы можете увидеть, что я все еще могу позвонить в методе «о», потому что это определено в _ Человек класс _ и _ сын _ в наследстве с этого. Благодаря дополнительной собственности, ранее, я также могу проверить эту новую недвижимость _ сын _ И он установлен на правду.

Объектные литералы

Я показал вам новый способ определения функций и классов, и у нас есть это тоже в объектных литералах сейчас. Таким образом, нет никаких необходимости делать с кодом на функциональных скобках и фигурных брекетах в определении функции. Вы просто опускаете эту среднюю функцию ключевого слова и просто введите «о».

var jack = {
 name: 'jack',
 age: 22,
 about() {
  log(this.name, this age);
 }
};

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

Вы также можете определить свойство внутри объекта, оберните его в квадратных скобках и определите его с помощью динамических деталей:

var jack = {
 {'hello_' + (() => 'world')()]: 42
};
console.log(jack.hello_world); //42

В приведенном выше примере я называю свойство _ “Привет,” _ Но тогда также давая ему функцию, которая возвращает ‘ Мир «Что мне нужно будет оценить. Так что это будет идти вперед и определить недвижимость _ “hello_world” _ на _ Джек _ Объект и установить его до 42.

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

Читайте ещё по теме: