Глава 7 Работа с Объектами

JavaScript разработан на основе простой объектной парадигмы. Объект это конструкция со свойствами, которые являются переменными JavaScript или другими объектами. Объект также может иметь ассоциированные с ним функции, которые известны как methods\методы объекта. Помимо предопределённых серверных и клиентских объектов Navigator'а, можно создавать пользовательские объекты.

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

В главе имеются следующие разделы:

• Объекты и свойства
• Создание новых объектов
• Предопределённые объекты ядра

Объект в JavaScript имеет ассоциированные с ним свойства. Вы получаете доступ к этим свойствам объектов с помощью простой нотации:

И имя объекта, и имя свойства чувствительны к регистру символов. Вы определяете свойство, присваивая ему значение. Например, имеется объект myCar (для упрощения будем всё время предполагать, что объект уже существует). Вы можете создать его свойства make , model и year :

Массив это упорядоченный набор значений, ассоциированных с одним именем переменной. Свойства и массивы в JavaScript тесно связаны; фактически это два разных интерфейса для одной структуры данных. Так, например, Вы можете получить доступ к свойствам объекта myCar так:

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

Так, вызов функции show_props(myCar, "myCar") возвратит:

В JavaScript имеются предопределённые объекты. Кроме того, Вы можете создавать Ваши собственные объекты. В JavaScript 1.2 Вы можете создавать объект с использованием инициализатора объекта. Альтернативно, Вы можете сначала создать функцию-конструктор, а затем инстанциировать объект с использованием этой функции и операции new .

Помимо создания объектов с использованием функции-конструктора, Вы можете создавать объекты с использованием инициализатора объекта. Использование инициализаторов объектов иногда называют созданием объектов с помощью литеральной нотации. "Инициализатор объекта" составлен в терминологии C++.

Синтаксис объекта, использующего инициализатор объекта, таков:

где objectName это имя нового объекта, каждое property I это идентификатор (имя, число или строковой литерал), а каждое value I это выражение, значение которого присваивается свойству property I . objectName и присвоение не обязательны. Если Вам не нужно ссылаться на данный объект, Вы можете не присваивать его переменной.

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

Этот оператор создаёт объект и присваивает его переменной x , если, и только если, выражение cond - true.

Следующий пример создаёт myHonda с тремя свойствами. Заметьте, что свойство engine является также объектом со своими собственными свойствами.

Вы можете также использовать инициализаторы объектов для создания массивов. См. "Литералы Массива" .

JavaScript 1.1 и предыдущие версии. Вы не можете использовать инициализаторы объектов. Вы можете создавать объекты только путём использования функций-конструкторов или функцией, предоставляемой другим объектом для этой цели. См. "Использование Функции-Конструктора" .

Альтернативно можно создавать объект в два этапа:

1. Определить тип объекта, написав функцию-конструктор.
2. Создать экземпляр объекта с помощью операции new .

Для того чтобы определить тип объекта, создайте функцию для типа объекта, которая специфицирует имя, свойства и методы. Например, Вы хотите создать тип объекта для автомобилей/cars. Вы называете тип объекта car и хотите, чтобы у него были свойства make, model, year и color. Для реализации этого Вы должны написать следующую функцию:

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

Теперь Вы можете создать объект mycar :

Этот оператор создаёт объект mycar и присваивает специфицированные значения его свойствам. Тогда значением mycar.make будет строка "Eagle", mycar.year это целое число 1993 и так далее.

Вы можете создать любое количество объектов car через вызов new . Например,

Объект может иметь свойство, которое само является объектом. Например, Вы определяете объект person :

и инстанциируете два новых person -объекта:

Затем Вы можете переписать определение car и включить в него свойство owner , которое принимает person -объект:

Теперь можно инстанциировать новые объекты:

Обратите внимание, что вместо передачи литеральной строки или целочисленного значения при создании новых объектов, эти операторы передают объекты rand и ken как аргументы для owner. Затем, если Вы хотите вычислить имя владельца автомобиля car2, Вы можете получить доступ к следующему свойству:

Заметьте, что Вы всегда можете добавить свойство к ранее определённому объекту. Например, оператор

добавляет свойство color объекту car1 и присваивает ему значение "black." Однако это не влияет на все другие объекты. Для добавления свойства всем объектам данного типа Вы должны добавить свойство в определение типа объекта car .

В JavaScript 1.0 Вы можете обратиться к свойствам объекта по имени или по индексу. В JavaScript 1.1 или позднее, однако, если Вы первоначально определили свойство по имени, Вы обязаны всегда обращаться к нему по имени и, если Вы первоначально определили свойство по индексу, Вы обязаны всегда обращаться к нему по индексу.

Это применяется при создании объекта и его свойств функцией-конструктором, как в предыдущем примере с типом объектов сar , и при определении индивидуальных свойств явным образом (например, myCar.color = "red" ). Так, если Вы определяет первоначально свойства объекта индексированием, как myCar[5] = "25 mpg" , Вы в дальнейшем обращаетесь к свойству myCar[5] .

Исключением из этого правила является объект, отражённый из HTML, такой как массив forms . Вы можете всегда обратиться к объектам в этих массивах по порядковому номеру (в зависимости от места в документе) или по именам (если определены). Например, если второй тэг <FORM> в документе имеет в атрибуте NAME значение "myForm", Вы можете обратиться к форме document.forms[1] or document.forms["myForm"] или document.myForm .

Вы можете добавить свойство к ранее определённому типу объектов, используя свойство prototype . Оно определяет свойство, которое используется всеми объектами специфицированного типа, а не только одним экземпляром объекта. Следующий код добавляет свойство color всем объектам типа car и присваивает значение свойства color объекту car1 .

См. свойство prototype объекта Function в книге Клиентский JavaScript. Справочник.

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

где object это существующий объект, methodname это имя, присвоенное Вами методу, а function_name это имя функции.

Вы можете затем вызвать метод в контексте объекта:

Вы можете определить методы для типа объектов, включив определение метода в функцию-конструктор. Например, Вы могли бы определить функцию форматирования и отображения свойств ранее определённых объектов car ; например,

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

Вы можете сделать эту функцию методом объектов типа car , добавив оператор

к определению типа объектов. Так, полное определение car теперь будет выглядеть:

Затем можно вызвать метод displayCar для каждого объекта:

Это даст вывод показанный на рисунке.

В JavaScript имеется специальное слово this , которое можно использовать в методе для обращения к текущему объекту. Например, у Вас имеются: функция validate для проверки свойства value объекта, объект и значения high и low:

Затем Вы можете вызывать validate в обработчике события onChange каждого элемента формы, используя this для передачи ему элемента формы, как в следующем примере:

В общем случае, this ссылается в методе на вызывающий объект.

При сочетании со свойством form , this может ссылаться на родительскую форму текущего объекта. В следующем примере, форма myForm содержит Text -объект и кнопку. Когда пользователь нажимает кнопку, в значение Text -объекта устанавливается имя формы. Обработчик onClick кнопки использует this.form для обращения к родительской форме, myForm .

Вы можете удалить объект оператором delete . Следующий код показывает, как удалить объект.

JavaScript 1.1. Вы можете удалить объект, установив ссылку на объекта в null (если это последняя ссылка на объект). JavaScript "финализирует" объект немедленно, как часть операции присвоения.

JavaScript 1.0. Вы не можете удалять объекты - они существуют, пока Вы не выйдете со страницы.

В этом разделе рассматриваются предопределённые объекты ядра JavaScript: Array , Boolean , Date , Function , Math , Number , RegExp и String . Предопределённые клиентские объекты рассматриваются в Главе 11, "Использование Объектов Navigator'а" .

В JavaScript нет типа данных array (массив). Однако Вы может использовать предопределённый объект Array и его методы для работы с массивами в Ваших приложениях. Объект Array имеет методы для работы с массивами: объединения, разворачивания и сортировки. Он имеет свойство для определения размера массива и другие свойства для использования с регулярными выражениями.

Массив это упорядоченный набор значений, к которым Вы обращаетесь по индексу или по имени. Например, у Вас имеется массив emp , в котором содержатся имена служащих, индексированные числом. Так, emp[1] это служащий номер 1, emp[2] - служащий номер 2 и так далее.

Создание Array -объекта:

arrayObjectName это либо имя нового объекта, либо свойство существующего объекта. При использовании свойств и методов объекта Array , arrayObjectName это либо имя существующего Array -объекта, либо свойство существующего объекта.

element0, element1, . element N это список значений для элементов массива. Если специфицирована эта форма, массив инициализируется специфицированными значениями в качестве его элементов, а в свойство length массива устанавливается количество аргументов.

arrayLength это начальный размер массива. Следующий код создаёт массив из 5 элементов:

Литералы массива также являются Array -объектами; например, следующий литерал является Array -объектом.

Вы можете наполнить массив, присвоив значения его элементам. Например,

Вы может наполнить массив также при его создании:

Вы обращаетесь к элементам массива по порядковому номеру элемента. Например, Вы определили следующий массив:

Затем Вы обращаетесь к первому элементу массива myArray[0] , а ко второму элементу - myArray[1] .

Индексы массива начинаются от 0, но размер массива (например, myArray.length ) отражает реальное количество элементов массива.

Объект Array имеет следующие методы:

• concat объединяет два массива и возвращает новый массив.
• join объединяет все элементы массива в строку.
• pop удаляет последний элемент массива и возвращает этот элемент.
• push добавляет один или более элементов в конец массива и возвращает этот добавленный элемент.
• reverse разворачивает элементы массива: первый элемент становится последним, а последний - первым.
• shift удаляет первый элемент массива и возвращает этот элемент.
• slice извлекает раздел массива возвращает новый массив.
• splice добавляет и/или удаляет элементы массива.
• sort сортирует элементы массива.
• unshift прибавляет один или более элементов в начало массива и возвращает новый размер массива.

Например, Вы определили массив:

myArray.join() возвращает "Wind,Rain,Fire"; myArray.reverse разворачивает массив; myArray[0] становится "Fire", myArray[1] - "Rain", а myArray[2] - "Wind". myArray.sort сортирует массив; myArray[0] становится "Fire", myArray[1] - "Rain", а myArray[2] - "Wind".

Следующий код создаёт двухмерный массив:

Следующий код выводит массив:

Если массив является результатом совпадения регулярного выражения и строки , этот массив возвращает свойства и элементы, которые предоставляют информацию о совпадении. Массив является тогда return-значением regexp.exec , string.match и string.replace . Об использовании массивов с регулярными выражениями см. Главу 4 "Регулярные Выражения" .

Объект Boolean является оболочкой вокруг примитивного типа данных Boolean. Используйте следующий синтаксис для создания Boolean -объекта:

Не путайте примитивные Boolean-значения true и false со значениями true и false объекта Boolean . Любой объект, значение которого не undefined или null , и не объект Boolean со значением false, вычисляется в true, когда передаётся в условный оператор. См. "Оператор if. else" .

В JavaScript нет типа данных data. Однако можно использовать объект Date и его методы для работы с датами и временем. Объект Date имеет большое количество методов для установки, получения и обслуживания дат.Он не имеет свойств.

JavaScript обрабатывает даты аналогично Java. Эти два языка имеют много одинаковых методов для дат и хранят даты как количество миллисекунд относительно 1 января 1970 года, 00:00:00.

Диапазон объекта Date от -100,000,000 до 100,000,000 дней относительно 01 January, 1970 UTC.

Для создания Date -объекта:

где dateObjectName это имя создаваемого Date -объект; это может быть новый объект или свойство существующего объекта.

Значение parameters может быть одним из:

• Ничем: создаётся текущая дата и время. Например, today = new Date() .
• Строкой, представляющей дату в следующей форме: "Month day, year hours:minutes:seconds". Например, Xmas95 = new Date("December 25, 1995 13:30:00") . Если Вы опустите hours, minutes или seconds, значение будет установлено в 0.
• Набором целочисленных значений для year, month и day. Например, Xmas95 = new Date(1995,11,25) . Набором целочисленных значений для year, month, day, hour, minute и seconds. Например, Xmas95 = new Date(1995,11,25,9,30,0) .

JavaScript 1.2 и предыдущие версии. Объект Date работает так:

• Даты до 1970 не допускаются.
• JavaScript зависит от платформы, на которой используется; поведение объекта Date варьируется от платформы к платформе.

Методы объекта Date для работы с датами и временем распадаются на следующие обширные категории:

• "set"-методы для установки значений объектов Date .
• "get"-методы для получения значений даты и времени из объектов Date .
• "to"-методы для возвращения строковых значений из объектов Date .
• parse и UTC-методы для разбора Date -строк.

Методами "get" и "set" Вы можете получать и устанавливать значения для секунд, минут, часа, дня недели, числа месяца, месяца и года. Имеется метод getDay , который возвращает день недели, но нет па́рного метода setDay , поскольку день недели устанавливается автоматически. Эти методы используют целые числа для представления этих значений:

• Секунды и минуты: от 0 до 59
• Час: от 0 до 23
• День недели: от 0 (Sunday) до 6 (Saturday)
• Число месяца: от 1 до 31
• Месяц: от 0 (January) до 11 (December)
• Год: годы после 1900

Например, Вы определили дату:

Тогда Xmas95.getMonth() возвращает 11, а Xmas95.getFullYear() возвращает 95.

Методы getTime и setTime используются для сравнения дат. Метод getTime возвращает количество миллисекунд, прошедших после January 1, 1970, 00:00:00 для Date -объекта.

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

Этот пример создаёт Date -объект today , который содержит текущую дату. Затем создаётся Date -объект endYear в него устанавливается значение текущего года. Далее, с использованием количества миллисекунд в сутки, вычисляется количество дней между текущей датой и endYear , с использованием getTime , которое затем округляется до целого количества суток.

Метод parse используется для присвоения значений из строк с датой существующим Date -объектам. Например, следующий код использует parse и setTime для присвоения значения даты объекту IPOdate :

В следующем примере функция JSClock() возвращает время в формате цифровых часов.

Функция JSClock сначала создаёт новый Date -объект time ; поскольку аргументы не заданы, объект создаётся с текущей датой и временем. Затем методы getHours , getMinutes и getSeconds присваивают значения текущих часа, минут и секунд переменным hour , minute и second .

Следующие четыре оператора строят строковое значение на основе этого времени.

Первый оператор создаёт переменную temp , присваивая ей значение условного выражения; если hour больше 12, ( hour - 13), иначе просто hour .

Следующий оператор присоединяет значение minute к temp . Если значение minute меньше 10, условное выражение прибавляет строку с предшествующим 0; иначе добавляет строку с разделяющим двоеточием. Затем оператор присоединяет значение секунд к temp тем же способом.

Наконец, условное выражение присоединяет "PM" к temp , если hour равно или больше 12; иначе присоединяет "AM" к temp .

Предопределённый объект Function специфицирует строку кода JavaScript, компилируемую как функция.

Для создания Function -объекта:

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

arg1, arg2, . argn это аргументы, используемые функцией как имена формальных аргументов. Каждое обязано быть строкой, соответствующей верному идентификатору JavaScript; например "x" или "theForm".

functionBody это строка, специфицирующая код JavaScript, компилируемый как тело функции.

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

Помимо рассмотренного здесь объявления, Вы можете также использовать оператор function . См. книгу Клиентский JavaScript. Справочник .

Следующий код присваивает функцию переменной setBGColor . Эта функция устанавливает цвет фона текущего документа.

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

Вы можете присвоить функцию обработчику события одним из следующих способов:

Создание переменной setBGColor , показанное выше, похоже на объявление следующей функции:

Вы можете вкладывать функцию в функцию. Вложенная (внутренняя) функция является private для её содержащей (внешней) функции:

• Внутренняя функция доступна только для операторов внешней функции.
• Внутренняя функция может использовать аргументы и переменные внешней функции. Внешняя функция не может использовать аргументы и переменные внутренней функции.

Предопределённый объект Math имеет свойства и методы для математических констант и функций. Например, свойство PI имеет значение pi (3.141. ), которое Вы можете использовать в приложениях так:

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

Учтите, что все тригонометрические методы объекта Math принимают объекты в радианах.

В таблице дано резюме по методам объекта Math .

Стандартные тригонометрические функции; аргумент в радианах

Инверсные тригонометрические функции; return-значения в радианах

Экспоненциальный и натуральный логарифмы, база e

Возвращает наименьшее целое, больше и равное аргументу

Возвращает наибольшее целое, меньше и равное аргументу

Возвращается больший или меньший (соответственно) из двух аргументов

Показатель степени; первый аргумент - база, второй - экспонента

Округляет аргумент до ближайшего целого

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

Часто бывает удобнее использовать этот объект с оператором with , когда большой участок кода использует математические константы и методы, чтобы не нужно было постоянно печатать "Math". Например,

Объект Number имеет свойства для числовых констант, таких как максимальное значение, не-число и бесконечность. Вы не можете изменять эти значения и используете их так:

Вы всегда обращаетесь к свойствам предопределённого объекта Number так, как показано выше, а не как к свойствам Number -объекта, созданного Вами.

В таблице дано резюме по свойствам объекта Number .

Наибольшее представимое число

Наименьшее представимое число

Специальное значение "not a number/не число"

Специальное значение "бесконечность"; возвращается при переполнении

Специальное значение "отрицательная бесконечность"; возвращается при переполнении

Объект RegExp даёт возможность работать с регулярными выражениями. Он рассмотрен в Главе 4 "Регулярные Выражения" .

Объект String является оболочкой для примитивного типа данных string. Не путайте строковой литерал с объектом String . Например, следующий код создаёт строковой литерал s1 и String -объект s2 :

Вы можете вызывать любой из методов объекта String в строковом литеральном значении - JavaScript автоматически конвертирует строковой литерал во временный String -объект, вызывает метод, затем уничтожает временный String -объект. Вы можете также использовать свойство String.length со строковым литералом.

Вы должны использовать строковые литералы, если только Вам не нужно обязательно использовать объект String , поскольку String -объекты могут иметь непредсказуемое поведение. Например:

Объект String имеет одно свойство, length , которое обозначает количество символов в строке. Например, следующий код присваивает переменной x значение 13, поскольку "Hello, World!" состоит из 13 символов:

Объект String имеет методы двух типов: возвращающие вариации самой строки, такие как substring и toUpperCase , и возвращающие HTML-форматированную версию строки, такие как bold и link .

Например, используя предыдущий пример, и mystring.toUpperCase() и "hello, world!".toUpperCase() возвратят строку "HELLO, WORLD!".

Метод substring принимает два аргумента и возвращает подстроку между двумя аргументами. Используя предыдущий пример, mystring.substring(4, 9) возвращает строку "o, Wo." См. метод substring объекта String в книге Клиентский JavaScript. Справочник .

Объект String также имеет несколько методов для автоматического HTML-форматирования, такие как bold для создания жирного начертания текста и link для создания гиперссылки. Например, Вы можете создать гиперссылку на воображаемый URL методом link :

В таблице дано резюме по методам объекта String .

Создаёт именованный якорь HTML

Создают HTML-форматированную строку

Возвращают символ или код символа в специфицированной позиции в строке

Возвращают позицию специфицированной подстроки в строке или последнюю позицию специфицированной подстроки, соответственно

Создаёт гиперссылку HTML

Комбинирует текст двух строк и возвращает новую строку

Конструирует строку из специфицированной последовательности кодовых значений набора ISO-Latin-1

Делит String -объект на массив строк, разделяя строку на подстроки

Извлекает участок строки и возвращает новую строку

Возвращают специфицированный поднабор строки, специфицируя индексы start и end или start-индекс и размер

Используются для работы с регулярными выражениями

Возвращают строку в нижнем или верхнем регистре, соответственно

Дата последнего обновления: 25 мая 1999 года. Copyright (c) 1999 Netscape Communications Corporation