"Функции стрелок" и "Функции" эквивалентны/взаимозаменяемы?

Функции стрелок в ES2015 обеспечивают более краткий синтаксис.

  • Могу ли я заменить все мои объявления/выражения функций функциями стрелок сейчас?
  • Что я должен высматривать?

Примеры:

Функция конструктора

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

Методы прототипа

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

Объектные (буквальные) методы

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

Callbacks

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

Вариадические функции

function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// vs
const sum = (...args) => {
  // ...
};

ОТВЕТЫ

Ответ 1

tl;dr: Нет! Функции стрелок и объявления/выражения функций не эквивалентны и не могут быть заменены вслепую.
Если функция, которую вы хотите заменить, не использует this, arguments и не вызывается с помощью new, тогда да.

Как это часто бывает: это зависит. Функции со стрелками ведут себя иначе, чем объявления/выражения функций, поэтому давайте сначала посмотрим на различия:

1. Лексические this и arguments

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

// Example using a function expression
function createObject() {
  console.log('Inside 'createObject':', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside 'bar':', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override 'this' inside createObject

Ответ 2

Посмотрите на этот пример Plnkr

Переменная this очень отличается timesCalled увеличивается только на 1 при каждом вызове кнопки. Что отвечает на мой личный вопрос:

.click( () => { } )

и

.click(function() { })

оба создают одинаковое количество функций при использовании в цикле, как вы можете видеть из подсчета Guid в Plnkr.

Ответ 3

Это действительно зависит от того, что использование функции стрелки легко и имеет краткий синтаксис...

Но несколько вещей...

1) Функция стрелки на Annonymous, поэтому для их объявления необходимо сделать:

const myFunc = () => console.log("I'm an arrow function");

2) Лексическая среда как окружающая среда, поэтому давайте посмотрим, как this работает:

const myFunc = () => console.log("arrow function" + this);

и вот результат:

arrow function[object Window]

Как видите, в данном случае это Window object...

3) Как сказано, лексическое окружение - это как окружение, поэтому давайте посмотрим, как работают arguments:

const myFunc = () => console.log("arrow function" + arguments);


И вот результат: Uncaught ReferenceError: аргументы не определены в myFunc3 (: 1: 54) при: 1:1

Как видите, arguments не определены в функциях стрелок...

Ответ 4

Это действительно зависит от того, что использовать функции стрелок легко и имеет краткий синтаксис...

Но несколько вещей, которые вы должны знать:

1) Функция стрелки на Annonymous, поэтому для их объявления необходимо сделать:

const myFunc = () => console.log("I'm an arrow function");

2) Лексическая среда как окружающая среда, поэтому давайте посмотрим, как this работает:

const myFunc = () => console.log("arrow function" + this);

и вот результат:

arrow function[object Window]

Как видите, в данном случае это Window object...

3) Как сказано, лексическое окружение - это как окружение, поэтому давайте посмотрим, как работают arguments:

const myFunc = () => console.log("arrow function" + arguments);


И вот результат:

  Uncaught ReferenceError: arguments is not defined
        at myFunc3 (<anonymous>:1:54)
        at <anonymous>:1:1

Как видите, arguments не определены в функциях стрелок...

Ответ 5

Это действительно зависит от того, что использовать функции стрелок легко и имеет краткий синтаксис...

Но несколько вещей, которые вы должны знать:

1) Функция стрелки на Annonymous, поэтому для их объявления необходимо сделать:

const myFunc = () => console.log("I'm an arrow function");

2) Лексическая среда как окружающая среда, поэтому давайте посмотрим, как this работает:

const myFunc = () => console.log("arrow function" + this);

и вот результат:

arrow function[object Window]

Как видите, в данном случае это Window object...

3) Как сказано, лексическое окружение - это как окружение, поэтому давайте посмотрим, как работают arguments:

const myFunc = () => console.log("arrow function" + arguments);


И вот результат: Uncaught ReferenceError: аргументы не определены в myFunc3 (: 1: 54) при: 1:1

Как видите, arguments не определены в функциях стрелок...

Ответ 6

В этом примере показано, как => находится в конце анонимной функции:

Server = (function() {
  function Server() {}
  Server.prototype.request = (self) => {
    console.log("self", self)
  }
  Server.prototype.call = function(fun) {
    var self = this
    console.log("self", this)
    return (function() {
      fun.apply(this, [this])
    })();
  }
  return Server;

})();

s = new Server()
s.call(s.request);

Ответ 7

Когда вы используете стрелку жира (=>) в отличие от ключевого слова function, контекст this ключевого слова относится к глобальному объекту window а не к текущему объекту.

Ответ 8

Функции стрелок JavaScript - это еще один способ определения функции.

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

Ниже я поделюсь некоторыми простыми примерами, которые сами объясняют объявление функции и как определять функции стрелок JavaScript.

/*----------------------------------
    JavaScript Arrow Functions 
  ----------------------------------*/

// Defining a function.
function addNumbers(a, b) {
    return a + b;
}

addNumbers(10, 6);  // 16

// Using anonymous function.
var addNumbers = function(a, b) {
    return a + b;
}

addNumbers(10, 6); // 16

// using Arrow Functions or Fat Arrow functions.
var addNumbers = (a, b) => {
    return a + b; // with return statement
}

addNumbers(10, 6); // 16

// Using Arrow Functions or Fat Arrow functions without return statements and without curly braces.
var addNumbers = (a, b) => a + b; // this is a condensed way to define a function.

addNumbers(10, 6); // 16

Здесь я предоставлю вам ссылку на функции JavaScript Arrow: как, почему, когда (и когда нет) их использовать, где мы расскажем вам примеры и подробности...