ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

JavaScript: класс VS функция-конструктор (визуализация)

Начало в прошлом посте: JavaScript: класс VS функция-конструктор.

Итак, мы создали объект clock класса Clock двумя способами: 1) с помощью функции-конструктора Clock и 2) с помощью синтаксиса с ключевым словом class. Тексты обоих скриптов приведены в прошлом посте.

Я решил пойти несколько дальше, чем требуется по условиям задачи, и разобраться, как устроены внутри объекты, полученные первым способом и вторым способом, и чем они отличаются. Для этого я использовал консоль разработчика. По результатам этого разбора я нарисовал две схемы, которые можно увидеть ниже. На схемах отражена не полная картина хранения данных движком JavaScript, а только те элементы этой картины, которые важны в контексте нашей задачи. А именно я хотел знать, где и в каком качестве хранятся переменные timer и template, а также функции render, start и stop.

1. Схема объекта clock, полученного с помощью функции-конструктора Clock:



В данном случае функции start и stop были добавлены в сам конструируемый объект clock в качестве методов. У каждого из этих методов есть скрытое свойство [[Scopes]], указывающее на некую структуру данных Scopes, похожую на массив (английское слово «Scopes» по-русски означает «Области видимости»). Ссылки [[Scopes]] обоих методов, очевидно, указывают на одну и ту же структуру данных, потому что оба метода находятся в одной и той же области видимости и так было бы правильно из соображений экономии памяти.

В массиве Scopes есть три элемента, каждый из которых содержит отдельный объект, представляющий свою область видимости. В первом элементе (с кодом 0) массива содержится объект «Closure (Clock)», представляющий область видимости внутри функции-конструктора Clock. Английское слово «Closure» по-русски означает «Замыкание». Очевидно, что здесь речь идет про то замыкание, о котором рассказывалось в подразделе 6.3 «Замыкание» учебника. В этом самом объекте «Closure (Clock)» и хранятся вспомогательная функция render, а также переменные template и timer.

2. Схема объекта clock, полученного с помощью синтаксиса с ключевым словом class:



Тут всё выглядит гораздо проще. При создании объекта clock функции render, start и stop помещаются в качестве методов в прототип (объект-родитель) объекта clock. Оттуда они наследуются объектом clock, то есть становятся доступны программисту через объект clock.

Значение переменной-параметра template в теле метода constructor класса Clock помещается в создаваемое для этого свойство template конструируемого объекта clock. Поэтому это свойство доступно сразу же после создания объекта clock.

Свойство же timer создается в объекте clock только при вызове метода clock.start, потому что оно создается в теле этого метода.

3. Различие в работе этих объектов. При создании объекта clock вторым способом программисту доступны три метода clock.start, clock.stop и clock.render, а также два свойства clock.template и clock.timer.

При создании этого объекта первым способом программисту доступны только два метода clock.start и clock.stop, а функция render, переменная-параметр template и переменная timer — недоступны, потому что они объявлены локально внутри функции-конструктора Clock и недоступны извне.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments