Символ 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, то это обязательно конструктор объекта.)
Как и в случае с объектными литералами, свойства объекта, определяемые в его конструкторе, сами могут быть объектами:
// Конструктор объекта personfunction person(name, age) {this.name = name
this.age = age
}
// создаем экземпляр объекта person
alex = new person("Alex", 50)
// Конструктор объекта CatWithOwnerfunction 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
} // Новый конструктор объекта CatWithOwnerfunction 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(), вызываемую при возникновении события изменения содержимого этого поля.
Упражнения
1. Создать массив на основе объекта Object. Посмотреть, если у него свойство length, присущее массивам, созданным с помощью объекта Array.
2. Распечатать свойство constructor для всех известных объектов JavaScript. С помощью свойства prototype объекта Object для всех создаваемых в сценарии объектов добавить метод propertiesList(), возвращающий массив, содержащий названия всех свойств объекта и их значения.
3. Разработать объект Collection, позволяющий хранить и выбирать любые объекты JavaScript с использованием строкового ключа. Реализовать методы этого объекта: add(ключ, объект) — добавление объекта в семейство Collection, remove(ключ) — удаление объекта, count() — возвращает количество объектов в семействе, item(ключ) — возвращает объект по значению его ключа.
Дата добавления: 2018-09-24; просмотров: 282;