Home / Questions / 1799
Accepted
lobito
Asked: 2020-12-26 14:09:29 +0800 CST 2020-12-26 14:09:29 +0800 CST

Когда использовать функцию стрелки вместо обычной функции?

  • 772

Когда использовать функцию стрелки в JavaScript?

() => { console.log('test'); }

function() { console.log('test'); }
javascript

2 Answers

  1. Best Answer

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

    • Значение this, нормальные функции захватывают значение thisкак глобальный объект (или undefinedв строгом режиме ):

      function Persona() {            
    this.edad = 0;

    setInterval(function crecer() {    
        this.edad++; // error lógico, no se refieren a la misma variable
    }, 1000);
}

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

      function Persona(){
    this.edad = 0;

    setInterval(() => {
        this.edad++; // correcto, this se refiere a una instancia de Persona
    }, 1000);
}

    • Аргументы, обычные функции имеют доступ к специальной переменной с именем arguments, которая похожа на массив и содержит ссылки на аргументы, которые передаются функции:

      function foo(arg1, arg2) {
    console.log(arguments[0]);
}

foo("hola", "mundo"); // imprime "hola"

      В стрелочных функциях argumentsэто относится к переменной во внешней области видимостиundefined , если эта переменная не существует, ее значение :

      var arguments = 42;
var arr = () => arguments;

arr(); // 42

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

      var foo = (...args) => {console.log(args[0])};
foo("hola", "mundo"); // Imprime "hola"

    • Если стрелочная функция просто возвращает одну строку кода, вы можете опустить скобки в операторе и ключевом слове return. Это говорит функции стрелки вернуть оператор.

      const double = (num) => num * 2;

    • Ключевое слово yield, это зарезервированное слово также было введено в ES6 и используется в функциях-генераторах , однако его нельзя использовать в стрелочных функциях.

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

    • 37

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

    Так что, я думаю, весь вопрос в том, когда их использовать, а когда нет?

    Когда использовать стрелочные функции?

    Сокращенный синтаксис чистых функций.

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

    // declaracion de funcion 
var nombres = personas.map(function(p){ return p.nombre });
// funcion flecha, este es un buen caso de uso
var nombres = personas.map(p => p.nombre);

    Если вы хотите, чтобы функция стрелки выполнялась в той же лексической области видимости , что и содержащая функция:

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

    Рассмотрим этот другой блок:

    // ECMAScript 5, usando una declaración de función.
function contadorDeSegundos() {
  var that = this;
  this.contar = 0;
  setInterval(function() {
    that.contar++;
  }, 1000);
}

///  ECMAScript 2015, con arrow functions
function contadorDeSegundos() {
  this.contar = 0;                      
  setInterval(() => { this.contar++ }, 1000); 
}

    Как вы можете видеть здесь, код более компактен, но поведение thisсильно отличается.

    Когда НЕ использовать стрелочные функции?

    Когда вам нужны динамические аргументы:

    Как уже говорилось, стрелочные функции не раскрывают объект arguments, поэтому, если вам нужен доступ к нему, вы не можете их использовать. Обратите внимание, что если вы объявите функцию стрелки внутри другой функции, вы получите доступ к одной argumentsиз содержащих функций (если она есть). Вот почему говорят, что стрелочные функции используют лексические аргументы. То есть они видят тот объект arguments, который находится в лексическом объеме.

    Глобально:

    var f = () => { console.log(arguments.length) }
f();
// produce: Uncaught ReferenceError: arguments is not defined(…)
var f2 = function() { console.log(arguments.length) }
f2();
// produce: 0

    В функциях генератора:

    Ключевое слово yieldне разрешено в стрелочных функциях. Эти функции не могут быть функциями генератора (однако они могут содержать функции генератора).

    • 11