Все, что вам нужно знать о стрелочных функциях ES6 и лексическом «this»

Я тебя прикрыл !!

Прежде чем углубляться в какую-либо новую тему, всегда важно понять, ПОЧЕМУ мы должны ее использовать. Итак, давайте сначала поймем это.

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

1. Они помогают в написании кратких функций JavaScript.
2. У них есть неявный возврат, что позволяет нам писать однострочные функции.
3. Они не связывают this, что очень полезно для обработчиков кликов.

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

[Знаете ли вы: функция стрелки - самая популярная функция ES6]

Давайте начнем с основного синтаксиса стрелочных функций, а затем рассмотрим примеры.

Синтаксис функции стрелки

// No parameters
() => { statements }
// single parameter
(param) => { statements }
param => { statements } 
// multiple parameters
(param1,param2,....paramN) => { statements }
// Returning objects
// enclose objects by parenthesis so they can be treated as objects
(param1,param2) => ( { id: 1 , key: value });

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

Пример 1:

var imgUrlArray = [
        imgUrl1,
        imgUrl2
];
//ES5
imgUrlArray.map(function (img){
     return img;
});
//ES6
imgUrlArray.map(img => img);

В ES6 вы можете пропустить ключевое слово function и ключевое слово return, а также некоторые круглые скобки, фигурные скобки и точки с запятой.

Пример 2:

// Expressions
// ES5
var plusOne = [1,2,3,4,5].map(function(num){ return num + 1 });
// ES6
var plusOne = [1,2,3,4,5].map(num => num + 1);  // implicit return

Пример 3:

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

// ES5
someFunctionReturningPromise
.then(function(data1){
      console.log(data1);
}).then(function(data2){
      console.log(data2);
}).catch(function(err){
      console.log(err);
});
// ES6
someFunctionReturningPromise
.then((data1) => console.log(data1) )
.then((data2) => console.log(data2) )
.catch((err)  => console.log(err) );

Лексическое слово this

Итак, в прошлом вы бы использовали такие утверждения, как -

.bind(this)
var abc = this;

Это известно как лексическая область видимости. Раньше каждая новая функция определяла собственное значение this. Это оказалось далеко не идеальным вариантом для объектно-ориентированного стиля программирования. Стрелочная функция не заново определяет свое собственное this при выполнении. Значение this всегда наследуется из окружающей области.

// ES5
function Counter(){
   this.seconds = 0;
   window.setInterval(function() {
    this.seconds++;
  }.bind(this), 1000);
}
//ES6
function Counter(){
   this.seconds =0;
   window.setInterval( () => this.seconds++,1000 );
}

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

const funct = () => {
       console.log(arguments); // This will throw reference error
}
// undefined

Теперь с ES6 невозможно получить неопределенное количество аргументов внутри массива.

Когда их избегать ?? (Вас предупредили!)

После изучения функций стрелок у вас может возникнуть соблазн заменить все свои функции ES5, но прежде чем вы это сделаете, важно понять, что функции стрелок нельзя использовать в качестве

• Конструкторы

var Person= (param) => {
     this.name = param;
}
var Boy = new Person('Ram');
// Throws error that Person is not a constructor

• Функции обратного вызова с динамическим контекстом

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

var button = document.getElementById('myButton');  
button.addEventListener('click', () => {  
  console.log(this === window); // true and this != button
  this.innerHTML = 'Clicked button';
});

• С новым ключевым словом

var func = () => { console.log("Hello"); };
var func1 = new func();
// Uncaught TypeError: func is not a constructor

Стрелочные функции не работают как конструкторы и не имеют внутреннего метода [[Construct]].

Поэтому в таких случаях вам следует использовать function ().

Хотите узнать больше?? Нужны еще примеры ?? Вот статья, которую я нашел действительно полезной

Если вам удалось чему-то научиться из этого руководства, не забудьте хлопнуть в ладоши 👏

Больше таких сообщений в моем новом личном блоге https://twishasaraiya.github.io/