Я думаю, что в предыдущих ответах не удалось выделить простой пример:
, например, у нас есть массив:
numbers = [5, 15]
Следующее выражение регулярного выражения ^[0-9]+
соответствует: 15
только. Однако ^[0-9]*
соответствует как 5 and 15
. Разница в том, что для оператора +
требуется, по крайней мере, один дубликат предыдущего выражения регулярного выражения
tl; dr: Нет! Функции стрелок и декларации функций / выражения не являются эквивалентными и не могут быть заменены вслепую. Если функция, которую вы хотите заменить, not использует this
, arguments
и не вызывается с new
, тогда да.
Как это часто бывает: это зависит. Функции Arrow имеют другое поведение, чем декларации / выражения функций, поэтому давайте сначала рассмотрим различия:
1. Функции Lexical this
и arguments
не имеют собственных привязок this
или arguments
. Вместо этого эти идентификаторы разрешаются в лексической области, как и любая другая переменная. Это означает, что внутри функции стрелки this
и arguments
относятся к значениям this
и arguments
в окружающей среде, функция стрелки определена в (т.е. «снаружи» стрелка ) // 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
текущей среды:
// 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
.
Если вы не очень знакомы с this
, рассмотрим чтение
2. Функции стрелок не могут быть вызваны с помощью new
ES2015 различает функции, доступные call , и функции, которые являются конструкцией . Если функция конструируется, ее можно вызвать с помощью new
, то есть new User()
. Если функция является вызываемой, ее можно вызвать без new
(т. Е. Вызов нормальной функции).
Функции, созданные посредством деклараций / выражений функций, являются конструктивными и вызываемыми. Функции стрелок (и методы) являются только вызываемыми. class
конструкторы только конструктивны.
Если вы пытаетесь вызвать функцию, не вызываемую вызовом, или построить неконструируемую функцию, вы получите ошибку времени выполнения.
Зная это, мы можем указать следующее.
Сменный:
this
или arguments
. .bind(this)
Не сменный:
this
) arguments
(см. ниже)) Давайте рассмотрим это более подробно с помощью ваших примеров:
Функция конструктора
Это не будет работать, потому что функции стрелок нельзя вызвать с помощью new
. Продолжайте использовать объявление / выражение функции или используйте class
.
Способы прототипа
Скорее всего нет, потому что методы прототипа обычно используют this
для доступа к экземпляру. Если они не используют this
, вы можете его заменить. Однако, если вы в первую очередь заботитесь о сжатом синтаксисе, используйте class
с его синтаксисом сжатого метода:
class User {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
Методы объекта
Аналогично для методов в объектном литерале. Если метод хочет ссылаться на сам объект через this
, продолжайте использовать функциональные выражения или используйте новый синтаксис метода:
const obj = {
getName() {
// ...
},
};
Обратные вызовы
Это зависит. Вы должны обязательно заменить его, если вы наложили внешний this
или используете .bind(this)
:
// old
setTimeout(function() {
// ...
}.bind(this), 500);
// new
setTimeout(() => {
// ...
}, 500);
Но: Если код, вызывающий обратный вызов, явно устанавливает this
на определенное значение , как это часто бывает с обработчиками событий, особенно с jQuery, и обратный вызов использует this
(или arguments
), вы не можете использовать функцию стрелки!
Variadic функции
Поскольку функции стрелок не имеют собственных arguments
, вы не можете просто заменить их функцией стрелки. Однако ES2015 вводит альтернативу использованию arguments
: параметр rest .
// old
function sum() {
let args = [].slice.call(arguments);
// ...
}
// new
const sum = (...args) => {
// ...
};
Связанный вопрос:
Дополнительные ресурсы:
Посмотрите на этот пример Plnkr
Переменная this
сильно отличается timesCalled
с каждым нажатием кнопки увеличивается только на 1. Ответ на мой личный вопрос:
.click( () => { } )
и
.click(function() { })
создают одинаковое количество функции при использовании в цикле, как вы можете видеть из подсчета Guid в Plnkr.
this
также влияет наsuper
и что у них нет.prototype
. – loganfsmyth 18 December 2015 в 23:13AssignmentExpression
) не может быть просто опущена во всем, что может быть функциональным выражением (PrimaryExpression
), и она довольно часто отключает людей (особенно поскольку в основных реализациях JS были ошибки синтаксического анализа). – JMM 1 April 2016 в 22:49() => {}()
) или сделать что-то вродеx || () => {}
. Вот что я имею в виду: ошибки времени выполнения (parse). (И хотя это так, довольно часто люди думают, что ошибка ошибочна.) Вы просто пытаетесь охватить логические ошибки, которые останутся незамеченными, потому что они не обязательно являются ошибками при анализе или исполнении?new
'in one - это ошибка времени выполнения? – JMM 1 April 2016 в 23:27