Стрелочные функции в JavaScript

Из множества замечательных функций ES6 стрелочные функции являются одними из наиболее часто используемых, а также экономят много времени разработчикам, так как они сильно сокращают код! Поэтому я подумал, что напишу руководство по стрелочным функциям, а также приведу примеры его использования в дополнение к объяснению страшного «этого» и того, как оно меняется из-за реализации стрелочных функций… Хорошо, поехали!

Основное назначение стрелочных функций - сократить синтаксис, необходимый при написании функции. Ниже приведен пример функции «pre ES6».

var myName;
myName =  function(){
return "Alex";
}

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

myName = () =>{
return "Alex";
}

Наш код теперь состоит из 32 символов, хотя это не кажется большим, мы можем сократить функцию еще больше. Поскольку внутри нашей функции мы только возвращаем значение и больше ничего не делаем внутри функции, мы можем удалить ключевое слово «return» и вместо этого просто оставить «Alex». Наш код уменьшился с 38 символов до 25!

myName = () =>{
“Alex”
};

Тем не менее, для многих функций вам понадобятся параметры, к счастью для нас функции стрелок это учитывают, мы, как обычно, включаем параметры внутри скобок, однако, если у вас есть только один параметр, необходимый для входа в вашу функцию, вы можете удалить Скобки «()» от функции, в противном случае вам потребуется ввести список параметров между скобками. Ниже приведены два примера.

myName = (lastName) =>{
return “Alex ” + lastName;
}
myName = lastName =>{
return “Alex “ + lastName;
}

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

var favouriteShows = [
  'Breaking Bad',
  'Peep Show',
  'MindHunter',
  'Narcos'
];
favouriteShows.map(element => {
  console.log(element);
});

Выше у нас есть массив моих любимых шоу, и мы делаем простую «карту», ​​то есть перебираем каждый элемент в массиве и выводим их на консоль, как вы можете видеть, я не написал карту как:

favouriteShows.map(function(element){
  console.log(element);
});

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

Ужасное «это» в JavaScript

До ES6 каждый вызов функции определял свое собственное «this» и, таким образом, по умолчанию ссылался на глобальный объект DOM, краткий пример ниже.

function car(){
console.log(this.colour);
}
var colour = 'red';
car();

Если бы вы запускали этот код, вы бы увидели, что цвет, напечатанный на консоли, является «красным», потому что ключевое слово this ищет в глобальном объекте переменную color в качестве контекста того, где 'выполняется из не определено, однако, если мы создадим объект и поместим внутри него метод велосипеда, то мы получим другой результат, поскольку мы определили «контекст выполнения».

function car() {
  console.log(this.colour);
}
var colour = "red";
var myObjectOne = { colour: "green", car: car };
var myObjectTwo = { colour: "yellow", car: car };
car();           
myObjectOne.car();      
myObjectTwo.car();

Итак, как вы можете видеть, два цвета, которые будут напечатаны, сначала будут «красными», потому что они используют глобальный контекст, поэтому будет искать переменную «цвет» в глобальном контексте, тогда как второй распечатанный цвет будет зеленым, потому что мы определил «цвет» внутри переменной «myObjectOne», поэтому, когда мы вызываем «myObjectOne.car ()», объектом выполнения является «myObjectOne», поэтому он будет искать свойство «автомобиль» внутри этой переменной и печатать «this. color »переменной« myObjectOne ».

«Это» в контексте стрелочных функций

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

var that = this;

Ниже приведен пример того, как успешная стрелочная функция использует «this».

function Myself(){
  this.myAge = 24;

  setInterval(() => {
    this.myAge++; // this refers to the myself object
  }, 1000);
}

var myVariable = new Myself();

В приведенном выше примере, поскольку стрелочная функция не связывает свое собственное «this», значение «this.myAge» внутри функции «setInterval» совпадает со значением «this.myAge» вне стрелочной функции.

Я надеюсь, что вы кое-что узнали из этой статьи, и, как всегда, если у вас есть какие-либо критические замечания или отзывы, я более чем счастлив выслушать их и поучиться у них, спасибо и удачного дня :)