Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
8.10 Пользовательские объекты

Автор: Denisido

Дата: 2010-10-13

В языке JavaScript помимо встроенных объектов можно создать собственные объекты, т.е. те, которые вы опишите самостоятельно. Такие объекты называются пользовательскими. Суть их в том, чтобы предоставить средства на все случаи жизни, т.к. встроенные объекты ограничены и могут не выполнять тех задач, которые вам необходимо осуществить.

JavaScript создание объектов

Инструментом для создания объекта служит особая функция, называемая конструктором. Описание такого конструктора, как и любой другой функции, начинается с ключевого слова function, затем с большой буквы указывается имя функции-конструктора, которое должно совпадать с именем объекта. На самом деле, это имя и будет именем объекта.

// javascript создание объектов (построение функции-конструктора)
  
function ObjName() {
                     // объявление свойст и методов объекта
                   }

Как видите, объявленная функция-конструктор ничем не отличается от формата обычной функции. В теле конструктора записываются выражения, объявляющие его свойства и методы.
На заметку: желательно указывать имя конструктора с большой буквы (негласное соглашение между программистами).

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

// javascript создание объектов (создаем функцию-конструктор МАШИНЫ)
  
function Car() {
                this.mark = 'BMW';      // марка машины
                this.model ='318i';     // модель автомобиля
                this.color = 'black';   // цвет авто
                this.ny = 2010;         // год выпуска
                this.status = true;     // состояние (значение boolen: true - новая)
               }

Теперь перейдем непосредственно к созданию самого объекта. Объект как и любая переменная создается при помощи ключевого слова var, затем следует имя экземпляра объекта (в нашем случае car1), затем прописываем оператор new, указывающий диалекту JavaScript, что будет вызвана именно функция-конструктор, а не обычный метод.

Запустить!
// javascript создание объекта
  
var car1 = new Car();
alert(car1.mark+' '+car1.model+' '+car1.color+' '+car1.ny+' '+car1.status);

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

Запустить!
// javascript создание объектов (создаем функцию-конструктор МАШИНЫ с параметрами)
  
function Car(pmark, pmodel, pcolor, pny,pstatus) {
  
   this.mark =  typeof(pmark) != 'undefined' ? pmark : 'BMW';
   this.model = typeof(pmodel) !='undefined' ? pmodel : '318i';
   this.color = typeof(pcolor) != 'undefined' ? pcolor : 'black';
   this.ny =    typeof(pny) != 'undefined' ? pny : 2010;
   this.status = typeof(pstatus) != 'undefined' ? pstatus : 'true';
  
               }
  
var car2 = new Car('MERCEDES-BENZ', 'C 220', 'white', 2008, false);
  

Аналогичным образом в диалекте javascript создаются и методы пользовательских объектов. Но стоит заметить, что язык JavaScript предусматривает расширение свойст и методов своих объектов с помощью свойства prototype. Давайте попробуем объявить метод для нашего объекта используя данный формат:

Запустить!
// javascript создание объекта (объявляем методы)
  
function Car(pmark, pmodel, pcolor, pny,pstatus) {
  
   this.mark =  typeof(pmark) != 'undefined' ? pmark : 'BMW';
   this.model = typeof(pmodel) !='undefined' ? pmodel : '318i';
   this.color = typeof(pcolor) != 'undefined' ? pcolor : 'black';
   this.ny =    typeof(pny) != 'undefined' ? pny : 2010;
   this.status = typeof(pstatus) != 'undefined' ? pstatus : 'true';
  
               };
  
  
Car.prototype.changeColor = function (newColor) {  // объявляем метод
                                                  return  this.color = newColor;
                                                };
  
var car3 = new Car();
  
alert(car3.changeColor('Silver'));
  

Определение объекта в виде литерала

Самый простой и краткий способ создать объект заключается в использовании литералов, где определение объекта заключают в фигурные скобки, а список свойств (пар «имя–значение») разделяют запятыми. При этом имена свойств отделяют от значений двоеточиями.

Запустить!
// javascript создание литерал объекта
var obj = {};	// создаем условно "пустой объект"
alert(typeof obj); // определяем тип. Выдаст object

Вернемся к нашему примеру и добавим к объекту свойство .color

// javascript добавление свойств к объекту
var car4 = 	{
		color : 'red' ,
		mark  : 'Opel'
		}; 

Как мы уже знаем, в качестве значений могут выступать функции, и в таких случаях их называют методами.

Запустить!
// javascript литералы объектов
var car5 = 	{
		color : 'red' ,
		// добавляем метод к объекту
		changeColor : function (newColor) 	{
							return this.color = newColor;
							}
		};
alert(car5.changeColor('green'));

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

Запустить!
// javascript литералы объектов
var car6 = {};
car6.color = 'Red';
car6.changeColor = function (newColor) 	{
					return this.color = newColor;
					};
alert(car6.changeColor('Green'));



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Коментарий добавил(а): fgh1233
Дата: 2010-10-16

Сколько нужной инфы почерпнул я для себя из этих замечательных уроков. Уверен, что автор удивит нас снова чем-то очень полезным. Ждем новых уроков.

Коментарий добавил(а): Objekt
Дата: 2011-12-03

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

Коментарий добавил(а): Denisido
Дата: 2012-03-10

Уважаемый, Objekt! Считается плохим тоном делать так, как Вы указали! Корректно инициализировать только свойства объекта внутри конструктора, а методы снаружи конструктора, используя свойство prototype.

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 8053

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.