Объекты

Javascript прототипы (Prototype) встроенных объектов

Добавление свойств и методов к встроенным объектам (прототип)


Рассмотрим работу с прототипами на примере:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*  Изменение прототипа */
// Добавление свойства по умолчанию  к  встроенному объекту
String.prototype.color = "black";
// Добавление  (изменение) метода  к встроенному объекту
String.prototype.write = stringWrite;
function stringWrite(){
	document.write('<span style="color:' + this.color + '">');
	document.write(this.toString());
	document.write('</span>');
}
// используем измененный класс
var s = new String("Это строка");
s.color = "red";
s.write();

Важно: К объекту Math нельзя добавлять свойства и методы

Задание js 6_4. Дополните код программы для выполнения задания: К встроенному классу добавить метод , который выводит слово «Ура!» как заголовок (тег ), указанного пользователем уровня (). Уровень заголовка (1, 2 … 6) можно добавить в виде свойства класса . Вспомним, как должны выглядеть теги заголовков в HTML:

<h1>Заголовок<h1>
<h2>...<h2>
...

Дополните код:

1
2
3
4
5
6
7
8
String.prototype.uroven="1";
...
function printZagolovok (){
...
...
}
var s=new ...;
...

Резюме: сравним еще раз два варианта использования пользовательских объектов в JavaScript:

  1. Создание объектов-коллекций
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var myBook=new Object();
myBook.title="книга";
myBook.price="200";
 
alert(myBook"title"); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
 
function myBookShow()
{
	for (var i in myBook)
	{
		document.write(i+": "+myBooki+"<br>"); // Перебор свойств
	}
}
myBook.show=myBookShow;
myBook.show();

Создание классов-конструкторов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myBook(title,price){
//  определение свойств
this.title = title;
this.price = price;
// определение метода
this.show = show;
	function show()
	{
			document.write("Название: " + this.title);
			document.write("Цена: " + this.price);
	}
}
var book = new myBook("Книга", 200);
book.show();

Задание js 6_5

Создать объект-коллекцию , который содержит сведения о сотруднике некоторой фирмы, такие как , , , и отображает данные об этом сотруднике (создать метод объекта для отображения данных)

Важно: Для объекта-коллекции невозможно создавать экземпляры. Свойства и методы создаются один раз для одного объекта

Задание js 6_6

Создать меню из пунктов-гиперссылок:

  • Определить класс .
  • Определить свойства: (название пункта меню или текст гиперссылки), (значение атрибута href для гиперссылки), метод (вывод на экран созданного меню).
  • Добавить 4 пункта меню в виде списка (тег )

Вспомним код html для создания пунктов меню:

<li><a href="labs-org.ru">Перейти на главную страницу<a><li>
<li> ... <li>
<li> ... <li>

*Сложное: количество пунктов меню, их названия и url необходимо запрашивать у пользователя

Совет: для вывода в методе строки на экран воспользуйтесь методом

DOM (Document Object Model)

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице.

Например:

Мы использовали в примере только , но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации:

DOM Living Standard на https://dom.spec.whatwg.org

DOM – не только для браузеров

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

Например, серверные скрипты, которые загружают и обрабатывают HTML-страницы, также могут использовать DOM. При этом они могут поддерживать спецификацию не полностью.

CSSOM для стилей


Правила стилей CSS структурированы иначе чем HTML. Для них есть отдельная спецификация CSSOM, которая объясняет, как стили должны представляться в виде объектов, как их читать и писать.

CSSOM используется вместе с DOM при изменении стилей документа. В реальности CSSOM требуется редко, обычно правила CSS статичны. Мы редко добавляем/удаляем стили из JavaScript, но и это возможно.

Заимствование у прототипов

В главе мы говорили о заимствовании методов.

Это когда мы берём метод из одного объекта и копируем его в другой.

Некоторые методы встроенных прототипов часто одалживают.

Например, если мы создаём объект, похожий на массив (псевдомассив), мы можем скопировать некоторые методы из в этот объект.

Пример:

Это работает, потому что для внутреннего алгоритма встроенного метода важны только корректность индексов и свойство , он не проверяет, является ли объект на самом деле массивом. И многие встроенные методы работают так же.

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

Но это будет невозможно, если уже наследует от другого объекта. Помните, мы можем наследовать только от одного объекта одновременно.

Заимствование методов – гибкий способ, позволяющий смешивать функциональность разных объектов по необходимости.

Замкнутые функции (IIFE) при работе с объектами

IIFE (Immediately Invoked Function Expression) — такая функция выполнится сразу после ее определения.

Синтаксис:

(function () {
    операторы
})();

Состоит из двух частей. Первая часть — это непосредственно сама анонимная функции:

(function () {
    операторы
})();

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

(function () {
    операторы
})();

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

Рассмотрим использование так называемых замкнутых функций при работе с объектом на конкретном примере.


Пример: Создать основной рабочий файл () и подключить к нему два файла со скриптами ( и ).

1. В первом файле со скриптом создать замкнутую функцию, выводящую в консоль фразу ‘Привет, Иван‘. Для этого:

Создать пустой объект . Добавить к объекту свойство со значением ‘Иван‘. Добавить к объекту метод , выводящий в консоль сообщение ‘Привет, Иван‘.

  2. Во втором файле со скриптом создать замкнутую функцию, выводящую в консоль фразу ‘Здравствуйте, Мария‘.

Создать пустой объект и добавить аналогичные свойства и методы для вывода сообщения ‘Здравствуйте, Мария‘.

  3. Откройте в браузере консоль (браузер Chrome -> F12) и посмотрите на результат во вкладке Console.

Решение:

  • код index.html:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Замкнутые функции<title>
  <script src="script1.js"><script>
  <script src="script2.js"><script>
  <script>
	IvanGreeter.sayHello();
	MarieGreeter.sayHello();
  <script>
<head>
<body>
  <h1>Замкнутые функции<h1>
<body>
<html>

код script1.js:

(function (window){ // замкнутая функция
		var IvanGreeter = {}; // создание пустого объекта
		IvanGreeter.name = "Иван"; // свойство
		var greeting = "Привет, ";
		IvanGreeter.sayHello = function () { // метод
		  console.log(greeting + " " + IvanGreeter.name);
	}
	window.IvanGreeter = IvanGreeter;
})(window);

код script2.js:

(function (window){
		var MarieGreeter = {};
		MarieGreeter.name = "Мария";
		var greeting = "Здравствуйте, ";
		MarieGreeter.sayHello = function () {
		  console.log(greeting + " " + MarieGreeter.name);
	}
	window.MarieGreeter = MarieGreeter;
})(window);

Задание js 6_7. Используя цикл, рассмотреть массив имен и выдать в консоль (или на экран) «Привет, !» или «Пока, !» в зависимости от того, с какой буквы начинается имя. Если имя начинается с буквы «и» или «И», то выводить «Пока, !», в остальных случаях — «Привет, !».    Для выполнения необходимо скачать четыре файла, три из которых — файлы со скриптами и четвертый — главный запускаемый файл (скачать файлы: правой кнопкой мыши — Сохранить ссылку как…). В каждом из файлов предоставлены подробные комментарии по выполнению общей программы. Следуйте комментариям и выполняйте каждый пункт последовательно.index.html,Hello.js,GoodBye.js,script.js

JavaScript объекты

В javaScript существует несколько видов объектов:

  • встроенные объекты
  • объекты браузера
  • объекты, которые программист создает самостоятельно (пользовательские)

Встроенные объекты — это предопределенные объекты , , … Большинство из которых уже были рассмотрены в предыдущих уроках.

Об объектах браузера в javaScript речь пойдет в дальнейших уроках.

А сейчас время познакомиться с пользовательскими объектами в javaScript.

  • Object(объекты)
  • Number (обработка чисел)
  • String (обработка строк)
  • Array (массивы)
  • Math (математические формулы, функции и константы)
  • Date (работа с датами и временем)
  • RegExp
  • Global (его свойства Infinity, NaN, undefined)
  • Function

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

Функции-конструкторы являются обычными функциями. Но есть два соглашения:

  1. Имя функции-конструктора должно начинаться с большой буквы.
  2. Функция-конструктор должна вызываться при помощи оператора .

Например:

Когда функция вызывается как , происходит следующее:

  1. Создаётся новый пустой объект, и он присваивается .
  2. Выполняется код функции. Обычно он модифицирует , добавляет туда новые свойства.
  3. Возвращается значение .

Другими словами, вызов делает примерно вот что:

То есть, результат вызова – это тот же объект, что и:

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

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


new function() { … }

Если в нашем коде большое количество строк, создающих один сложный объект, мы можем обернуть их в функцию-конструктор следующим образом:

Такой конструктор не может быть вызван дважды, так как он нигде не сохраняется, просто создаётся и тут же вызывается. Таким образом, такой метод создания позволяет инкапсулировать код, который создаёт отдельный объект, но без возможности его повторного использования.

Итого

  • В логическом контексте объект – всегда .
  • При строковом преобразовании объекта используется его метод . Он должен возвращать примитивное значение, причём не обязательно именно строку.
  • Для численного преобразования используется метод , который также может возвратить любое примитивное значение. У большинства объектов не работает (возвращает сам объект и потому игнорируется), при этом для численного преобразования используется .

Полный алгоритм преобразований есть в спецификации ECMAScript, смотрите пункты , , а также и .

Заметим, для полноты картины, что некоторые тесты знаний в интернет предлагают вопросы типа:

Если вы запустите эти выражения в консоли, то результат может показаться странным. Подвох здесь в том, что если фигурные скобки идут не в выражении, а в основном потоке кода, то JavaScript считает, что это не объект, а «блок кода» (как , , но без оператора просто группировка команд вместе используется редко).

Вот блок кода с командой:

А если команду изъять, то будет пустой блок , который ничего не делает. Два примера выше как раз содержат пустой блок в начале, который ничего не делает. Иначе говоря:

То есть, такие вопросы – не на преобразование типов, а на понимание, что если находится вне выражений, то это не объект, а блок.

Итого

Функции – это объекты.

Их свойства:

  • – имя функции. Обычно берётся из объявления функции, но если там нет – JavaScript пытается понять его из контекста.
  • – количество аргументов в объявлении функции. Троеточие («остаточные параметры») не считается.

Если функция объявлена как Function Expression (вне основного потока кода) и имеет имя, тогда это называется Named Function Expression (Именованным Функциональным Выражением). Это имя может быть использовано для ссылки на себя же, для рекурсивных вызовов и т.п.

Также функции могут содержать дополнительные свойства. Многие известные JavaScript-библиотеки искусно используют эту возможность.

Они создают «основную» функцию и добавляют множество «вспомогательных» функций внутрь первой. Например, библиотека jQuery создаёт функцию с именем . Библиотека lodash создаёт функцию , а потом добавляет в неё , и другие свойства (чтобы узнать о ней побольше см. документацию). Они делают это, чтобы уменьшить засорение глобального пространства имён посредством того, что одна библиотека предоставляет только одну глобальную переменную, уменьшая вероятность конфликта имён.

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


С этим читают