0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Приложения на JavaScript во время своей работы создают и удаляют множество объектов. Иногда эти объекты совсем разные, а иногда они относятся к одному понятию, но отличаются данными. Когда речь идет про понятия предметной области (или, как говорят, сущности), то важно иметь абстракцию, которая скроет от нас структуру этого объекта.</p>
1
<p>Приложения на JavaScript во время своей работы создают и удаляют множество объектов. Иногда эти объекты совсем разные, а иногда они относятся к одному понятию, но отличаются данными. Когда речь идет про понятия предметной области (или, как говорят, сущности), то важно иметь абстракцию, которая скроет от нас структуру этого объекта.</p>
2
<p>Возьмем понятие "компания" и построим абстракцию вокруг него без использования инкапсуляции:</p>
2
<p>Возьмем понятие "компания" и построим абстракцию вокруг него без использования инкапсуляции:</p>
3
<p>Теперь использование:</p>
3
<p>Теперь использование:</p>
4
<p>Такая абстракция упрощает работу с компаниями (особенно при изменениях структуры), прячет детали реализации и делает код более "человечным". Попробуем сделать то же самое, используя инкапсуляцию:</p>
4
<p>Такая абстракция упрощает работу с компаниями (особенно при изменениях структуры), прячет детали реализации и делает код более "человечным". Попробуем сделать то же самое, используя инкапсуляцию:</p>
5
<p>И использование:</p>
5
<p>И использование:</p>
6
<p>Здесь мы видим несколько удобных моментов по сравнению с вариантом на функциях:</p>
6
<p>Здесь мы видим несколько удобных моментов по сравнению с вариантом на функциях:</p>
7
<ul><li>Нам больше не надо импортировать getName, он уже содержится внутри компании.</li>
7
<ul><li>Нам больше не надо импортировать getName, он уже содержится внутри компании.</li>
8
<li>Можно пользоваться автодополнением кода (среда разработки сама подскажет все свойства и методы, существующие в company).</li>
8
<li>Можно пользоваться автодополнением кода (среда разработки сама подскажет все свойства и методы, существующие в company).</li>
9
</ul><p>Но вместе с плюсами пришли и минусы. Посмотрите еще раз внимательно на код конструктора. Каждый его вызов возвращает новый объект и это ожидаемое поведение, но чего мы точно не хотим, так это создания методов на каждый вызов конструктора (а они будут создаваться при каждом создании объекта). Методы, в отличие от обычных данных, не меняются. Нет никакого смысла создавать их на каждый вызов заново, расходуя память и процессорное время.</p>
9
</ul><p>Но вместе с плюсами пришли и минусы. Посмотрите еще раз внимательно на код конструктора. Каждый его вызов возвращает новый объект и это ожидаемое поведение, но чего мы точно не хотим, так это создания методов на каждый вызов конструктора (а они будут создаваться при каждом создании объекта). Методы, в отличие от обычных данных, не меняются. Нет никакого смысла создавать их на каждый вызов заново, расходуя память и процессорное время.</p>
10
<p>Перепишем наш пример, избежав постоянного создания методов:</p>
10
<p>Перепишем наш пример, избежав постоянного создания методов:</p>
11
<h2>Оператор new</h2>
11
<h2>Оператор new</h2>
12
<p>Все описанные выше способы создания объектов имеют право на существование и используются в реальной жизни, но в JavaScript есть встроенная поддержка генерации объектов. Перепишем наш пример с помощью функции-конструктора.</p>
12
<p>Все описанные выше способы создания объектов имеют право на существование и используются в реальной жизни, но в JavaScript есть встроенная поддержка генерации объектов. Перепишем наш пример с помощью функции-конструктора.</p>
13
<p>Теперь использование:</p>
13
<p>Теперь использование:</p>
14
<p>Самое интересное в этом примере - оператор new (как и многое в js, он работает не так, как new в других языках). Фактически он создает объект, устанавливает его как контекст во время вызова конструктора (в данном случае Company) и возвращает созданный объект. Именно поэтому сам конструктор ничего не возвращает (хотя может, но это другой разговор), а внутри константы company оказывается нужный нам объект.</p>
14
<p>Самое интересное в этом примере - оператор new (как и многое в js, он работает не так, как new в других языках). Фактически он создает объект, устанавливает его как контекст во время вызова конструктора (в данном случае Company) и возвращает созданный объект. Именно поэтому сам конструктор ничего не возвращает (хотя может, но это другой разговор), а внутри константы company оказывается нужный нам объект.</p>
15
<p>Визуально этот способ выглядит не лучше, чем предыдущее ручное создание, но он задействует еще один важный механизм в JavaScript - прототипы (Подробнее о них в следующем уроке).</p>
15
<p>Визуально этот способ выглядит не лучше, чем предыдущее ручное создание, но он задействует еще один важный механизм в JavaScript - прототипы (Подробнее о них в следующем уроке).</p>
16
<p>Все типы данных в JavaScript, которые могут быть представлены объектами (или являются объектами внутри себя, например, функции), имеют встроенные конструкторы. Иногда они заменяют специальный синтаксис создания данных (как в случае с массивами), а иногда это единственный способ создать данные этого типа (как в случае с датами):</p>
16
<p>Все типы данных в JavaScript, которые могут быть представлены объектами (или являются объектами внутри себя, например, функции), имеют встроенные конструкторы. Иногда они заменяют специальный синтаксис создания данных (как в случае с массивами), а иногда это единственный способ создать данные этого типа (как в случае с датами):</p>
17
<p>Но не все функции могут быть конструкторами. Отсутствие своего контекста делает невозможным использование оператора new вместе со стрелочными функциями:</p>
17
<p>Но не все функции могут быть конструкторами. Отсутствие своего контекста делает невозможным использование оператора new вместе со стрелочными функциями:</p>
18
18