От автора: эта серия представляет подробный разбор исходного кода Vue.js, чтобы проиллюстрировать основные концепции JavaScript. Мы постараемся рассмотреть концепции настолько детально, что бы их смогли понять даже новички в JavaScript. Начнем с того, что представляет собой конструктор объекта.
Функция конструктора объектов Vue
Экземпляр Vue является наиболее логичной темой для начала рассмотрения исходного кода Vue.js. Как поясняет руководство Vue.js: «Каждое приложение Vue начинается с создания нового экземпляра Vue с помощью функции Vue». В исходном коде Vue.js новые экземпляры Vue создаются с использованием функции конструктора объектов Vue:
|
1 2 3 4 5 6 7 8 |
function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._init(options); } |
Функция конструктора объектов является образцом для создания других объектов. Согласно конвенции функции конструктора объектов обычно начинаются с заглавной буквы:
|
1 2 3 |
function Vue (options) { [. . . .] } |
Мы вызываете функцию конструктора объектов с ключевым словом new. Например, вы можете вызвать функцию конструктора Vue следующим образом:
|
1 2 3 |
var vm = new Vue({ // параметры }) |
Вызов функции конструктора объектов возвращает новый объект и устанавливает ключевое слово this для возвращаемого объекта. Функция конструктора объектов Vue принимает один параметр: options.
|
1 2 3 |
function Vue (options) { [. . . .] } |
Функция конструктора объектов Vue проверяет, является ли текущая среда не производственной средой с использованием оператора if:
|
1 2 3 4 5 6 7 |
[....] if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } [....] |
Если текущая среда является производственной средой, короткая схема && дает false, а остальная часть выражения не оценивается. Если вы находитесь в среде разработки, функция конструктора объекта проверяет, не является ли this instanceof Vue.
|
1 2 3 4 5 6 7 |
[....] if (process.env.NODE_ENV !== ‘production’ && !(this instanceof Vue) ) { warn(‘Vue is a constructor and should be called with the `new` keyword’); } [....] |
Если вы находитесь в среде разработки, и this не instanceof Vue, функция конструктора объектов вызывает функцию warn и передает строку в качестве параметра, информирующего разработчика о том, что Vue следует вызывать как конструктор функции с ключевым словом new:
|
1 2 3 4 5 6 7 |
[....] if (process.env.NODE_ENV !== ‘production’ && !(this instanceof Vue) ) { warn(‘Vue is a constructor and should be called with the `new` keyword’); } [....] |
Мы рассмотрим детали реализации функции warn в другой статье. Если вы были внимательны, то должны были заметить использование одинарных кавычек и тиковых кавычек, передаваемых функции warn:
|
1 |
warn('Vue is a constructor and should be called with the `new` keyword'); |
Использование тиковых кавычек внутри одиночных кавычек имеет очевидную выгоду предотвращения преждевременного закрытия кавычек. Наконец, конструктор функции Vue вызывает метод this._init и передает любые параметры, переданные в качестве параметров во время вызова функции конструктора объекта:
|
1 2 3 4 |
function Vue (options) { [....] this._init(options); } |
Но подождите секунду. Где находится метод ._init, определенный для объект this? Как мы видели, он не определен в вызове функции конструктора объекта. Быстрый поиск по исходному кода показывает, что метод ._init добавлен в Vue.prototype в отдельной функции с именем initMixin.
Мы рассмотрим initMixin в следующий раз. Если вам нравится серия и вы хотите мотивировать меня продолжать работать, хлопайте, следите, комментируйте или делитесь ссылками на статьи.
Источник: //medium.com/
Редакция: Команда webformyself.
