💻 Функции, стрелочные функции, контексты, замыкания в JavaScript
HTML-код
- Опубликовано: 26 сен 2018
- Функции: github.com/HowProgrammingWork...
Замыкания: github.com/HowProgrammingWork...
Курс «Основы программирования» с примерами на JavaScript habr.com/ru/post/464023/
Оглавление курса: github.com/HowProgrammingWork...
Патреон: / tshemsedinov
00:00:00 Введение
----------------------------------------------- Способы определения функций ---------------------------------------------------
00:11:22 Функция объявление (Declaration)
00:12:46 Функция выражение (Expression)
00:16:07 Лямбда-выражение (Lambda expression) или функция-стрелка (Arrow function)
00:16:43 Лямбда-функция (Lambda function)
------------------------------------------------------------------------------------------------------------------------------------------------------------
00:18:45 Область видимости (Scope)
00:25:00 Функции, как абстракции
00:26:43 Методы функции (name, length, toString( ) )
00:31:26 Значения по умолчанию у функции
00:36:46 Rest-оператор (...args)
00:41:49 Способ определения функции, через new Function
00:44:46 Функции внутри объекта
00:50:42 Обращение к полям объекта из привязанной функции, через this
00:55:24 История синтаксиса создания контекстов, через самовызывающиеся функции ( IIFE)
00:58:30 Методы функции, наследуемой от объекта (call, apply)
01:00:53 Комментирование функций
01:01:27 Задание декомпозиции функции
01:04:24 Замыкание: context
01:08:41 Замыкание: chainning
01:11:55 Замыкание: summator
01:14:16 Замыкание: recursion
Давайте полайкаем этот коммент наверх!
Спасибо большое что сделали лекции доступными не только Вашим студентам. Для заочников, которые учатся сами, такая помощь неоценима. Теперь точно знаешь что и в каком порядке нужно учить, это не говоря о том, что вы очень вдохновляете работать много и усердно :)
Вы самый лучший!!!!!! Круче всех однозначно! Тем кто у вас учится повезло невероятно. Спасибо!
Такому на курсах фронтенд не научат.Спасибо огромное)))
не у впрек автору, но такому научат на любых курсах, это прям база, и тут нет глубины, просто стандартная поверхностная информация
Удивительная вещь третий раз пересматриваю и по прежнему узнаю для себя новые вещи) Огромнейшее спасибо!
1:17:00 набор чисел в примере конечно очень подозрительный...
хахахахах
Хотелось бы сказать спасибо за то, что вашими лекциями могут пользоваться любые студенты. Жаль, у нас в Вузе нет подобных преподавателей, хотелось бы им всем включить ваши лекции и обучаться вместе с вами. Привет вам из Иркутска!
ruclips.net/video/PjEuPimpXhA/видео.html
@@TimurShemsedinov Посмотрю позже, спасибо)
Сейчас смотрю ваш материал по callback и наконец-то понимаю, что это такое)
это лучшее что я видел по нативному js
Спасибо за плейлист! После поверхностного ознакомления с синтаксисом на курсах, искал что-то более глубокое, и нашел! Кроме углубленных определений, еще и показаны разные случаи, что помогает структурировать картину в голове. Спасибо!
Все четко по полочкам. Отличный материал. Спасибо автору.
Тимур, благодарю Вас! Может просто пришло время, но я все таки понял замыкания, большое вам спасибо)
Спасибо! Очень толковые лекции, благодарю.
лучший, бро!) я давно такой контент искал!
Чудова лекція! Дякую вам за вашу працю! 🚀
Отличный материал!👍🏻
Отличный материал. Спасибо автору.
Круто. Все понятно.
Одна из лучших лекций про замыкание! Было бы чудесно, если бы ещё и тайм коды добавили. Так как смотреть это буду многократно, да и не только я! Супер!
Дык добавьте, когда в следующий раз будете смотреть. Поделитесь с автором и сделаете добро всем.
@@Fodintsov сделайте вы
@@Das.Kleine.Krokodil Я Вам разрешаю.
@@Fodintsov Только после вас. Будьте так любезны.
@@Das.Kleine.Krokodil Да точно нет. Мне и без таймкодов живется сладко. А вот тот, кто просит их, вполне в силах сделать их самостоятельно.
Спасибо!
Вообще старый и новый способы объявления параметров по умолчанию не совсем одинаковы: мы можем передавать в качестве аргумента, к примеру, null и при старом способе у нас будет использоваться именном значение по умолчанию в качестве аргумента, а при новом - null
Можно пожалуйста ссылки на лекции Степанова? Спасибо за ваш труд!
ruclips.net/p/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh
Спасибо за уроки! Вопрос.
36:00 Вы говорите, что такой код до сих пор актуален, когда мы занимаемся кодом, связанным с предметной областью. Возможно ли там переписывание функции, с применением значений по умолчанию, по стандарту ES6, вида
function fnHashNew({ a = [7, 25, 10], b = 'Hello', c = 100 } = {}) {
console.dir({ a, b, c });
}
или там, всё же правильнее использовать, код, который используется Вами в примерах, с использованием оператора ИЛИ (||)?
Спасибо большое за лекции, очень доходчивое и подробное изложение материала! Хотел для себя уточнить по поводу термина "лямбда функция", у Вас он используется только применительно к стрелочным функциям, но вроде как лямбда функция подразумевает под собой объявление анонимной функции, а не именно стрелочной? Спасибо!
Я употребляю это как синоним стрелок (или функций не имеющих своего this), хоть стрелки в js тоже могут быть не анонимными, например: const func = () => {}; и потом console.log(func.name); В свойство name записывается название первой переменной, в которую функцию присвоили при объявлении, а чтоб сделать действительно анонимную: const func = (() => () => {})(); теперь func.name пустой. В использовании const func = function () {}; теперь осталось мало смысла, т.к. это нужно менять на стрелку в подавляющем большинстве случаев.
@@TimurShemsedinov Спасибо большое за разъяснение!
42:40: "Ну, это практически eval. Это неприлично."
eval - функция, чье имя нельзя произносить вслух😆
По комментариям видно что кроме меня некого не заинтересовало почему компьютер Тимура зарядилось всего на %1 за 2 часа 😅
В старых версиях федоры не обновляется заряд на диапазоне 98-100%, уже давно поправлено
Спасибо Тимур Гафарофич за интересную лекцию! Скажите в каких случаях нужно использовать лямбда функцию?
Во всех слкчаях, кроме функций, которые становятся методами прототипов, классов и объектов, т.е. везде, где не нужен this.
Наверное писали уже... В последнем примере замыканий ошибка, точнее в том как Вы его прокомментировали. a1 в 15 строке замыкается на 5, а не на 10 и далее тоже самое.
Хотів би додати ремарку щодо 34-ої хвилини відео, де порівнюються дефолтні значення аргументів функції до оператора ||. Це є помилковим твердженням, адже дефолтні значення використаються лише в тому разі, коли аргумент буде undefined, інакше підміни не буде та значення може залишиться null. У випадку з || перехід на правий операнд відбудеться при будь якому false твердженню лівого операнда, включно з null.
замечательные лекции, спасибо, если есть возможность материалы которые вы указываете в лекциях добавить в описание, или где их можно найти
Тут ссылки на все репозитории с примерами кода - github.com/HowProgrammingWorks/Dictionary
Примеры с функциями - github.com/HowProgrammingWorks/Function
с замыканиями - github.com/HowProgrammingWorks/Closure
@@TimurShemsedinov спасибо за ответ, я, наверное неправильно выразился, в начале вы упоминаете лекции Степанова, в видео про Git обещаете конспект с основными командами, наверное их можно найти в Dictionary, но было бы удобно сразу в описании к видео, но это скорее пожелание
Evgen Kaban у Тимура в плейлисте программингс есть.
@@evgenkaban6018 ruclips.net/p/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh
Это задание из темы Функции, лямбды, контексты, замыкания в JavaScript
ссылка на GitHub: github.com/HowProgrammingWorks/Closure
Первое задание: github.com/HowProgrammingWorks/Closure/blob/master/Exercises/1-seq.js
Решение подразумевает, просто какую-то дикую вложенность!
Это пример из правильного решения ( seq(c => a(b(c))) ) как вообще можно это прочитать?
Второе задание.
Я не нашёл ни одного примера на Гитхабе, где находится курс HPW,
где бы Вы объясняли этот материал до этого задания (второго).
Как в таком случае необходимо проходить обучение по Вашему курсу,
если последовательное прохождение лекций и выполнение заданий
подразумевает получение дополнительных знаний, которые Вы не освещаете?
При этом позиционируете курс как начальный в программировании.
В данном частном случае, укажите, пожалуйста, где в Вашем курсе находится
материал освещающий возможность делать такие конструкции как в задании номер 2?
Решение должно быть по типу ( const f = () => {}, f.push = a => {} ) для примера?
На основании какаго материала из Вашего курса должно быть понимание
как выполнить это задание?
то что вы говорите об оптимизирующих компиляторах, это касается только ноды, или браузерного JS тоже?
Хрома с V8 в первую очередь, но и другие движки оптимизируют похожим образом. Лучше всего ориентироваться не на конкретный движок, а на здравый смысл, теорию типов и оценку сложности алгоритмов, тогда есть вероятность, что разработчики виртуальных машин на это же ориентировались.
@@TimurShemsedinov спасибо
Скиньте те самые лекции Степанова, пожалуйста
ruclips.net/p/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh
На 54:10 Вы говорите, что f1, f2, f3 - это функции с побочными эффектами. Разве это так? Они не являются чистыми, не являются детерминированными, но побочных эффектов у них нет. Или я ошибаюсь?
Файл: github.com/HowProgrammingWorks/Function/blob/master/JavaScript/9-this.js
я полагаю, что здесь "побочный эффект" употребляется как синоним нечистой функции. f1, f2, f3 зависят не только от своих аргументов, но и от внешнего состояния (this)
@@alexeishilin неправильно значит употребляется
также в файле 5-default в последнем примере можно использовать деструктуризацию для задания параметров по умолчанию , например так:
function fnHash({ a: a = [7, 25, 10], b: b = 'Hello', c: c = 100}) {
const args = {a, b, c};
console.log(a);
console.log(b);
console.log(c);
console.log(args);
}
const args = {a: 10, b: 20};
fnHash(args);
также этот способ позволит избежать мутации переданного объекта args.
Здравствуйте Тимур Гафарович! Скажите почему при объявлении индетификаторов функций и массивов мы делаем через const ?
Потому, что мы не собираемся их переприсваивать, ссылки не изменятся. А если бы нужно было менять, то let бы использовали, но этого лучше избегать.
@@TimurShemsedinov Спасибо!
👏👍
Тимур, вы говорили в лекции за лекции Степанова. Можно ссылку?! И еще такой вопрос. Ваше отношение к TypeScript? Пишете на нем?!
Я постоянне не пишу на тайпскрипте, но для некоторых лекций буду его использовать, например ruclips.net/video/r6W2z3DQhoI/видео.html
Лекции Степанова в плейлисте у меня в канале ruclips.net/p/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh
@@TimurShemsedinov Еще раз благодарю!
@@TimurShemsedinov как по мне TS перекрывает многие недостатки чистого JS, особенно это касается типизации и статического анализа кода, даже если не брать во внимание дженерики, декораторы и прочее
@@voidshah если бы динамическая типизация была бы недостатком, то JS бы сделали со статической типизацией =)
У нео из матрицы такая же ide
а где док найти, о котором говорится в лекции?) Хочу получше узнать, что функция наследует еще
Это? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
@@TimurShemsedinov да! Благодарю!)
В прикладі про default звучало що новомодні default і старі || одинакові.
Але я думаю тут важливо було наголосити
шо якшо в параметри передавати наприклад 0
то в стилі || значення замінить, а в default залишиться 0
Да, это существенное замечание, спасибо
Дополню комментатора выше, для тех кто читает по диагонали:
const a = (b = 'default') => {
return b; // вернет дефолтное значение, только если в функцию не будет передан параметр или его значение будет undefined
};
const c = (d) => {
return (d || 'default'); // вернёт 'default' в случае, если логическое значение d приводится к false, а это любой из (false, 0, "", null ну и undefined)
};
// пример:
console.log(a(),a(undefined),a(null),a(0),a(false), a(''));
console.log(c(),c(undefined),c(null),c(0),c(false), c(''));
Вопрос:
const sum = new Function('a, b', 'return a + b');
const sum1 = (a,b) => (a+b);
console.dir({
name: sum.name,
//name: 'anonymous,
name1: sum1.name,
//name: 'sum1' Почему тут выводит имя а а для sum нет?
length: sum.length,
toString: sum.toString(),
});
Добрый день !
Проясните пожалуйста вопрос .
Почему вы говорите , что функция принимает аргументы , если она принимает параметры ?
Все параметры вы называете аргументами .
Спасибо
Синонимы
@@TimurShemsedinov спасибо
@@Karmazins Параметры - это локальные переменные внутри функции, а аргументы это те значения которые мы передаем в функцию при ее вызове и тем самым инициализируем параметры.
13:30 Тимур, где вы узнаете такие тонкие детали про разделении функций и тому подобное.
Статьи и доклады авторов виртуальных машин и движков js
@@TimurShemsedinov Не хочу вас "дергать", но можно пару статей
mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
erdem.pl/2019/08/v-8-function-optimization
@@TimurShemsedinov Ух ты спасибо
Если намберы и булеаны хранятся напрямую в стеке вызовов, то вопрос по вот такому коду:
```
function f() {
num = 1;
fetch(...).then(() => console.log(num));
}
f();
```
Коллбек внутри then выполнится по завершении http-запроса, к тому времени call stack будет уже очищен, возможно даже несколько раз. Где же в это время хранится переменная num?
В замыкании (closure)
@@TimurShemsedinov Кажется, разобрался, прошу поправить, если я где-то ошибся: в замыкании хранятся ссылки на все внешние лексические окружения, даже когда из call stack их родительские execution contexts уже выброшены. При этом само замыкание хранится в куче до тех пор, пока на него есть ссылка (в моем примере ссылка изнутри промиса).
@@TheZloymedved да, это может приводить к утечкам памяти, если не понимать, что держит замыкание, но вообще - очень удобно
Видео остановлено на примере 4. Разбор остальных примеров в видео не попал?
Там уже идут функторы и чеининг, аналогичные примеры можно посмотреть в ruclips.net/video/PfuEfIiLX34/видео.html и ruclips.net/video/3Z7f0Gi8pxw/видео.html Возможно даже где-то эти разобраны.
@@TimurShemsedinov Спасибо. В пределах данной лекции интересно было бы еще про функции шаблонизации рассказать
@@eugenekarpenko9799 Шаблонизации строк f`...` ?
48:30. Так разве [powName] - это не деструктуризация массива? Хотя, тогда по логике должно получиться название просто 'p' по первому элементу строки 'pow'
скорее computed property
stackoverflow.com/questions/50376353/wy-we-need-to-put-e-target-name-in-square-brackets
stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object?rq=1
Буде круто, якщо викладете лекції у вигляді підкасту)
Без видео не получится. Как код показать?
Подскаты обычно не такие информативные
будеш в голові код писать і компілить?
что за редактор используется 18:43
mcedit, это часть файлового менеджера midnight commander
Работаю на фронте уже 1,5года и все равно узнаешь какие то интересные моменты, не смотря на то, что это основы)
Да я три года работаю во фронте, за первые две минуты понял, что в айти мне делать нечего - я ничего не знаю //_\\
@@dm.hol.3624 ты на том фронте который с автоматами что ли?
Спасибо за лекцию! но возник вопрос:
почему const a = Math.sin; - функция
const a = 5; - coздание константы ?
Если я правильно понимаю, то это одна из идей функционального программирования. "Функции первого класса". Могут передоваться в аргументы, возвращаться другой функцией, присваиваться. Если вы не понимаете в чем отличие между function setFn() {} и var setFn = function () {}, посмотрите пожалуйста статьи на тему function expression vs function declaration
const a = 5; лучше называть объявлением идентификатора (даже допустимо сказать - объявление переменной). Потому, что константы пишутся большими буквами const TIMEOUT = 5000;
где потренироваться?
В некоторых лекциях я даю задания, но позже я что-то придумаю с практикой и опубликую
@@TimurShemsedinov не смог найти репозиторий с заданием декомпозиции
@@getfunbyfifa2825 Декомпозиция по слоям - github.com/HowProgrammingWorks/AbstractionLayers/tree/master/JavaScript
Декомпозиция функциональная - github.com/HowProgrammingWorks/Abstractions/tree/master/JavaScript
Закинули бы вы этот курс в Udemy и денежку хорошую заработали вы, а также мы получили сертификаты, о то что прослушали ваш курс)
Не очень интересно мне это. А сертификаты я сам выдаю, зачем мне удемия?
@@TimurShemsedinov а на каком портале и где вы свои курсы преподаете?
@@boycovclub У меня курсы открытые, вот они github.com/HowProgrammingWorks/Index
@@TimurShemsedinov спасибо )
Если честно, то вообще не понял из этой леции что такое замыкание.
medium.com/@sshambir/%D0%BE%D1%81%D0%B2%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC-%D0%B7%D0%B0%D0%BC%D1%8B%D0%BA%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B2-javascript-5b83267ef7d1
Вот хорошая статья, которая рассказывает откуда берется замыкание, почему переменные после работы функции все еще доступны и как оно работает
лекции читаются в стиле "ну, эт самое, как бы оно"
Советовали Вас..отметил для себя что как специалист Вы очень сильный..но как преподаватель - нет. С областью видимости как то так все сумбурно объяснили..могли бы хотя бы продебажить скрипт что бы наглядно показать как построчно обрабатывается код и что откуда берется...либо как то иначе..Ваш вариант объяснений мне не зашел. Субъективное мнение.
Не очень понятно как можно начать лекцию с упоминания о работе оптимизатора, коснуться проблем мономорфизма и полиморфизма , чтобы потом начисто забыть об этом и давать вредные советы про a = a || 'defaultValue' и иже с ним.
Sorry, but Kyiv. Not Kiev.
Kyiv is a translit, Kiev is an English word
@@TimurShemsedinov
I respect your opinion, but it's wrong.
In June 2019, at the request of the United States Department of State, the Embassy of Ukraine to the United States, and Ukrainian organizations in America, the name Kyiv was officially adopted by the United States Board on Geographic Names as the only correct one, which resulted in the federal government of the United States using only the new name.
The source is Foreign Names Committee (FNC) Documents geonames.nga.mil/gns/html/PDFDocs/BGNStatement_Kyiv.pdf
@@oom6847 US Department of State isn't a right body to change rules of English language, and referring to authority isn't a right way to argue
Спасибо!