Переменная в javascript. Нужна помощь в теории.
Хочу понять такую вещь.
Что из себя представляет переменная в js и самое главное — какой ее «жизненный» цикл.
Буду рад вашим размышлениям.
Итак. Есть html код внутри которого находится просто объявление и присвоение значения переменной js. Мы открыли эту страницу в браузере, код выполнился.
1) Почему после полного отображения страницы, выполнения всех скриптов, переменная все еще доступна? Почему мы можем в консоли браузера получить ее, изменить? Разве не должна она был быть убита, когда страница полностью загрузилась?
2) Раз переменная созданная в процессе выполнения кода в браузере все еще жива, когда страница загрузилась, то вопрос — а когда она будет удалена? В момент закрытия вкладки браузера? В момент закрытия браузера? Нигде не нашел в учебниках информации (хотя и не буду утверждать что сильно искал).
3) Да я знаю что в js есть сборщик мусора и я прочел как он работает — удаляет переменные на которые уже не ведут ссылки. Но в моем понимании это должно происходить в момент выполнения кода, разве нет? js интерпретируемый язык, интерпретатор встроенный в браузер читает его, выполняет и сборщик мусора чистит память, если на какую то переменную больше нет ссылок. Но если код выполнен, страница загрузилась, разве не должны все переменные быть очищены? Тогда в какой момент они будут удалены?
Если кто знает где почитать о js именно на таком глубоком уровне как работа с памятью, жизненный цикл переменных в браузере — буду благодарен.
Что из себя представляет переменная в js и самое главное — какой ее «жизненный» цикл.
Буду рад вашим размышлениям.
Итак. Есть html код внутри которого находится просто объявление и присвоение значения переменной js. Мы открыли эту страницу в браузере, код выполнился.
1) Почему после полного отображения страницы, выполнения всех скриптов, переменная все еще доступна? Почему мы можем в консоли браузера получить ее, изменить? Разве не должна она был быть убита, когда страница полностью загрузилась?
2) Раз переменная созданная в процессе выполнения кода в браузере все еще жива, когда страница загрузилась, то вопрос — а когда она будет удалена? В момент закрытия вкладки браузера? В момент закрытия браузера? Нигде не нашел в учебниках информации (хотя и не буду утверждать что сильно искал).
3) Да я знаю что в js есть сборщик мусора и я прочел как он работает — удаляет переменные на которые уже не ведут ссылки. Но в моем понимании это должно происходить в момент выполнения кода, разве нет? js интерпретируемый язык, интерпретатор встроенный в браузер читает его, выполняет и сборщик мусора чистит память, если на какую то переменную больше нет ссылок. Но если код выполнен, страница загрузилась, разве не должны все переменные быть очищены? Тогда в какой момент они будут удалены?
Если кто знает где почитать о js именно на таком глубоком уровне как работа с памятью, жизненный цикл переменных в браузере — буду благодарен.
11 октября 2020, 18:18
Комментарии: 32
я пытался сам себе пояснить, что мол глобально объявленные переменные становятся свойствами объекта window, а этот объект живет столько сколько открыто окно.
Но нет.
«современный синтаксис» задания переменных не помещает их в свойства window.
Но нет.
«современный синтаксис» задания переменных не помещает их в свойства window.
<body>
<h2>Objects</h2>
<script>
'use strict'
const test1 = 1;
let test2 = 2;
var test3 = 3;
const user = {
name: 'alex',
age: 40
};
</script>
</body>
спасибо Иван, но все эти статьи о разницах между const, var let а ведь мой вопрос был не о них.
Я хочу понять как работает сборка мусора в javascript и какой жизненный цикл переменных в браузере, в какой момент очищается оперативная память, выделенная под определенную переменную и так далее.
Я хочу понять как работает сборка мусора в javascript и какой жизненный цикл переменных в браузере, в какой момент очищается оперативная память, выделенная под определенную переменную и так далее.
Разве не должна она был быть убита, когда страница полностью загрузилась?Нет, это же не php, который born to die.
а когда она будет удалена?Когда на нее не останется ссылок. Браузер тут вообще ни при чем, он предоставляет только интерпретатор JS.
Почитай про WeakMap и WeakSet, там подробнее объясняется про сборку мусора и вот это все.
Ну и там же есть ссылка на отдельную статью про сборку мусора.
жизненный цикл переменных в браузереВ браузере он ничем не отличается от того же Node.js, например. В обоих случаях JS не умирает так, как ты привык об этом думать из-за php.
я изучаю js сквозь призму знаний о phpВ этом и проблема: PHP и JS имеют абсолютно разную философию и цели, поэтому и работают по-разному.
Задача PHP — обработать запрос, выплюнуть какой-нибудь ответ и помереть. Тот же Node.js единожды инициализируется и дальше обрабатывает сколько угодно запросов, продолжая хранить все ранее инциализированные переменные в оперативке.
Соответственно, в Node.js нельзя просто сделать условный exit (die), чтобы быстренько помереть в рандомом месте приложения и выплюнуть ответ. Это может стать сюрпризом и вызвать сложности на первых порах, но в целом это помогает грамотнее проектировать приложение и уделять больше внимания его циклу жизни.
да, я понимаю, поэтому и стараюсь «выбросить из головы» концепции php.
два момента только:
— в учебниках крайне мало уделяется внимания именно этому аспекту, поэтому и спрашиваю у более опытных.
— плюс мне кажется что js в браузере и js на сервере это немного разные вещи. У них одинаковый синтаксис но разная идеология, нет? node js это прежде всего процесс в операционной системе, он регистрируется как сервис (по крайней мере в линуксе) и понятное дело — работает постоянно. js в браузере — это лишь код, которые обрабатывается встроенным в браузер интерпретатором. И мне сложно представить что он единожды инициализируется и дальше работает.
два момента только:
— в учебниках крайне мало уделяется внимания именно этому аспекту, поэтому и спрашиваю у более опытных.
— плюс мне кажется что js в браузере и js на сервере это немного разные вещи. У них одинаковый синтаксис но разная идеология, нет? node js это прежде всего процесс в операционной системе, он регистрируется как сервис (по крайней мере в линуксе) и понятное дело — работает постоянно. js в браузере — это лишь код, которые обрабатывается встроенным в браузер интерпретатором. И мне сложно представить что он единожды инициализируется и дальше работает.
в учебниках крайне мало уделяется внимания именно этому аспекту, поэтому и спрашиваю у более опытныхА чему уделять внимание? Держи в голове, что JS работает иначе, а погружаться в детали и пытаться понять логику работы под капотом — лишнее для тебя сейчас, имхо. Тебе нужно учить именно сам JS — фишки ES6+, пытаться писать оптимальный и грамотный код, а не лезть в дебри. Эти знания тебе сейчас практически ничего не дадут. Да, нужно знать какую-то базу про Event Loop, но эти базовые знания можно получить из 1-2 статей.
плюс мне кажется что js в браузере и js на сервере это немного разные вещи.Да, конечно, различия есть, но эти различия — особенности среды исполнения, а не какие-то «фишки языка». Язык работает одинаково как в хроме, так и в ноде, потому что там работает один и тот же интерпретатор v8.
Опять же, тебе не нужно фокусироваться на этих различиях, если ты не пишешь серверную часть на ноде.
js в браузере — это лишь код, которые обрабатывается встроенным в браузер интерпретатором. И мне сложно представить что он единожды инициализируется и дальше работает.Если так уж интересно, то по такому принципу работает консоль в браузере.
До WeakMap я еще не дошел в этом учебнике, спасибо.
Знаете что еще немного удивляет в js — это отсутствие официальной документации.
Я ведь не ошибаюсь — ее нет? У php есть php.net документация на котором ведется разработчиками, у python есть python.org, но я не встречал официального сайта по js (ну и кстати по CSS тоже). Есть learn.javascript есть mozilla MDN (но mozilla само по себе open source сообщество и это как я понимаю просто ребята молодцы и своими силами собирают в одном месте информацию), есть кучи статей на хабре или видео на ютубе, но ни одного сайта не видел который можно было назвать официальным и первоисточником.
Знаете что еще немного удивляет в js — это отсутствие официальной документации.
Я ведь не ошибаюсь — ее нет? У php есть php.net документация на котором ведется разработчиками, у python есть python.org, но я не встречал официального сайта по js (ну и кстати по CSS тоже). Есть learn.javascript есть mozilla MDN (но mozilla само по себе open source сообщество и это как я понимаю просто ребята молодцы и своими силами собирают в одном месте информацию), есть кучи статей на хабре или видео на ютубе, но ни одного сайта не видел который можно было назвать официальным и первоисточником.
Но если код выполнен, страница загрузилась, разве не должны все переменные быть очищены?Абсолютно нет. Пример для понимания, страница загрузилась, но остался код который срабатывает при определенных действиях пользователя, при истечении какого-то времени, с определенным интервалом и т.д.
вы правы, просто я не вижу ничего подобного в документации.
То что вы говорите, событие пользователя и прочее — все это асинхронность выполнения кода.
Есть вот такой сайт
latentflip.com/loupe/
на котором наглядно отображается так называемый event loop для javascript в браузере, видно как асинхронные события помещаются в апи браузера, ждут наступления события, в то время как основной поток идет себе синхронно и так далее. И если в nodejs код всегда асинхронный, то в браузере (насколько я понимаю) нет, он наоборот всегда синхронный. Иначе нам не приходилось бы добавлять атрибут defer при подключении скрипта. При условии что мы не создаем асинхронности сами — добавляем промисы, колбеки и так далее.
Поэтому мне казалось что было бы логично, что если весь код состоит из объявления и присвоения переменной, то после выполнения кода — прибить эту переменную в памяти. Но это так… лишь мои домыслы, а практика показывает что нет — все переменные продолжают храниться в оперативной памяти.
А в каком тогда случае очищается память? Это где то задокументировано, вам попадалась такая инфа? При перезагрузке страницы? При закрытии вкладки?
То что вы говорите, событие пользователя и прочее — все это асинхронность выполнения кода.
Есть вот такой сайт
latentflip.com/loupe/
на котором наглядно отображается так называемый event loop для javascript в браузере, видно как асинхронные события помещаются в апи браузера, ждут наступления события, в то время как основной поток идет себе синхронно и так далее. И если в nodejs код всегда асинхронный, то в браузере (насколько я понимаю) нет, он наоборот всегда синхронный. Иначе нам не приходилось бы добавлять атрибут defer при подключении скрипта. При условии что мы не создаем асинхронности сами — добавляем промисы, колбеки и так далее.
Поэтому мне казалось что было бы логично, что если весь код состоит из объявления и присвоения переменной, то после выполнения кода — прибить эту переменную в памяти. Но это так… лишь мои домыслы, а практика показывает что нет — все переменные продолжают храниться в оперативной памяти.
А в каком тогда случае очищается память? Это где то задокументировано, вам попадалась такая инфа? При перезагрузке страницы? При закрытии вкладки?
Наверное вот такие вопросы и возникают потому что все на бегу а не основательно и по порядку.
Очень рекомендую уроки по JS Владилена Минина. У него превосходный канал на Ютубе с отличным контентом и есть полноценные курсы начиная от основ JS до всевозможных фреймворков. Ну и практика конечно.
Очень рекомендую уроки по JS Владилена Минина. У него превосходный канал на Ютубе с отличным контентом и есть полноценные курсы начиная от основ JS до всевозможных фреймворков. Ну и практика конечно.
Спасибо) Как раз из видео Минина я и узнал о том, как работает event loop и асинхронность в js )
www.youtube.com/watch?v=vIZs5tH-HGQ
www.youtube.com/watch?v=vIZs5tH-HGQ
Не соглашусь Николай насчет неосновательности и не по порядку.
Хотя у меня уже есть начальные знания о javascript, я прохожу учебник learn.javascript.ru/ пошагово, с первой главы. Иногда честно через силу, конкатенирую строчки, пишу if ы и прочий первоначальный синтаксис, хотя тянет сразу перейти к тому, что совсем прошло мимо меня — классы в js, модули, импорты экспорты и прочее. Но пока держу себя в руках.
Хотя у меня уже есть начальные знания о javascript, я прохожу учебник learn.javascript.ru/ пошагово, с первой главы. Иногда честно через силу, конкатенирую строчки, пишу if ы и прочий первоначальный синтаксис, хотя тянет сразу перейти к тому, что совсем прошло мимо меня — классы в js, модули, импорты экспорты и прочее. Но пока держу себя в руках.
Я бы рекомендовал вместо learn.javascript.ru/ – developer.mozilla.org/ru/docs/Web/JavaScript
Я продолжу задавать тут дилетантские вопросы по js.
А почему в таком вот цикле (объект user заранее создан)
А почему в таком вот цикле (объект user заранее создан)
for (const key in user) {
if (user.hasOwnProperty(key)) {
const element = user[key];
console.log(element);
}
}
1. Объект user просто определен выше по логике кода. Он не существует сам по себе. Читаем цикл for in
2. Переменные имеют область видимости. Она ограничена круглыми или фигурными скобками. Читаем область видимости. Попробуй вызови в консоли element за пределами ближайшей фигурной скобки
3. Как только область видимости заканчивается — сборщик мусора уничтожает переменную и ее можно объявить заново. В цикле можно заново объявлять переменные на каждой итерации. Читаем про сборщик мусора.
4. Есть такое правило ВСЕГДА использовать const при объявлении переменной. Это связано с тем что далее нельзя будет изменить ее тип и при объявлении четко понятно какого типа переменная. Исключение — если изначально понятно что переменная ниже будет перезаписана. И это объявление тоже служит сигналом для читающего код что где то ниже переменная будет перезаписана. Таким образом const и let это еще и информация о судьбе переменной. Будет ли ниже ее изменение.
2. Переменные имеют область видимости. Она ограничена круглыми или фигурными скобками. Читаем область видимости. Попробуй вызови в консоли element за пределами ближайшей фигурной скобки
3. Как только область видимости заканчивается — сборщик мусора уничтожает переменную и ее можно объявить заново. В цикле можно заново объявлять переменные на каждой итерации. Читаем про сборщик мусора.
4. Есть такое правило ВСЕГДА использовать const при объявлении переменной. Это связано с тем что далее нельзя будет изменить ее тип и при объявлении четко понятно какого типа переменная. Исключение — если изначально понятно что переменная ниже будет перезаписана. И это объявление тоже служит сигналом для читающего код что где то ниже переменная будет перезаписана. Таким образом const и let это еще и информация о судьбе переменной. Будет ли ниже ее изменение.
Кстати сегодня еще раз повторно читал главу о сборке мусора в js, так как эта темя меня интересует. Но каюсь я так и не понял, что сборщик мусора настолько «шустрый» что успевает отрабатывать на каждой итерации циклов. Там написано «Сборка мусора выполняется автоматически. Мы не можем ускорить или предотвратить её.» и плюс «чтобы уменьшить возможное влияние на производительность, сборщик мусора старается работать только во время простоя процессора.»
Но вы безусловно правы.
Но вы безусловно правы.
Есть такое правило ВСЕГДА использовать const при объявлении переменной.Опять таки, дилетансткое мнение ни о чем кроме размышлений не основанное, но мне кажется что в js так прижился const что даже стал негласным правилом, только потому что 90 процентов случаев в переменных лежат не примитивы, а объекты, а их свойства и методы можно менять и у const. И вроде как всем удобно. Потому как концепция «неизменяемая переменная» это странная идея и вообще — оксюморон какой-то.
Спасибо Николай что не прошли мимо.
Тоесть я так понимаю, что в классическом цикле for const не прокатит, изза того что мы переменную i на каждой иттерации увеличиваем, а значит нам нужна ссылка на нее в памяти?
Так плохо
Тоесть я так понимаю, что в классическом цикле for const не прокатит, изза того что мы переменную i на каждой иттерации увеличиваем, а значит нам нужна ссылка на нее в памяти?
Так плохо
for (const i = 0; i < 10; i++) {
// do something
}for (let i = 0; i < 10; i++) {
//
}далее нельзя будет изменить ее типНу скорее значение? Тип понятное дело не измениться если нельзя заменить даже значение, но Боже мой, а с каких пор js стал языком со строгой типизацией? Такое чувство что из него C++ начали делать.
а так хорошода наверное. Вообще на моем опыте в счетчиках всегда let используют. Здесь как раз срабатывает правило — показать читающему что эта переменная где то далее изменится. Здесь не техническая особенность а скорее общепринятое написание.
Ну скорее значение?
Неа. Именно тип. Значение двух типов менять можно. Это массив и объект. Мы запросто можем манипулировать их внутренностями.
Неа. Именно тип. Значение двух типов менять можно. Это массив и объект. Мы запросто можем манипулировать их внутренностями.понимаю что занимаюсь демагогией бесполезной, но не соглашусь. Вы имеете ввиду что можете изменять значения свойств объекта, объявленного через const. А положить вместо этого объекта другой можете? Нет, хотя тип при этом вы же не измените. И у одного будет тип object и у второго.
for (const i = 0; i < 10; i++) {Этот вариант просто не будет работать, потому что ты мутируешь константу в выражении i++.
Это то же самое, что написать
const a = 1;
a++;Я правильно понимаю — это не есть правило языка, это скорее «культура написания кода»?Ты можешь использовать хоть var, но такой код никто не захочет читать и поддерживать. У const и let масса преимуществ перед var. Именно из-за них их и используют. Почитай про hoisting.
Потому как концепция «неизменяемая переменная» это странная идеяОтчего же это?
Спасибо Артем.
вариант просто не будет работать, потому что ты мутируешь константу в выражении i++я вроде бы именно это и написал, только без термина мутирования. Я написал «const не прокатит, изза того что мы переменную i на каждой итерации увеличиваем»
но такой код никто не захочет читать и поддерживать— вроде бы тоже самое и я написал, что если язык позволяет так делать, то значит это НЕ есть «правило языка», это «культура написания кода», когда ты делаешь код гармоничнее и для себя и для потомков.
Отчего же это?Лишь мои размышления. Название «переменная» намекает на изменяемость. Переменная должна «переменятся» или хотя бы иметь такую возможность.
Спасибо, с вами приятно работать. Недавно создавали корпоративный блог на moxd и со всей работой спаривлся наш програмист в одиночку причем. Все хорошо работает, удобно и много нужных настроек. За такими платформами будущее интернета. Наш сайт galeonyachtsforsale.com по продаже моторных яхт и катеров работает на немного устаревшей cms и в скором времени планируем переезжать на что то новое. Расматриваем разные варианты и mdox в их числе. Но пока не решили окончательно
Да яхта дело хорошее, у меня знакомый очень любит путешествие на яхте, сказал бы даже что это его хобби. А мне вот больше нравится выращивать овощи на своём участке, это мое хобби. Нашел классное издание для выращивания овощей здесь emtomat.ru/ руководствуюсь им.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
28 минут назад
<script>
document.addEventListener('fetchit:success', (e) => { // Добавляем listener на событие успешной обработки формы
const ...
2 часа назад
ок)
Вчера в 21:51
Ок, спасибо за совет. Тогда напишу свой коннектор
Вчера в 19:21
На тестовом тарифе памяти не хватает.
Вчера в 18:08
* поправочка:
<base>
