Используя объекты Вы можете удобно хранить и обрабатывать информацию в JavaScript.
ТвитнутьВ предыдущих главах мы рассматривали встроенные объекты JavaScript (такие как массивы, строки, и т.д.).
В данной главе мы научимся создавать свои собственные объекты.
Объект - это конструкция, которая может иметь свойства и методы. Объекты могут быть созданы двумя способами:
Синтаксис (первый способ):
Пример
//Создадим объект obj var obj=new Object(); //Добавим объекту obj свойство name со значением 'Дмитрий' obj.name='Дмитрий'; //Добавим объекту obj свойство age со значением 26 obj['age']=26; //Обратимся к свойствам объекта для вывода их значений document.write(obj.name+'<br />'); document.write(obj.age);
Синтаксис (второй способ):
Пример
//Создадим объект obj со свойствами name и age, которые содержат
//значения 'Дмитрий' и 26
var obj={
name:'Дмитрий',
age:26
}
//Обратимся к свойствам объекта для вывода их значений
document.write(obj.name+'<br />');
document.write(obj.age);
В JavaScript Вы можете обращаться к свойствам объектов двумя способами:
//Присваиваем свойству объекта произвольное значение имя_объекта.свойство=значение //Обращаемся к значению свойства объекта имя_объекта.свойство
//Присваиваем свойству произвольное значение имя_объекта['свойство']=значение //Обращаемся к значению свойства имя_объекта['свойство']
Свойства - это значения, связанные с объектами.
Например, объект человек может иметь следующие свойства: имя, возраст, профессия.
Пример
//Создадим объект human со свойствами name, age и job
var human={
name:'Дмитрий',
job:'Дизайнер',
age:26
}
//Выведем значения свойств на страницу
document.write(human.name+'<br />');
document.write(human.job+'<br />');
document.write(human.age);
Методы - это функции, связанные с объектами.
Например, объект человек может иметь следующие методы: идти(), сидеть(), думать().
Пример
var flag;
//Создадим объект human со свойствами name, age и job
var human={
name:'Дмитрий',
job:'Дизайнер',
age:26
}
//Добавим объекту метод go()
human.go = function () {
document.write(this.name+' идет.<br />');
var a=true;
return a;
}
//Добавим объекту метод sit()
human.sit = function () {
document.write(this.name+' сел.<br />');
flag=true;
}
//Добавим объекту метод think()
human.think = function () {
if (flag==true)
document.write(this.name+' начал мыслительную деятельность.<br />');
else
document.write(this.name+' не может начать мыслительную деятельность на
ходу.<br />');
}
human.about= function () {
document.write('Объекта зовут <b>'+this.name+'</b> он работает <b>'+this.job+'ом</b>
и ему <b>'+this.age+'</b> лет.');
}
//Обратимся к методам объекта human
human.go();
human.think();
human.sit();
human.think();
human.about();
Обратите внимание: в JavaScript объекты могут иметь неограниченное количество свойств и методов.
В предыдущих примерах этой главы мы создавали прямые экземпляры объектов. В JavaScript существует еще один способ создания объектов - с помощью конструктора объектов.
Конструктор объектов - это шаблон, на основе которого создаются объекты. Написанный один раз конструктор, позволяет создать неограниченное количество объектов любой сложности написав лишь одну строчку кода.
Преимущества данного способа заключается в том, что он позволяет разделить логику создания объекта от его использования. Например, один человек может специализироваться на создании сложных конструкторов объектов, а другой на написании на основе этих объектов конечных программ под заказ.
Пример
//Создадим конструктор, который будет создавать объекты со свойствами name, age и
//job и методом who
function Human(name,age,job) {
//Свойства шаблона
this.name=name;
this.age=age;
this.job=job;
//Методы шаблона
this.who=function who() {
document.write('Я<b> ' + this.name + '</b> мне <b>'+ this.age + ' </b>лет.');
document.write(' Я работаю <b>' + this.job + 'ом</b>.<br />' );
}
}
//Теперь мы можем создавать объекты следующим образом
human1=new Human('Дмитрий', 26, 'Дизайнер');
//Обратимся к методу who созданного объекта
human1.who();
human2=new Human('Станислав', 29, 'Программист');
human2.who();
human3=new Human('Сергей', 35, 'Менеджер');
human3.who();
Обратите внимание: ключевое слово this используется для обозначения "текущего" объекта. К примеру при создании объекта human1, this в конструкторе Human подменяется на human1, а при создании объекта human2 подменяется на human2.
Обратите внимание: оператор new обязательно должен присутствовать при создании экземпляра объекта.
С помощью свойства prototype Вы можете добавлять новые свойства и методы к конструкторам объектов.
Добавленные к конструктору свойства и методы будут также добавлены ко всем объектам, которые были созданы данным конструктором.
Синтаксис:
конструктор.prototype.свойство(метод)=значение(функция);
Пример
//Создадим шаблон объекта Human
function Human(name,age) {
this.name=name;
this.age=age;
}
//Cоздадим объект object1
object1=new Human('Владимир',30);
//Выведем свойства объекта object1 на страницу
document.write(object1.name+' ');
document.write(object1.age+' ');
document.write(object1.ex+'<br />');
//Теперь добавим к шаблону объекта свойство ex с помощью prototype
Human.prototype.ex='<b>Добавлено через prototype.</b>';
//Теперь выведем свойства объекта object1 еще раз
document.write(object1.name+' ');
document.write(object1.age+' ');
document.write(object1.ex);
Обратите внимание: свойство prototype присутствует также у всех встроенных конструкторов JavaScript таких как массив или строка.
Наследование - является важным механизмом объектно-ориентированного программирования. Наследование позволяет ускорить и упростить разработку конструкторов объектов.
С помощью механизма наследования Вы можете перенимать свойства и методы с уже имеющихся конструкторов вместо того, чтобы задавать их еще раз в ручную.
Обратите внимание: с помощью конструкции свойство || "Стандартное значение" мы можем присвоить свойству объекта стандартное значение в случае, если значение не было передано в конструктор при создании объекта.
Пример
//Создадим конструктор Human
function Human(name,age,job) {
this.name=name || "Имя не задано";
this.age=age || 99;
this.job=job || "Безработный";
this.who=function(){
document.write('Я<b> ' + this.name + '</b> мне <b>'+ this.age + ' </b>лет.');
document.write(' Я работаю <b>' + this.job + 'ом</b>.<br />' );
}
}
/* Создадим конструктор projectHuman, который помимо свойств и методов конструктора
Humanимеет еще свойство project (проект), свойство term (срок сдачи проекта) и
метод myProject*/
function projectHuman(project,term,name,age,job){
//Производим наследование от конструктора Human
this.base=Human;
this.base(name,age,job);
//Добавляем новые свойства
this.project=project || "Нет проекта";
this.term=term || "31 декабря 2099";
//Добавляем новый метод myProject()
this.myProject=function(){
document.write("Мой текущий проект: <b>"+this.project+"</b>.<br />
Его срок сдачи: <b>"+this.term+"</b>.");
};
}
//Создаем с помощью конструктора projectHuman объект human1
human1=new projectHuman("Создание веб-сайта для фирмы 'ExampleCo'","20 Августа 2011",
"Дмитрий",26,"веб-мастер");
//Обратимся к его методам
human1.who();
human1.myProject();
document.write("<br />");
//Создаем с помощью конструктора projectHuman объект human2
human2=new projectHuman("Небоскреб 'TreeUnited Building'","26 Сентября 2012");
/* Обратимся к его свойствам name,age,job, которые не были переданы в конструктор,
чтобы проверить их текущие значения */
document.write("<hr />"+human2.name+"<br />");
document.write(human2.age+"<br />");
document.write(human2.job);
Задание 1 Создайте объект по описанию в редакторе.