Упражнения

1. Добавить метод propList() (пример 10) к прототипу объекта Object, а также добавить к прототипу этого же объекта свойство list со значением "Добавленное к прототипу Object". Проверить на объектах String, Date, Number, Function, Array, Boolean, действительно ли будут добавляться к экземплярам указанных объектов добавленные к прототипу объекта Object метод и свойство.

2. Добавить к прототипу объекта Array метод вычисления максимального элемента массива и посмотреть его работу на экземплярах объектов этого типа, содержащими только числовые элементы, только строковые и смешанные (числа и строки).

3. Создать массив, элементы которого хранят ссылки на все 6 типов встроенных объектов JavaScript. Случайным образом "перемешать" его элементы. После этого распечатать отчет о том, какие объекты хранятся в его элементах, начиная с первого.

4. Реализовать нижеприведенный сценарий. Проверить доступность свойств 0, 1, 2, 3 массива. Объяснить результаты. Поэкспериментировать с другими типами встроенных объектов.

var a = new Array("apple", "banana", "cactus");

a["q"] = 9

document.write(a.propertyIsEnumerable("q"))

5. Отобразить на странице HTML таблицу, показывающую результаты выполнения методов toString и valueOf всех встроенных объектов JavaScript.

6. Разработать страницу HTML со встроенным сценарием, который получает введенный пользователем код JavaScript в текстовом поле страницы и выполняет его.

Получить строку из текстового поля страницы HTML

<input name=txt1 type=text size=40>

можно, используя свойство value объекта с идентификатором, равным значению атрибута name текстового поля

fromText = txt1.value

Интерпретацию строки можно организовать, используя кнопку

<input type=button value="Интерпретировать"

onclick="eval(txt1.value)">

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

Символ escape encodeURI encodeURIComponent

%20 %20 %20

` %60 %60 %60

~ %7E ~ ~

! %21 ! !

@ @ @ %40

# %23 # %23

. . .

Урок 9. Создание собственных объектов

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

Для создания объектов в JavaScript можно использовать объектный литерал или специальным образом написанную функцию — конструктор объекта.

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

{prop1:value1, ..., propN:valueN}

Значением свойства может быть любой поддерживаемый JavaScript тип данных, включая объект:

var Basil = {name:"Basil",surname: "Ivanoff",

university:{name:"PGU",faculty:"AM",cours:5}}

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

alert(Basil.university.name)

Если в качестве значения свойства указывается ссылка на объект-функцию, то такое свойство на самом деле является методом создаваемого объекта:

var Cat = {name:"Mourik", color:"red", voice:mew};

function mew(){

alert("mew... mew...")

}

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

Cat.voice();

Но реально будет вызвана и выполнена функция, реализующая указанный метод (в нашем примере mew()).

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

// Объявление конструктора

function CatWithoutOwner(sName, sColor) {    this.name = sName    this.color = sColor }

// Создание экземпляра

myCat = new CatWithoutOwner("Mourik", "red")

Ключевое слово this в конструкторе предназначено для ссылки на конкретный экземпляр объекта, создаваемый операцией new. (Если в функции используется ключевое слово this, то это обязательно конструктор объекта.)

Как и в случае с объектными литералами, свойства объекта, определяемые в его конструкторе, сами могут быть объектами:

// Конструктор объекта person

function person(name, age) {    this.name = name    this.age = age }

// создаем экземпляр объекта person

alex = new person("Alex", 50)

// Конструктор объекта CatWithOwner

function CatWithOwner(sName, sColor, sOwner) {    this.name = sName    this.color = sColor

this.owner = sOwner }

// Создает экземпляр объекта CatWithOwner

cat = new CatWithOwner("Mourik", "red", alex)

// Отображаем имя владельца

alert(cat.owner.name)

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

cat.age = 6; cat.voice = mew

Теперь у объекта cat появилось свойство age и метод voice, но только у этого объекта. Создаваемые конструктором CatWithOwner() объекты не будут иметь указанных свойства и метода.

Но в JavaScript можно (после написания конструктора) в любой момент (чтобы не менять конструктор) добавить свойства и метолы непосредственно к объектному типу. Это приведет к тому, что создаваемые после этого экземпляры объектов с помощью того же конструктора будут обладать добавленными свойствами и методами. Для этих целей используется свойство prototype "объектного типа", совпадающего с именем конструктора:

CatWithOwner.prototype.age = null

CatWithOwner.prototype.voice = mew

// теперь создаем экземпляр

var cat1 = new CatWithOwner("Mourik", "red", alex)

// у него есть свойство age (значение null)

// и метод voice()

alert(cat1.age);

cat1.voice();

// можем изменить значение свойства age

cat1.age = "red"

В конструкторе объекта вместо имен свойств (да и методов) можно использовать индексы:

function CatWithOwner(sName, sColor, sOwner) {    this[1] = sName    this[2] = sColor

this.owner = sOwner }

cat1 = new CatWithOwner("Mourik", "black", alex)

Теперь к свойствам, соответствующим имени и цвету, можно обращаться по индексу:

alert(cat1[1])

Индексацию можно использовать и при доступе к свойствам, определенным с помощью имени, но в этом случае в качестве индекса берется строка с именем свойства:

alert(cat1["owner"])

Для определения методов объекта в конструкторе следуем по схеме, аналогичной определению методов объекта в его конструкторе — определяем свойство, имеющее значением ссылку на функцию, реализующую создаваемый метод:

function who() {  var result = "Кот " + this.name + ",\nвладелец которого" +

this.owner.name     return result }

// Новый конструктор объекта CatWithOwner

function CatWithOwner(sName, sColor, sOwner) {    this.name = sName    this.color = sColor

this.owner = sOwner

this.whose = who }

// Новый кот

var cat2 = new CatWithOwner();

// Чей это кот

alert(cat2.who())

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

Существует операция delete, позволяющая удалить свойство объекта или элемента массива. Удалять можно только свойства созданных пользователем собственных объектов или свойства встроенных объектов, которые пользователь к ним добавил:

myobj = new Number();

myoj["prop"] = "*********" delete myobj.prop

В завершение рассказа о пользовательских объекта, в конструкторах которых применялось ключевое слово this для создания ссылки на текущий экземпляр объекта, напомним еще об одном случае использования этого ключевого слова. Его можно использовать в коде обработчика события элемента HTML для ссылки на объект, соответствующий этому элементу HTML:

<INPUT TYPE="text" NAME="age" SIZE=3

onChange="validate(this)">

Здесь ключевое слово this ссылается на поле ввода и ссылка на него передается в функцию validate(), вызываемую при возникновении события изменения содержимого этого поля.