Berezka7km.ru

Березка 7км
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Вызов функций и стек контекстов выполнения

Вызов функций и стек контекстов выполнения

Теперь более детально рассмотрим, что происходит с контекстом выполнения при обработке функций, как он формируется при их вызове, особенно если они вложены друг в друга, и как меняется действующее Лексическое окружение.

Рассмотрим изменение стека контекстов выполнения и соответствующих Лексических окружений на следующем примере:

Выполнение которой можно разделить на следующие этапы:

До выполнения первой строчки её кода, на стадии инициализации, JavaScript-движок помещает в поле outer значение свойства [[Environment]] , то есть null , так как в данный момент выполняется код глобальной области, у которого нет родительской области. А также создает пустой объект Записи окружения environmentRecord и сохраняет в нём имена переменных и функций, которые объявлены в данной области видимости. В данном случае туда попадает функция sayHi и единственная переменная phrase . Здесь важно отметить то, что до выполнения кода, в запись окружения не попадают никакие значения переменных, а только лишь выделяется для них место в памяти (происходит всплытие переменных и функций). Поэтому изначально их значения установятся как undefined , то есть “неопределено”.

Изначально этот код обрабатывается в рамках глобального контекста выполнения

Стек контекстов выполнения 1

Код начинает выполняться и во время выполнения var phrase = «привет!»; происходит присвоение нового значения глобальной переменной phrase (к которой можно также обратиться через window.phrase ).

Далее на строке sayHi(«Иван»); происходит вызов функции. Создаётся новый контекст выполнения, который помещается наверх стека контекстов. С каждым изменением контекста выполнения меняется и текущее/действующее Лексическое окружение. До захода в функцию, код выполнялся в рамках Глобального контекста, который указывал на Глобальное Лексическое окружение, а теперь Глобальный контекст приостановил своё выполнение и активным контекстом стал контекст выполнения функции sayHi .

Действующее Лексическое окружение изменилось. Контекст выполнения sayHi содержит в себе указатель на текущее именно для этой функции Лексическое окружение. Для него поле outer указывает на родительское окружение globalEnvironment , и опять же, еще до выполнения первой строчки этой функции, на стадии инициализации, JavaScript-движок создает соответствующий объект Записи окружения и заполняет его. В данном случае туда попадает аргумент name и единственная переменная surname , значение которое сначала будет undefined .

Стек контекстов выполнения 2

Функция sayHi начинает выполняться и во время выполнения var surname = «Петров»; происходит присвоение нового значения локальной переменной surname

JavaScript-движок сначала пытается найти необходимую переменную в записи environmentRecord текущего Лексического окружения, где будут найдены name и surname . Если необходимой переменной в Записи текущего Лексического окружения нет, как переменной phrase , то поиск продолжается во внешнем окружении. В данном случае для функции sayHi есть только одно внешнее окружение — Глобальное окружение, в котором и будет найдена переменная phrase .

Такой порядок поиска возможен благодаря тому, что ссылка на внешний объект переменных хранится в поле outer , который в свою очередь устанавливается из внутреннего свойства функции — [[Environment]] . Эти свойства закрыты от прямого доступа, но знание о них очень важно для понимания того, как работает JavaScript.

По завершению функции sayHi её контекст выполнения удаляется из стека, активным контекстом выполнения снова становится Глобальный контекст и выполнение перейдет на следующую за вызовом функции инструкцию phrase = «пока!»; . При этом объект Записи окружения удаляется, и память очищается (случаи, когда запись окружения сохраняется и после завершения функции будут рассмотрены в следующих частях курса).

Стек контекстов выполнения 3

Выполнение инструкции phrase = «пока!»; изменит значение переменной, которое в последствии и будет выведено в консоли в конце программы.

Теперь рассмотрим пример с большей вложенностью:

Для которого изменение стека контекстов выполнения и соответствующих ему лексических окружений можно показать так:

функции в JavaScript

Функции в JavaScript

Начнём с того что язык JavaScript поддерживает концепцию ООП (объектное ориентированное программирование). Это концепция состоит в том, что существуют такие элементы как объекты и у этих объектов есть различные свойства и методы(функции), которые позволяют управлять ими.

Функция — это отдельный блок кода, который состоит из одного или больше операторов. Оно имеет своё собственное(уникальное) название и может принимать различные параметры, в зависимости от которых может выполнит ту или иную операцию.

Метод — это тоже функция, но, он принадлежит уже какому-то классу или объекту.

Для того чтобы вызывать какой-то метод, необходимо сначала написать название объекта, потом через точку написать название метода. Исключением этого правила является вызов методов alert(), confirm() и prompt() объекта window. Их можно вызывать без того чтобы указать название объекта. С этими методами мы уже познакомились в этой статье Описание методов alert, confirm и prompt.

Также, в предыдущих статьях мы познакомились с методом вывода document.write(), который принадлежит объекту document.

Так вот, в программировании есть очень важная возможность, которая состоит в том, что можно создавать свои собственные функции.

Синтаксис функции выглядит таким образом:

Синтаксис функции JavaScript

Для примера создадим простую функцию, которая добавит переданный текст в абзац и выведет его. И ещё сделает его жирным и курсивным.

Читайте так же:
Для накрутки счетчика liveinternet

Сохраняем документ и открываем его в браузере.

как создать и вызвать функцию в JavaScript

Замечание! При объявлении функции, фигурные скобки должны быть обязательно, в независимости от того сколько там операторов.

Для чего нужны функции в программировании?

Основным плюсом использования функции это сокращение размера исходного кода скрипта.

Допустим, нам нужно перебрать три одномерных массивов. Как мы знаем из этой статьи: Массивы в JavaScript, массив перебирается с помощью цикла. Без функции код данного скрипта получится таким:

Так вот, для чтобы, не писать для каждого массива свой цикл, лучше использовать функцию в которой передаём массив, а она уже выведет на экран все его элементы. Таким образом мы, во-первых, сокращаем размер кода, а во-вторых избавляемся от повторяющего кода.

Параметры функции

Функция может принять любое количество параметров, от одного до бесконечности. Либо же, она может быть совсем без параметров.

Давайте создадим функцию без параметров, которая просто выведет на экран, классическую фразу ‘Hello world’.

Любой параметр функции, может иметь своё значение по умолчанию. Это значит, что если при вызове функции мы не передадим какое-то значение данному параметру, то он использует своё значение, которая задано по умолчанию.

Для примера создадим функцию, которая сложит две переданные числа. Если мы передадим только одно число, то, по умолчанию, второе число будет равна 4.

Ещё допускается чтобы внутри какой-то функции можно было бы вызывать другую существующею функцию.

Для примера, вызовем первую созданную нами функцию writeText() внутри предыдущей функции summa(). Функции writeText() передадим результат сложения чисел. В таком случае код функции summa() будет выглядеть уже так:

Функции которые возвращают какое-то значение

До сих пор мы писали функции, которые выводят результат на экран сразу.

Теперь же научимся как написать функцию, которая возвращает какой-то результат. Этот результат мы можем добавить в какую-то переменную и работать с ним дальше.

Для того чтобы лучше понять о чем идёт речь, вспомним такие методы как prompt() и confirm(). Эти методы именно возвращают значение, полученное от пользователя, а не выводят его.

Для примера создадим свою собственную функцию, которая будет возвращать последний элемент массива, переданного в качестве параметра.

В результате мы получим слово ‘twix’, так как именно это слово и есть последний элемент массива otherArr.

Метод alert() ничего не возвращает. То есть если мы попытаемся выводить переменную которая типа содержит результат вызова метода alert(), то увидим значение undefined. Это тоже самое как попытаться выводить значение пустой переменной.

Для примера возьмём результат последнего вызова alert() из предыдущего примера, помещаем его в переменную resAlert и используя созданную нами функцию writeText, попытаемся вывести полученный результат.

Как видим в обоих случаях получили значение undefined.

Глобальные и локальные переменные

Глобальные переменные — это те переменные, которые объявлены за пределами функции. То есть все те переменные, которые не объявлены внутри самой функции, являются глобальными. Они видны (действительны) во всем документе.

Локальные переменные — это те переменные, которые объявлены внутри самой функции. И они действительны только внутри данной функции. За её пределами, локальные переменные уже не будут работать.

Локальные и глобальные переменные никак не связаны между собой.

область видимости переменных javascript

В примере из изображения, если бы мы попытались выводить содержимое переменной x, то получили бы сообщение undefined, потому что мы забыли вызвать функцию other().

Поэтому, для того чтобы сработали изменения производимые внутри функции, необходимо вызывать данную функцию.

Вызываем функцию other(), и если теперь попробуем вывести значение переменной x, то в результате увидим цифру 4.

Чтобы обратиться изнутри функции к глобальной переменной, не нужно нечего делать, надо просто использовать её. Изменения, производимые с глобальными переменными, будут видны за пределами функции.

Если мы не хотим, чтобы глобальная переменная изменилась, необходимо объявить локальную переменную (можно с таким же именем, как и у глобальной) и все действия будут произведены над ней.

На этом все дорогие читатели, теперь вы знаете что такое функция, как создать свою функцию, как вызывать функцию и какие типы функции существуют. Также Вы узнали что такое глобальные и локальные переменные.

Как я написал в начале статьи функции являются очень важными элементами, поэтому вы должны знать их на отлично.

Задачи

  1. Создайте функцию, которая принимает в качестве параметров две числа и возвращает результат умножения этих чисел.
  2. Выведите полученный результат.

Похожие статьи:

  • События в JavaScript
  • Методы alert, confirm и prompt в JavaScript

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Как изучить JavaScript в 2021 — [Пошаговое руководство]

Как изучить JavaScript в 2021 - [Пошаговое руководство]

◾️ JavaScript

Вступление

JavaScript — это бесплатный язык сценариев, который работает как на стороне клиента, так и на стороне сервера. Он основан на тексте и работает вместе с HTML и CSS для улучшения функциональности кода и добавления интерактивных элементов. Короче говоря, JS может оживить скучные и статичные веб-страницы. JS интерпретируется, что означает, что код не нужно компилировать. Для огромных проектов, в которых используется много интерактивного контента, создаются отдельные файлы JavaScript с расширением .js. Однако JS также можно встроить в HTML-код с помощью тега <script>. Некоторые распространенные варианты использования JS — интерактивные карты, обновления новостей в реальном времени, проверка форм, создание целевых страниц и т. Д.

Читайте так же:
Водомерный узел это счетчик

Вот простая JS-программа:

В этом коде текст изменяется при нажатии кнопки «Щелкнуть!» из-за события JavaScript onClick!

Преимущества JavaScript

JavaScript полностью изменил взгляд мира на браузеры. Это дало возможность создавать сложные веб-сайты и делать весь бизнес-процесс цифровым! Некоторые преимущества JavaScript:

  • Высокая производительность: JS легкий и быстрый, так как его можно сразу запустить в браузере (клиентском компьютере).
  • Просто и популярно: мы используем его целую вечность, и он не потерял своей актуальности!
  • Совместимость: может использоваться с множеством других языков и приложений
  • Снижает нагрузку на сервер, поскольку работает на стороне клиента
  • Делает страницы живыми, динамичными и насыщенными
  • Он поставляется с множеством бесплатных инструментов для улучшения функциональности
  • Функциональность JS может быть расширена до серверной части с помощью Node.js

Перспективы работы

JavaScript твердо стоит на ногах, и почему бы и нет; веб-приложения — это настоящее и будущее этого меняющегося цифрового мира. Каждый день добавляются новые веб-сайты с множеством интерактивных элементов, а это значит, что разработчикам JavaScript всегда будет чем заняться. Вот почему он входит в пятерку лучших языков программирования 2020 года. Для JS-разработчиков существует около 24000 вакансий, и в среднем им платят около 118 тысяч долларов в год.

Предпосылки

Чтобы изучить JavaScript, вы должны знать основы HTML и CSS, которые чрезвычайно просты для изучения. Для практического знания JavaScript и большинства веб-проектов этих знаний будет достаточно. Для более продвинутых проектов и навыков рекомендуется знать основные концепции ООП и язык программирования на основе ООП (например, Java).

Вы можете установить IDE или использовать редакторы кода, или даже использовать блокнот или текстовую панель для написания кода JS. IDE и редакторы обеспечивают интуитивно понятный опыт программирования и более быстрые результаты, чем программирование с помощью таких редакторов, как блокнот, где вам нужно вводить все с нуля.

IDE

Хотя вы можете набирать и запускать JS-программу с помощью блокнота, IDE упрощает отладку кода и обеспечивает поддержку систем ALM (Application Lifecycle Management). Вот 3 лучших редактора IDE / исходного кода:

  • WebStorm: WebStorm обеспечивает интеллектуальную помощь и автозавершение кода, рефакторинг для CSS, TypeScript, JS. Вы можете проверить свою функциональность и устранить неполадки с помощью встроенного отладчика, ориентированного как на Node.js, так и на клиентский код. Используйте 30-дневную пробную версию, чтобы ознакомиться с продуктом, прежде чем покупать его.
  • Visual Studio Code: буквально нет языка, который не поддерживает VS Code. Это бесплатная, удобная для разработчиков кроссплатформенная среда IDE, которая предлагает такие функции, как встроенная интеграция с Git, интеллектуальное завершение кода, отладка кода из самого редактора и многое другое. Он очень расширяемый.
  • Atom: Atom — очень популярная IDE от GitHub. Он обеспечивает интеллектуальное завершение кода на основе контекста, простую навигацию по коду, полный набор диагностических инструментов для понимания и отладки кода и многие другие функции. Это бесплатно и с открытым исходным кодом, и вы можете добавить немного веселья в код, используя предустановленные темы и стили.

Онлайн-среда разработки Javascript:

AWS Cloud9 : помимо JS, AWS Cloud9 также поддерживает разработку для C, C ++, Perl, Python, Node.js и т. Д. Оно полностью написано на JS, а серверная часть находится на Node.js. Это онлайн-среда с открытым исходным кодом, и для получения доступа требуется учетная запись AWS. Некоторые функции включают подсветку синтаксиса, поддержку npm и основных команд UNIX, одновременное редактирование, анализ языка в реальном времени и настраиваемые привязки клавиш.

Как выучить JavaScript

Для изучения JavaScript доступно множество бесплатных и платных курсов и руководств. Чтобы получить более глубокие знания, вы также можете приобрести несколько хороших книг, например «Умный способ изучения JavaScript» и « Эффективный JavaScript: 68 конкретных способов использования возможностей JavaScript» . Однако, чтобы начать работу над проектами, вам понадобится лишь немного теории и больше практических навыков, поэтому мы рекомендуем вам пройти обучение и короткие курсы, которые помогут вам быстро освоиться.

Ниже приведены 5 лучших руководств по JavaScript:

Руководства по Javascript:

    : Вводный курс, который также охватывает некоторые темы экспертного уровня, начинается с основ JS, таких как переменные, циклы, управляющие операторы и современные OOPS, и продолжается с объяснения современных инструментов, таких как модули Parcel, NPM, Babel и ES6. Вы также узнаете о замыканиях, функциях высшего порядка и других сложных темах. Курс по разумной цене и предлагает 74 часа видео по запросу и пожизненный доступ к материалам. : это платный 4-месячный курс, который охватывает некоторые сложные темы, такие как веб-API, асинхронные приложения и т. Д. Чтобы пройти этот курс, вы должны обладать фундаментальными знаниями HTML, CSS, JavaScript. Вы сможете выполнять реальные проекты с должной обратной связью и наставничеством. : если вы хотите стать полнофункциональным JS-разработчиком, это правильный курс для вас. Курс обучает JS с нуля. Изучив основы, вы также узнаете об AJAX, асинхронном программировании, Fetch API, Node.js и различных способах написания JS-приложений вне браузера (например, из командной строки). Также изучаются концепции баз данных от основ SQL до использования SQL ORM с Node.js и создания простого приложения CRUD. : вы можете начать свое обучение с помощью этого бесплатного курса, начиная с нуля. Он хорошо подготовлен и охватывает даже самые мелкие концепции, которые другие курсы легко проигнорируют. Он основан на практическом подходе и охватывает множество примеров для разработчиков. Это руководство — отличный пример обучения на практике. : попробуйте этот хорошо структурированный бесплатный учебник, который начинается с нуля, прямо с настройки редакторов кода, руководств и консоли разработчика, основ JS, отладки, транспиляторов и объектно-ориентированных концепций, таких как ‘this’, ссылки, «новый» оператор и т. д. на функции, стек, рекурсии, наследование, прототип и многие другие сложные концепции. Автор приводит простые примеры, демонстрирующие каждую тему, облегчая обучение новичкам.
Читайте так же:
Сброс счетчика тонера brother dcp 1512r через меню

Бесплатные ресурсы:

Помимо платных и бесплатных руководств, упомянутых выше, вот еще несколько бесплатных ссылок на видео и блоги, которые помогут вам начать работу:

Официальная документация:

Чтобы узнать больше о встроенных значениях, свойствах, функциях и т. д. JavaScript , посетите справочную страницу для разработчиков JavaScript.

Проекты Javascript

Начать работу над проектами JavaScript несложно, так как настройка не требуется. Вариантов множество — от простого калькулятора до сложной игры с прыжками с мячом. Затем вы можете заняться другими проектами, такими как дизайн анимации, системы управления классом (для этого вам может понадобиться node.js), веб-помощники, которые помогают в парсинге и обобщении контента веб-сайта, игре на запоминание, игре в тетрис и т. д.

Сертификация

Сертификаты помогут вам повысить уверенность в себе и подать заявку на более сложные и плодотворные рабочие места. Вы также получите преимущество перед другими кандидатами с такими же навыками и опытом, если у вас есть сертификаты. Большинство сертификатов предназначены для начинающих и начинаются с общих принципов программирования, прежде чем переходить к более сложным темам, таким как проверка формы, анимация, связь с базой данных и т. д.

Вопросы на собеседовании

Теперь, когда вы достаточно уверены в себе, вам следует пойти на собеседование своей мечты. Чтобы хорошо подготовиться, ознакомьтесь с полным списком вопросов на собеседовании по JavaScript на Hackr.io, которые задаются почти во всех собеседованиях. Вот несколько важных вопросов:

Тем не менее, автономные настольные приложения могут быть построены с использованием JavaScript Electron и Node.js . Еще одно важное различие между кодом Java и JS заключается в том, что первый требует компиляции, а второй доступен в текстовом формате.

Атрибуты находятся не в DOM, а в HTML. Они похожи на свойства, но не настолько эффективны. Рекомендуется работать со свойствами, а не с атрибутами, если первые доступны. В отличие от свойства, атрибут имеет строковый тип данных.

Повышенная интерактивность — JavaScript позволяет создавать интерфейсы, которые реагируют, когда пользователь активирует их с помощью клавиатуры или просто наводит на них курсор.
Немедленная обратная связь — посетителям не нужно ждать перезагрузки страницы, чтобы увидеть, не забыли ли они ввести некоторые важные детали.
Низкое взаимодействие с сервером — JS позволяет проверять вводимые пользователем данные перед отправкой веб-страницы на сервер. Это означает меньший трафик сервера и, следовательно, меньшую нагрузку на сервер.
Богатые интерфейсы — JS имеет такие элементы, как компоненты перетаскивания и ползунки, чтобы предоставить посетителям веб-сайта более богатый интерфейс.

Определение — функция, объявленная как отдельный оператор в основном потоке кода, называется объявлением функции. Когда функция создается внутри выражения или другой синтаксической конструкции, она называется функциональным выражением.
Строгий режим — когда объявление функции находится внутри блока кода в строгом режиме, оно видно везде внутри этого блока, но не за его пределами. Это не относится к выражению функции.
Время использования — выражение функции создается, когда выполнение достигает его. Функциональное выражение можно использовать только с этого момента. С другой стороны, объявление функции можно вызвать до того, как она будет определена.
Когда использовать — объявление функции обеспечивает лучшую читаемость и большую свободу в организации кода. Функциональные выражения обычно ограничиваются использованием, когда есть необходимость в условном объявлении.

Добавление его между тегами Из внешнего файла, указанного в атрибуте src тега. Старые браузеры рассматривают этот JS-код как длинный HTML-комментарий.
Обычно JS-код скрыт от старых браузеров для решения проблем совместимости и пользовательского интерфейса. Интересно, что браузеры, поддерживающие JavaScript, будут воспринимать комментарии как однострочные.

Читайте так же:
Проверить счетчик у независимого эксперта

Использование отложенных сценариев приводит к задержке выполнения сценария при запуске анализатора HTML. Следовательно, это приводит к сокращению времени загрузки веб-страницы.

В JavaScript также доступны шесть дополнительных escape-символов:

b — Backspace
f — Подача формы
n — Новая строка
r — возврат каретки
t — горизонтальный табулятор
v — Вертикальный табулятор
Они никоим образом не выполняются в коде HTML или JS. Первоначально они были разработаны для управления факсимильными аппаратами, телетайпами и пишущими машинками.

CONST в JS делает свою работу правильно!

На собеседовании фронтедеров частенько можно услышать вопрос, в чем разница между var, let и const. А далее вопрос могут раскрутить до вопроса: а покажите, как сделать неизменяемый объект. Вопрос вполне хороший и имеет право на жизнь.

Но в сети так же периодически можно услышать фразы и увидеть статьи о том, что const в JS не работает и что не нужно его использовать. И приводится пример, наподобие этого:

Ну вообще-то да, поле объекта меняется. И должно меняться. Не меняется ссылка на значение. В данном случае ссылка на объект. Поля объекта меняются и должны меняться иначе это было бы странно. Это не бага JS! Все работает правильно.

Константа — способ адресации данных, изменение которых не предполагается или запрещается.

Для чего используется слово const в JS?

Usecase 1# Для описания констант.

Значения констант должны быть примитивы. Если вы хотите зафиксировать некоторые величины, которые не должны меняться на протяжении программы — вы описываете их как константы.

Такими величинами могут быть числа и строки. Т.е. примитивы. Есть исключения, но о них чуть позже. В JS уже есть встроенные константы. Например число Пи(Math.PI). Хотите записать тау (2PI)? Запишите:

Эти значения будут константными и неизменными. Все работает как и положено. Хотите сохранить строковые величины? Пожалуйста. Нужно записать флаг, например завести константы DEBUG? Да пожалуйста. Все ваши константы будут работать как надо:

В качестве константы нужно и правильно использовать примитивы. В некоторых языках программирования на уровне компилятора/интерпретатора не разрешено создавать константы из чего-то, кроме примитивов. Не должно быть констант объектов. Константы должны быть простыми типами — примитивами. Но есть исключения.

Исключения для const

Usecase #2. Для описания неизменяемых объектов Function

Вопрос на собеседовании: как отработает этот код?

В JS можно переопределять уже созданные функции. Это значит что вашу ранее объявленную функцию можно не просто переопределить, ее вовсе можно “прибить”. И сделать это можно даже чисто случайно. Например правите вы такой вот файл и…

Наверняка кто-то из вас сталкивался с чем-то подобным. Этот пример утрирован, но он реален и имеет место быть в практике.

Кстати, почему так произошло — отдельная тема, связанная с всплытием переменных(hoisting). Про это поговорим в ближайшее время.

Что можно было сделать? Как вариант — использовать функциональные выражения:

Писать стрелочную функцию или нет — уже дело выбора и предназначения (нужно ли будет менять контекст или нужна привязка).

В данном случае foo — это объект. И у него есть даже поля, например вы можете получить имя функции:

Попробуйте изменить эту функцию или этот объект. Не получается?

Как создать константный объект?

Продолжаем наше импровизированное собеседование.

Если уж вам все-таки ну очень приспичило создать объект-константу, то тут мы все так же используем слово const но(!) добавляем такую штуку как Object.freeze().

Метод Object.freeze() замораживает объект. Это значит, что он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости. В сущности, объект становится неизменным. Метод возвращает замороженный объект.

Видите, для заморозки объектов есть отдельный специальный механизм, который и делает наш любимый JS таким гибким. И если вы хотите создать констату-объект, то вы пишите следующий код:

Все прекрасно работает. Но создавать неизменяемый объект это прерогатива других механизмов, а не ключевого слова const.

Нужно запомнить, что слово

CONST — только для неизменяемой ссылки на ячейку памяти со значением.

И это правильная нормальная работа. И я не понимаю почему у некоторых бомбит и они пишут статьи на тему неработающего const.

И линтеры не должны вам ничего говорить и указывать, если вы указали константную ссылку на объект. Ссылка на объект и сам объект — это две разные сущности. Изменяемость объекта, как и передача его по ссылке — это вообще отдельная тема. А const делает свою работу прекрасно и правильно! И здорово что у нас есть такая гибкость, в отличие от других языков, и мы можем отдельно управлять иммутабельностью объектов и ссылок на объекты.

Читайте так же:
Счетчик осталось до сообщений

Если же продолжить собеседование, то можно уточнить про то, весь ли объект будет иммутабельным. А точнее будут ли дочерние элементы неизменяемыми?

Да, Object.freeze() не делает глубокой заморозки. Но это все решаемо. Либо пишите все на ванильном JS либо используете специализированные библиотеки.

Так как это импровизированное собеседование, то давайте решим задачу на чистом JS:

Вот так может быть реализована функция, порождающая неизменяемый объект. Да да да, много скобочек. Люблю, знаете ли, скобочки. Во мне умер lisp-программист на пару с perl программистом ?

Кстати, в ООП мире, функции, создающие новые объекты называются фабриками. Но это уже другая история и другая часть собеседования ?

Функции в javascript. Урок 3. Конструкторы

В предыдущем уроке мы разобрали, на что же ссылается this внутри функций. В этом уроке мы продолжим данную тему, но сначала поговорим об объектах.

Как известно, javascript является объектно-ориентированным языком, однако, в отличие от многих других языков, в нем нет никаких классов вообще. Как же создать объект? Первый способ — задать объект с помощью литерала. Причем, мы можем задавать имена полей с помощью любых символов:

Функции-конструкторы

Еще один способ создания объектов в javascript, приближающий его к языкам «с классами» — с помощью функций-конструкторов и оператора new:

Оператор new в языке javascript — это особый способ вызвать функцию. Любую функцию. При этом первым делом создается пустой объект (на самом деле, не совсем пустой, об этом ниже и в следующем уроке), и далее происходит применение функции-конструктора к этому созданному объекту (о применении функций можно прочитать в предыдущем уроке), то есть внутри конструктора переменная this будет ссылаться на этот объект. И в конце неявно происходит возврат этого объекта, то есть, по сути, автоматически выполняется инструкция return this.

У этого объекта также будет определено поле constructor, которое является ссылкой на функцию-конструктор, породившую его. Так можно, например, узнать имя этой функции:

Другой способ проверить, создан ли объект данным конструктором (то есть как бы принадлежит данному «классу» или «типу»), — использовать оператор instanceof:

Кстати, так же можно определять принадлежность переменных и ко встроенным типам, таким как Array, Function, Date и т.д.

При желании из конструктора можно явно вернуть любой другой объект (именно объект, возврат примитивных типов игнорируется), изначальный объект при этом исчезает:

Универсальная функция-конструктор

Функция-конструктор — это просто функция, ее можно вызвать и обычным способом без new, так же как и любую функцию можно вызвать с помощью оператора new. Другой вопрос, что может получиться полная чушь и в том, и в другом случае. Мы можем написать конструктор таким образом, чтобы он мог вызываться без new, оставаясь при этом полноценным конструктором. Для этого нужно сначала проверить, является ли this объектом, созданным нашим конструктором, если нет — вызвать себя же через new и вернуть получившийся объект:

«Пространства имен»

А что, если конструктор является при этом методом какого-то объекта и вызывается через new, но именно как метод этого объекта? На что тогда ссылается this внутри конструктора? Тут не надо излишне усложнять — this при вызове через new всегда ссылается на вновь созданный объект, и неважно, где у нас находится функция-конструктор. Это довольно распространенная практика — размещать конструкторы в полях объектов, эмулируя тем самым пространства имен, которых нет в javascript, это помогает не захламлять глобальный контекст кучей конструкторов. Вот пример:

Публичные и защищенные поля и методы

В javascript нет такого понятия, как защищенные поля и методы, все они являются публичными, доступными извне объекта. Но все же есть способ сделать защищенные переменные и функции, доступные только методам самого объекта: на помощь приходит замыкание, созданное внутри конструктора, но при этом методы объекта, которые хотят получить доступ к этим защищенным сущностям, должны быть заданы также внутри конструктора. Рассмотрим сначала случай защищенных переменных:

Присвоение содержимого аргумента text локальной переменной protectedText, по сути, лишнее действие, поскольку text сама является локальной переменной и доступна в созданном замыкании.

В случае защищенных методов есть одна небольшая тонкость. На самом деле это не методы, а просто локальные функции, определенные в контексте конструктора и сохраненные в замыкании. Публичные методы, которые хотят иметь доступ к защищенным, опять же, должны быть заданы в конструкторе. Но проблема возникает, когда публичный метод вызовет защищенную функцию, просто как функцию, а ей будет необходимо получить доступ к полям или методам нашего объекта. Загвоздка в том, что если вызвать функцию в лоб, то this внутри нее будет ссылаться на глобальный объект, а не на текущий. Вот немного надуманный пример:

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector