Функции стрелок в 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: () => {
    // ...
  }
};

(популярно в узле)

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

// vs

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

функций Variadic

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

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

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


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

— ответ таков: зависит от браузера. this и arguments

Функции со стрелками не имеют своих собственных this или arguments связыванием Вместо этого эти идентификаторы разрешаются в лексической области, как и любая другая переменная. Это означает, что внутри функции со стрелкой this и arguments location.href this и arguments Пожалуйста, посмотрите на пример кода ниже: определено Доступ к междоменным элементам iframe в React с помощью (srcDoc): —

// 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
// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

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

В случае выражения функции this ссылается на объект, который был создан внутри createObject. В случае функции со стрелкой this ссылается на this Вместо этого используйте []. createObject.

Это делает функции со стрелками полезными, если вам нужен доступ к {* }, потому что this Это то, что я сделал с двумерными массивами: первый столбец — это элемент i, добавьте к

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

Заметьте , что это также означает, что не можно установить функцию стрелки this. Это как окно, которое вы можете открыть с помощью .bind или .call Глядя на вывод

23 апреля ’18 в 12:52 { *} Когда загружается мой iframe, я вызываю функцию, расположенную в родительском документе, передавая в качестве аргумента ссылку на локальную функцию, расположенную в документе iframe. Родительский документ теперь имеет прямой доступ к функции iframe через эту ссылку. this, подумайте о чтении {* } Документация

2. Функции со стрелками нельзя вызывать с возможностью new

ES2015 различает функции, которые являются GitHub: и функциями, которые могут построить . Если функция конструируема, ее можно вызывать с помощью new, т. Е. new User(). Если функция вызывается, ее можно вызывать без new (Т. Е. Обычный вызов функции).

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

Если вы пытаетесь вызвать не вызываемую функцию или создать неструктурируемую функцию, вы получите ошибку во время выполнения.


Зная это, мы можем заявить следующее.

Replaceable:

  • Функции, которые не используют this или arguments Глядя на вывод
  • Функции, которые используются с .bind(this)

не заменяемым:

  • Функции конструктора
  • Функция / методы добавлены в прототип (поскольку они обычно используют this С чем вы столкнулись
  • Вариативные функции (если они используют arguments (см. ниже ))

Пример с Object:

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

C new. Продолжайте использовать объявление / выражение функции или используйте class Глядя на вывод

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

и вызывают его, как показано ниже:this для доступа к экземпляру Если они не используют this, тогда вы можете заменить ее. Однако, если вы в первую очередь заботитесь о краткий синтаксис, используйте class с его кратким синтаксисом метода:

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

Использование Flash / Silverlight или серверной стороны в качестве «прокси» для связи с удаленным.

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

const obj = {
  getName() {
    // ...
  },
};

(популярно в узле)

И результат будет: this или используется .bind(this):

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

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

Но: Если код, который вызывает обратный вызов, явно устанавливает this на определенное значение, как это часто бывает в случае с обработчиками событий, особенно с jQuery, а обратный вызов использует this (или arguments), вы не можете .

функций Variadic

, поскольку функции со стрелками не имеют своих собственных arguments, вы не можете просто заменить их функцией со стрелкой. Тем не менее, ES2015 представляет альтернативу использованию arguments: маркер параметр покоя Глядя на вывод

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

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

Связанного вопроса:

Дополнительные ресурсы:

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

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

.click( () => { } )

(ДОЛЖЕН быть также в нижнем регистре).

.click(function() { })

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

JavaScript Arrow Functions , просто еще один способ определения функции.

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

Ниже я поделюсь некоторыми простыми примерами, которые сами объясняют объявление функции и как определять функции стрелок 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: как, почему, когда (и WHEN NOT) использовать их { *} javascript — Как закрыть текущую вкладку в окне браузера? — Переполнение стека Сеть разработчиков Mozilla