Что такое фанк «ЭТО»?
Мы немного поболтали с нашей командой разработчиков, и я увидел, что не все знакомы с новыми версиями JavaScript (ES6 +). Итак, когда они столкнулись с новым синтаксисом функции «стрелка», я заметил множество озадаченных лиц.
Это статья о разнице между стандартной функцией версии ES5 и новой версией JavaScript ES6 + «СТРЕЛКА». Давайте сначала посмотрим на официальное определение:
Стрелочные функции - также называемые функциями «толстая стрелка», представляют собой более сжатый синтаксис для написания функциональных выражений. Они используют новый жетон = ›, который выглядит как толстая стрелка. Стрелочные функции анонимны и меняют способ связывания функций.
Итак, обе версии функций в основном делают одно и то же, хотя есть некоторые отличия. Здесь мало что сказано, поэтому я попытаюсь объяснить на некоторых примерах кода.
Различия в синтаксисе
// ES5
var foo = function (x, y) {
вернуть x + y
};
// ES6+
let foo = (x, y) = ›{return x + y};
В этом случае можно сказать, что стрелочная функция дает тот же результат, что и «обычная», но это всего лишь один из способов написания «стрелочной» функции. С новым синтаксисом мы можем сделать стрелочную функцию еще короче:
пусть foo = (x, y) = ›x + y;
И даже короче, если у нас есть случай, когда в этой функции передается единственный аргумент:
пусть foo = x = ›x * x;
Если мы не передадим никаких аргументов, стрелочная функция могла бы выглядеть так:
let foo = () = ›console.log (‘ foo ’);
or
let foo = _ = ›console.log (‘ foo ’);
Вы можете справедливо спросить: зачем мне изучать новый синтаксис, или я должен изучать его только потому, что он выглядит красивее? Ответ немного сложнее. Двигаемся дальше…
Привязка аргументов (доступ к переменной case)
Обычная функция здесь имеет преимущество:
function foo () {
console.log (аргументы);
}
foo (1,2,3,4); // [1,2,3,4]
Если мы попробуем что-то подобное с функцией стрелки, мы получим ошибку ссылки.
ЭТА привязка, наиболее существенная разница
«ЭТА» проблема вызвала много проблем для Javascript, и чаще всего для разработчиков, не использующих JAVASCRIPT, со всего мира, но на самом деле это не так уж и важно, и я постараюсь упростить это настолько, насколько смогу.
Если мы используем строгий режим ('use strict') и попытаемся зарегистрировать «этот» объект, обычная функция получит undefined. Если мы не будем использовать строгий режим, обычная функция получит доступ к «глобальному» this. объект, и это выглядит так:
var a = 5;
function foo () {
console.log (this.a) // 5
}
С другой стороны, с функцией стрелки «это» правило НЕ применяется таким же образом. В случае стрелочной функции «ЭТО» будет иметь значение объекта в области действия ближайшего предка. Пффф ... Неужели тебе плохо? :) Поясним:
var count = 5;
пусть obj1 = {
количество: 1,
показывать() {
// стрелочная функция внутри тайм-аута
setTimeout (() = ›{
console.log (this.count); // 1
})
}
}
пусть obj2 = {
количество: 1,
показывать(){
// обычная функция внутри тайм-аута
setTimeout (function () {
console.log (this.count); // 5
})
}
}
Итак, мы видим, что стрелочная функция имеет собственное правило для ЭТОГО объекта. Хотя на первый взгляд это может показаться небольшим и «не столь необходимым» различием, понимание «ЭТОГО» окажется очень важным и полезным, и время, которое вы посвятите пониманию «ЭТОЙ» проблемы, несомненно, окупится.
По сценарию Дарко
Если вы ищете уважительные и прозрачные рекомендации по UX-дизайну, загляните на наш сайт. Разработка продуктового решения - непростая задача, но наша команда владельцев продуктов более чем готова помочь и поддержать ваш стартап или компанию, подготовив вашу идею к рынку.
Хотите увидеть больше историй разработчиков? Оставьте несколько аплодисментов 👏 👏 Если вы жаждете новых знаний, вы также можете прокомментировать ниже, какую тему вы бы хотели, чтобы мы затронули. Следите за нашей публикацией!
Да, и если вы ищете команду UX и разработчиков мирового уровня, посетите наш веб-сайт и профиль Dribbble! Здесь, в Kroon Studio, мы выступаем за честную и прозрачную разработку продукта. это исключит любую форму обмана. Даём фанк!
