Функции стрелок в 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) => {
// ...
};
javascript
ecmascript-6
arrow-functions
Феликс Клинг
источник
источник
this
очень сильноtimesCalled
увеличивается на 1. Который отвечает на мой личный вопрос:.click( () => { } )
и.click(function() { })
обе создают одинаковое количество функций при использовании в цикле, как вы можете видеть из подсчета Guid в Plnkr.Ответы:
ДЛ: Нет! Функции стрелок и объявления / выражения функций не эквивалентны и не могут быть заменены вслепую.
Если функция, которую вы хотите заменить, не использует
this
,arguments
а не вызываетсяnew
, то да.Как так часто: это зависит . Функции со стрелками ведут себя иначе, чем объявления / выражения функций, поэтому давайте сначала посмотрим на различия:
1. Лексический
this
иarguments
Функции стрелок не имеют своих собственных
this
илиarguments
обязательных. Вместо этого эти идентификаторы разрешаются в лексической области, как и любая другая переменная. Это означает, что внутри функции стрелкиthis
иarguments
в отношении значенийthis
иarguments
в среде, в которой определена функция стрелки (т. Е. «Вне» функции стрелки):В случае выражения функции
this
ссылается на объект, который был создан внутриcreateObject
. В функции стрелка случае,this
относится кthis
оcreateObject
себе.Это делает функции стрелок полезными, если вам нужен доступ
this
к текущей среде:Обратите внимание , что это также означает , что является не возможно установить функцию Эрроу
this
с.bind
или.call
.Если вы не очень знакомы с
this
, подумайте о чтении2. Функции стрелок не могут быть вызваны с
new
ES2015 различает функции, вызов в состоянии и функции, которые сооружать состоянии. Если функция конструируема, ее можно вызвать с помощью
new
, т.е.new User()
. Если функция вызывается, она может быть вызвана безnew
(т.е. нормальный вызов функции).Функции, созданные с помощью объявлений / выражений функций, являются как конструируемыми, так и вызываемыми.
Функции стрелок (и методы) могут быть вызваны только.
class
конструкторы только конструктивны.Если вы пытаетесь вызвать не вызываемую функцию или создать не конструируемую функцию, вы получите ошибку во время выполнения.
Зная это, мы можем утверждать следующее.
Сменная:
this
илиarguments
..bind(this)
Не подлежит замене:
this
)arguments
(см. Ниже))Давайте посмотрим на это подробнее, используя ваши примеры:
Функция конструктора
Это не будет работать, потому что функции стрелок не могут быть вызваны с
new
. Продолжайте использовать объявление функции / выражение или использованиеclass
.Методы прототипа
Скорее всего, нет, потому что методы-прототипы обычно используют
this
для доступа к экземпляру. Если они не используютthis
, то вы можете заменить его. Однако, если вы в первую очередь заботитесь о кратком синтаксисе, используйтеclass
его с кратким синтаксисом метода:Методы объекта
Аналогично для методов в литерале объекта. Если метод хочет обратиться к самому объекту через
this
, продолжайте использовать выражения функции или используйте синтаксис нового метода:Callbacks
Это зависит. Вы обязательно должны заменить его, если вы используете псевдонимы внешнего интерфейса
this
или используете.bind(this)
:Но: если код, который вызывает обратный вызов, явно устанавливает
this
определенное значение, как это часто бывает в обработчиках событий, особенно в jQuery, и обратный вызов используетthis
(илиarguments
), вы не можете использовать функцию стрелки!Вариадические функции
Так как функции стрелок не имеют своих собственных
arguments
, вы не можете просто заменить их функцией стрелок. Однако ES2015 представляет альтернативу использованиюarguments
: параметр rest .Связанный вопрос:
Другие ресурсы:
источник
this
также влияет,super
а что нет.prototype
.AssignmentExpression
) не может быть просто вставлена везде, где может быть выражение функции (PrimaryExpression
), и это довольно часто запутывает людей (особенно, если был разбор ошибки в основных реализациях JS).() => {}()
), или сделать что-то подобноеx || () => {}
. Вот что я имею в виду: ошибки времени выполнения (синтаксический анализ). (И хотя это так, довольно часто люди думают, что ошибка в ошибке.) Вы просто пытаетесь скрыть логические ошибки, которые остались бы незамеченными, потому что они не обязательно дают ошибку при разборе или выполнении?new
Один из них является ошибкой во время выполнения, верно?Подождите, вы не можете использовать функцию стрелки везде в вашем коде, она не будет работать во всех случаях, например,
this
когда функции стрелок не используются. Без сомнения, функция стрелки является отличным дополнением и обеспечивает простоту кода.Но вы не можете использовать функцию стрелки, когда требуется динамический контекст: определение методов, создание объектов с помощью конструкторов, получение цели из этого при обработке событий.
Функции стрелок НЕ должны использоваться, потому что:
Они не имеют
this
Он использует «лексическую область видимости», чтобы выяснить, каким
this
должно быть значение « ». В простом слове лексическая область видимости использует «this
» изнутри тела функции.Они не имеют
arguments
Функции стрелок не имеют
arguments
объекта. Но та же функциональность может быть достигнута с помощью параметров отдыха.let sum = (...args) => args.reduce((x, y) => x + y, 0)
sum(3, 3, 1) // output - 7
`Они не могут быть использованы с
new
Функции стрелок не могут быть константами, потому что у них нет свойства прототипа.
Когда использовать функцию стрелки, а когда нет:
map
,reduce
илиforEach
.источник
arguments
объекте, который недоступен в функциях стрелок, здесь: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Чтобы использовать функции со стрелками
function.prototype.call
, я создал вспомогательную функцию для прототипа объекта:Применение
редактировать
Вам не нужен помощник. Вы могли бы сделать:
источник