Веб-инструмент
Веб-мастерская
Рассмотренные нами объекты String, Array, Number, Date, Boolean, Function являются встроенными объектами JavaScript. Но мы можем создать и свои объекты. Объект представляет собой удобное средство организации данных и функций. Это контейнер, содержащий переменные, называемые свойствами, и функции, называемые методами. Применение объекта в программах состоит в манипулировании его свойствами и методами.
Рассмотрим три способа создания объекта JavaScript.
Для обращения к свойствам и методам используется следующий синтаксис:
ссылка_на_объект.свойство
ссылка_на_объект.метод([параметры])
Рассмотрим более подробно указанные выше способы создания объектов.
Первый способ основан на функции, в теле которой описываются все свойства и методы создаваемого объекта. Поскольку эта функция играет определяющую роль в создании объекта, ее называют функцией-конструктором или просто конструктором объекта. Конструктордолжен ввести имя создаваемого объекта, а также его свойства и методы. Еще он должен допускать возможность присваивания начальных значений свойствам. Имя функции-конструктора объекта является одновременно и именем создаваемого объекта. Свойства и методы создаваемого объекта задаются в теле функции-конструктора с помощью операторов присваивания. При этом имена переменных-свойств записываются с ключевым словом this(этот):
this.переменная
Рассмотрим в качестве примера функцию-конструктор, определяющую объект саг (автомобиль) со свойствами name (название), model (модель) и color (цвет):
function car(name,model,color) {
this.name=name //название
this.model=model //модель
this.color=color //цвет
}
Эта функция определяет объект car. Чтобы создать конкретный экземпляр объекта car, следует выполнять выражение с вызовом этой функции, которой можно передать значения параметров. Экземпляр объекта создается с помощью оператора присваивания с ключевым словом new:
mycar=new car("Nissan", "Primera","green")
Таких экземпляров с различными именами можно создать несколько. Значения свойств объекта mycar можно изменять в программе:
mycar.name //значение равно Nissan
mycar.model //значение равно Primera
mycar.model = "Almera"//значение равно Almera
В окне веб-браузера это будет выглядеть ТАК.
Второй способ основан на использовании конструктора new Object():
mycar=new Object()
mycar.name="Nissan"
mycar.model=" Primera"
mycar.color=" green"
alert(mycar.name+mycar.model+mycar.color)
В этом способе создаваемый объект является экземпляром встроенного объекта Object подобно тому, как создаваемый массив является экземпляром объекта Array. Объект Object является корневым для всех ранее рассмотренных встроенных объектов.
В окне веб-браузера это будет выглядеть ТАК.
В третьем способе применяется следующая запись определения объекта:
mycar={name:"Nissan", model:" Primera", color: " green"}
alert(mycar.name+mycar.model+mycar.color)
Здесь все определение свойств заключается в фигурные скобки. Пары свойство: значение разделяются запятыми, а имя свойства отделяется от значения двоеточием.
В окне веб-браузера это будет выглядеть ТАК.
При создании объекта мы можем задать значения свойств по умолчанию, то есть значения, которые будут иметь свойства, если при создании экземпляра этого объекта значения его свойств не указаны явным образом (то есть имеют значения null, 0 или ""). Это делается с помощью логического оператора ИЛИ (обозначаемого ||) в конструкторе объекта в виде функции:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Методы объекта Function</title>
<script language="JavaScript">
/* функция-конструктор объекта car (автомобиль)*/
function car(name,model,color){
this.name=name || "неизвестно" //название
this.model=model || " неизвестно"//модель
this.color=color || " green"//цвет
}
mycar=new car("Nissan ", "")
mycar.name
mycar.model
mycar.color
alert(mycar.name+mycar.model+mycar.color)
</script>
</head>
<body>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Если возникает необходимость добавить новое свойство к существующему объекту, а также ко всем его экземплярам, то это можно сделать с помощью свойства prototype. В приведенном ниже примере мы создаем объект саг (автомобиль), затем его экземпляр mycar, а затем добавляем к свойству prototype свойство ervi(владелец) с конкретным значением:
/* функция-конструктор объекта car (автомобиль)*/
function car(name,model,color){
this.name=name || "неизвестно" //название
this.model=model || " неизвестно" //модель
this.color=color || " green" //цвет
}
mycar=new car("Nissan ", "") /*создание экземпляра mycar объекта car*/
mycar.name //Nissan
mycar.model //неизвестно
mycar.color //green
car.prototype.ervi=" Петров" //добавляем новое свойство
mycar.ervi
alert(mycar.name+mycar.model+mycar.color+mycar.ervi)
В окне веб-браузера это будет выглядеть ТАК.
Если нужно добавить новое свойство только к конкретному объекту (к данному экземпляру объекта), то это можно сделать просто с помощью оператора присвоения:
имяОбъекта.новое_свойство = значение
В следующем примере мы создаем объект саг вообще без свойств, а затем формируем его экземпляры и добавляем к ним различные свойства.
function car(){}
mycar1=new car()
mycar2=new car()
mycar1.name = " Nissan "
mycar2.model = " Almera "
mycar1.name //Nissan
mycar1.model //undefined (не определено)
mycar2.name //undefined (не определено)
mycar2.model //Almera
alert(mycar1.name+mycar1.model+" "+mycar2.name+mycar2.model)
В окне веб-браузера это будет выглядеть ТАК.
В объекте в виде свойства может содержаться ссылка на другой объект. В этом случае оба объекта оказываются связанными: один из них оказывается подобьектом или, другими словами, свойством другого. Например, мы можем создать объект photo, содержащий в качестве своих свойств название автомобиля и URL-адрес файла с его изображением. Такой объект можно связать с объектом саг, содержащим основную информацию об автомобилях, добавив к нему свойство, значением которого является ссылка на объект photo.
Ниже приведены конструкторы объектов саr и photo. Чтобы добавить объект photo в объект саг, мы добавили в объект саг свойство, значением которого является ссылка на объект photo.
/* функция-конструктор объекта car (автомобиль)*/
function car(name,model,color,photo){
this.name=name //название
this.model=model //модель
this.color=color //цвет
this.photo=photo //ссылка на объект photo
}
function photo(name,url) { //функция-конструктор объекта photo
this.name=name
this.url=url
}
А теперь создадим два конкретных объекта, являющихся экземплярами объекта photo:
photo1=new photo("Nissan ",' <img src="images/foto3.jpg">')
photo2=new photo("Nissan ",'<img src="images/foto4.jpg">')
Создаем экземпляры объекта car:
mycar=new car("Nissan "," Primera ", " white", photo1)
mycar.photo.url //<img src="images/foto3.jpg">
mycar.model //Primera
mycar1=new car("Nissan"," Primera", " white", photo2)
mycar1.photo.url ; //<img src="images/foto4.jpg">
mycar1.model //Primera
document.write(mycar.name+mycar.model+mycar.color+mycar.photo.url+" "+mycar1.photo.url)
Обратите внимание: чтобы узнать значение URL-адреса расположения файла с картинкой, относящейся к объекту mycar, мы обращаемся к свойству url объекта photo, который сам является свойством объекта mycar или, другими словами, подобъектом объекта mycar.
В окне веб-браузера это будет выглядеть ТАК.
Обсудить на форуме