Стрелочные функции. Фундаментальный JavaScript
HTML-код
- Опубликовано: 20 сен 2024
- В современном JavaScript есть возможность выбирать синтаксис по написанию функцию. Старые подходы остаются актуальными, но появившиеся в 2015-м стрелочные функции стали лаконичным решением, вместе с тем решившим набившую оскомину проблему потери контекста.
00:57 Базовый пример, es5 синтаксис
02:11 Базовый пример, стрелочная функция
03:06 Сокращенная запись
04:40 Параметры по умолчанию es6
06:04 Пример с одним параметром
07:45 Пример без параметров
08:40 Передача функции как параметра
11:25 Нюанс использования контекста
#стрелочныеФункции #js #es6
__
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Заказать консультацию можно здесь pcgramota.com/...
Это редкое везенье встретить на просторах инета такого грамотного специалиста, который так чётко всё объясняет. Прекрасная речь, глубочайшее знание материала, правильный английский. Не зазнавайтесь только:)
От чистого сердца, спасибо вам большое, если бы не ваши уроки по React, не сдать бы вовремя проект:) Спасибо и удачи
Очень хорошо разговариваете без мычания и затупов. Посмотрю весь плейлист
Олчитно объясняете. Ясно, чётко, коротко, понятно, без лишнего, но детально.
Последние три минуты видео особенно познавательны - спасибо!
Михаил, огромное спасибо за труд. Очень доступно продаёте информацию. Люблю вас!
Михаил, привет. Спасибо за курс по Реакту на Юдеми и все видео на Ютубе. Очень полезно
Спасибо за уроки, Михаил! Желаю успехов и процветания каналу.👍
Отличный курс! Спасибо Вам за старания!
Спасибо за урок!
Очень приятное видео, большое спасибо за работу. Мне нравиться ваш формат, очень удобный, посмотрел, повторил материал, что то забытое вспомнил
Спасибо, что создаешь контент такого рода)) респект и вечная слава тебе!))
спасибо, очень полезный , доступный контент
Спасибо большое.
Согласен! Очень понятно и доступно объясняет информацию, спасибо за контент на канале)
Спасибо за уроки.
Вроде основы но новое узнал)
Уроки очень классные, спасибо!
А на 1.25 вообще красота
супер ! Все четко и ясно !
огонь! Спасибо!
Благодарю!
Михаил - спасибо за ролики! Подписался!) Профита и счастья)
Спасибо за качественный контент!
00:13:06 *Если я по старому синтаксису пойду function [...] то this потеряется*
this никуда не теряется.
this это идентификатор, значение которого устанавливается при _вызове функции_
Если программист не переопределил правила bind this то -
устанавливается this в зависимости от того каким образом функция была вызвана.
*Если функция вызывалась в dot нотации*
то есть как member expression, то this будет установлен в base идентификатора.
Говоря не академическим языком при вызове:
var obj = {
name: 'myObj',
method: function() {
console.log(this);
}
};
obj.method()
то this будет установлен в значение base - то есть в нашем случае obj
Подчеркиваю - установлено в момент вызова функции, а не в момент ее создания.
Другой пример:
var obj = {
name: 'myObj',
method: function() {
console.log(this);
}
};
var secondObj = {
name: 'secondObj',
methodOfSecondObj: obj.method
};
secondObj.methodOfSecondObj()
this будет указывать на secondObj.
var myFunc = obj.method;
myFunc();
this будет указывать на globalThis
*Если функция вызывается как CallExpression*
то this устанавливается:
1) в случае Legacy Mode и with statement то в withStatement
2) в случае strict mode на globalThis
*В случае же ArrowExpression*
this будет всегда в том значении, в котором он определен для Lexical Enviroment нашей ArrowExpression.
Или для любой другой родительской Lexical Enviroment.
Говоря не академическим языком:
При вызове стрелочной функции, this не устанавливается.
Доступ к this осуществляется ровно так же, как и к любому другому идентификатору -
по цепочке областей видимости которая и является той самой цепочкой из Lexical Enviroment.
Например:
var obj = {
name: 'objName',
method: (
function() {
var arrow = ( () => console.log(this) );
arrow(); // this будет тем,
}
)
}
obj.method(); // внутри arrow this будет равен obj.
var secondObj = {
name: 'secondObj',
methodOfSecondObj: obj.method
};
secondObj.methodOfSecondObj()
secondObj
var arrow = ( () => console.log(this) );var obj = {
name: 'objName',
method: (
function() {
arrow();
}
)
}
secondObj.methodOfSecondObj(); // this внутри arrow бцдет уже указывать на secondObj
а если arrow вынести из лексического окружения method то есть сделать вот так
var arrow = ( () => console.log(this) );
var obj = {
name: 'objName',
method: (
function() {
arrow();
}
)
}
то this всегда будет указывать на globalObj вне зависимости от того как будет вызываться method.
Для чего скобки в method: () и var arrow = () ?
var obj = {
name: 'objName',
method: (
function() {
var arrow = ( () => console.log(this) );
arrow(); // this будет тем,
}
)
}
obj.method();
И еще вопрос, this в стрелочной функции берется в момент вызова или в момент определения?
@@UCnBUnAmcvCs8FePEtmn *Скобки*
Это CodeStyle характерный для функциональной парадигмы.
Привычка группировать код одной сущности - функционального выражения.
Для людей привыкших к программированию в императивном стиле, значения
большого не имеет. Кроме разве что эстетического.
Обычно IDE при подобных группировках красиво форматирует сложный вложенный код выражения.
*Консоль*
Про консоль следует знать одну важную особенность - в зависимости от обстоятельств
выполнения кода, окна к которому эта консоль привязана, назначается use strict режим.
Соответственно, если strict режим включен, то по умолчанию, this будет undefined, в отличии
от Legacy Mode где по умолчанию this будет Global Object.
*Стрелочная функция*
В стрелочной функции this определяется ровно точно так же как и для любого идентификатора.
То есть по привычной цепочке видимости, которая, фактически задается цепочкой _Lexical Enviroment_
То есть то, откуда берется this определяется в момент создания функции.
Строго говоря, в JS только есть только один случай, когда this или что-либо другое, определялось
в момент вызова - это вызов функции в дот нотации (или по заумному: _Member Expression_ ).
Пример: _obj.myMethod()_
Потому проще запомнить, что поведение this в случае вызова метода обьекта, который определен как функция, является исключением. И устанавливается в момент вызова. Во всех прочих случаях, везде одинаково -
определяется правилами разрешения области видимости, то есть цепочкой лексических окружений.
*Дополнительная информация*
Подобное поведение характерно для реализации именно в JS. И является нормальным поведением при
решении _нисходящей фунарг_ проблемы. В других языках можно встретить поведение где разрешение
области видимости делается в момент вызова ( _восходящая фунарг_ проблема). Выбор одного способа или второго зависит от того, что предпочитал разработчик языка в момент формирования спецификации.
@@demimurych1 Большое спасибо за развернутый ответ
@@UCnBUnAmcvCs8FePEtmn Нема за що.
Качество видео - на высоте, но тема this, считаю, не раскрыта.
Спасибо, все четко
Клас, дякую!
Спасибо за понятное объяснение стрелочных функций. В каких случаях лучше использовать обычные, а не стрелочные функции?
Во многих случаях зависит от предпочтения разработчика либо от корпоративного style-гайда. По моему опыту, чаще всего обычные функции используются, когда по структуре кода их удобнее положить в конец файла со скриптом, а вызывать где-то выше. Например, бывает нужна одна такая вспомогательная функция и выносить ее в отдельный файл нет большого резона. Либо ситуации, когда нам важен контекст this, без тех нюансов, которые несут в себе стрелочные функции.
Ну вообще-то параметры по умолчанию (в ES6) и проверка с помощью условных операторов (в ранних версиях JS) немного разные вещи. Если мы будем передавать строку и она окажется пустой, то для условного оператора это будет false и он подставит то, что мы ему скажем. А вот параметр по умолчанию, если мы передаём пустую строку, уже не подставит нам значение, которое мы ему указали, и в аргументе так и останется пустая строка. Это надо учитывать.
К тому же проверку с помощью условных операторов можно записать проще: arg = arg || "default_value"
Привет сделай пожалуйста видос про event loop
Спасибо!
Спасибо
Михаил, подскажите, что за тему в vs code вы используете?
А почему контекст потерялся у обычной функции?
Спасибо.
p.s.Мечтательно.... вот бы курс от автора по vue.js на Udemy.
По vue пока не планировал. Сейчас записываю большой курс по js. Потом буду думать. Хотелось по Реакту продолжение записать. Но пока в раздумьях. Теоретически можно и vue.
@@mishanep может проголосовать?
хотя опять набегут реакто-поклонники и закидают количеством. по vue конечно тоже немало видео, но они или с огромными компонентами, куда сложены для "удобства" все кони и люди, или уж заезженные варианты
todolist. а вот жизненного примера с обычными patterns даже типа работа с crud - пост создать и отредактировать с разбиением на макс возможное количество компонентов - нут проблемы.
Может. Надо вообще будет попробовать функционал голосования на ютубе. Пока не понимаю будет ли он вообще работать. Не помню чтобы я сам где то голосовал таким образом.
@@mishanep из российских вот здесь александр делал такое голосование, может он подскажет как это привинтить ruclips.net/user/PyCodingcommunity
Спасибо, изучу.
Только const в ES5 не было.
А есть ли курс от чтоб с 0 и сложных проектов?
Да, у меня есть курс Фундаментальный JS. И курс по React. И там и там есть проекты. В описании есть ссылка на мой сайт.
@@mishanep и я смогу изучить js c 0 или нужны базовые знания
@@sergik55 Там с нуля. Пререквизитом идут html и css. Если их не знаете, то у меня по ним тоже есть курс. По js предварительных знаний не требуется.
белая тема и эсклорер справа. приятного просмотра
Добрый день! Не подскажете как затипизировать этот код с использованием хука useRef?
function Form() {
const ref = useRef(null)
const focus = () => {
ref.current.focus()
}
return (
Focus
)
}