Ошибка компиляции Caffe-segnt

Функции стрелок - наиболее широко используемая функция ES6 до сих пор ...

Использование: все функции ES5 должны быть заменены функциями стрелок ES6, за исключением следующих сценариев:

Функции стрелок НЕ должны использоваться:

1. Когда мы хотим, чтобы функция hoisting как функции стрелок была анонимной.
2. Когда мы хотим использовать this / arguments в функции, поскольку функции стрелки не имеют this / arguments, они зависят от их внешнего контекста.
3. Когда мы хотим использовать именованную функцию, поскольку функции стрелок анонимны.
4. Когда мы хотим использовать функцию как constructor, поскольку функции стрелки не имеют своих this.
5. Когда мы хотим добавить функцию как свойство в объектный литерал и использовать в ней объект, поскольку мы не можем получить доступ к this (который должен быть самим объектом).

Давайте рассмотрим некоторые из вариантов функций стрелок, которые лучше понять:

Вариант 1: Когда мы хотим передать более одного аргумента функции и вернуть некоторые

Версия ES5 :

var multiply = function (a,b) {
    return a*b;
};
console.log(multiply(5,6)); //30

Версия ES6 :

var multiplyArrow = (a,b) => a*b;
console.log(multiplyArrow(5,6)); //30

Примечание: ключевое слово function НЕ требуется. => требуется. {} являются необязательными, когда мы не предоставляем {} return неявно добавляется JavaScript, и когда мы предоставляем {}, нам нужно добавить return, если нам это нужно.

Вариант 2: Если мы хотим передать ТОЛЬКО один аргумент функции и вернуть некоторое значение из него.

Версия ES5 :

var double = function(a) {
    return a*2;
};
console.log(double(2)); //4

Версия ES6 :

var doubleArrow  = a => a*2;
console.log(doubleArrow(2)); //4

Примечание: при передаче только одного аргумента мы можем опустить скобки ().

Вариант 3: когда мы НЕ хотим передавать какие-либо аргумент функции и НЕ хотите возвращать какое-либо значение.

Версия ES5 :

var sayHello = function() {
    console.log("Hello");
};
sayHello(); //Hello

Версия ES6 :

var sayHelloArrow = () => {console.log("sayHelloArrow");}
sayHelloArrow(); //sayHelloArrow

Вариант 4: Если мы хотим явно вернуться из функций стрелок.

Версия ES6 :

var increment = x => {
  return x + 1;
};
console.log(increment(1)); //2

Вариант 5: Когда мы хотим вернуть объект из функций стрелок.

Версия ES6 :

var returnObject = () => ({a:5});
console.log(returnObject());

Примечание: нам нужно обернуть объект в скобки (), в противном случае JavaScript не может различать блок и объект.

Вариант 6: Arro w не имеют arguments (массив, такой как объект), они зависят от внешнего контекста для arguments.

Версия ES6 :

function foo() {
  var abc = i => arguments[0];
  console.log(abc(1));
};    
foo(2); // 2

Примечание: foo - это функция ES5 с массивом arguments, подобным объекту, и переданный ему аргумент 2, поэтому для foo для arguments[0] установлено значение arguments[0].

abc - это функция стрелок ES6, так как у нее нет ее arguments, поэтому она выводит arguments[0] в foo, это внешний контекст.

Вариант 7: Функции стрелки НЕ имеют this, они зависят от внешнего контекста для this

Версия ES5 :

var obj5 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
        setTimeout(function(){
        console.log(this.greet + ": " +  user); // "this" here is undefined.
        });
     }
};

obj5.greetUser("Katty"); //undefined: Katty

Примечание. Обратный вызов, переданный setTimeout, является ES5 и имеет свой собственный this, который не определен в среде use-strict, поэтому мы получаем выход:

undefined: Katty

Версия ES6 :

var obj6 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
    setTimeout(() => console.log(this.greet + ": " +  user)); 
      // this here refers to outer context
   }
};

obj6.greetUser("Katty"); //Hi, Welcome: Katty

Примечание. Обратный вызов, переданный в setTimeout, является функцией стрелок ES6, и у него нет своего this, поэтому он берет его из внешнего контекста, который является greetUser, который имеет this, который является obj6, следовательно мы получаем выход:

Hi, Welcome: Katty

Разное: мы не можем использовать функцию new со стрелками. Функции стрелки не имеют свойства prototype. У нас нет привязки this, когда функция стрелки вызывается через apply или call.