JavaScript урок 6. Javascript объекты

Авторadmin / Опубликовано4 комментария

На уроке будет рассмотрена темы Javascript объекты. Речь пойдет о пользовательских объектах: создание объекта в javaScript, работа со свойствами и методами объекта, а также javascript прототипами. Кратко излагается работа с объектами Location, Navigator, Screen

Назад
К оглавлению
Далее к уроку 7
Задача сайта labs-org.ru — получение пользователями практических навыков работы с языком. Лабораторные работы по javaScript, изложенные по мере увеличения их сложности и подкрепляемые наглядными решенными примерами, позволят с легкостью воспринять изучаемый материал и научиться самостоятельно создавать «живые», динамические веб-страницы.

JavaScript объекты

В javaScript существует несколько видов объектов:

  • встроенные объекты
  • объекты браузера
  • объекты, которые программист создает самостоятельно (пользовательские)

Встроенные объекты — это предопределенные объекты number, string, array… Большинство из которых уже были рассмотрены в предыдущих уроках.

Об объектах браузера в javaScript речь пойдет в дальнейших уроках.

А сейчас время познакомиться с пользовательскими объектами в javaScript.

  • Object(объекты)
  • Number (обработка чисел)
  • String (обработка строк)
  • Array (массивы)
  • Math (математические формулы, функции и константы)
  • Date (работа с датами и временем)
  • RegExp
  • Global (его свойства Infinity, NaN, undefined)
  • Function

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

Существует 2 способа создания объектов:

  1. Использование инициализатора объекта (или создание объектов-коллекций)
  2. Использование конструктора объектов (создание классов-конструкторов)
  1. Создание объектов-коллекций
    2. // пустой объект:
let имя_объекта = {}; 
// объект со свойствами:
let имя_объекта = {свойство:значение, свойство:значение,...};

     
    или
     

    let имя_объекта = new Object();
имя_объекта.свойство = значение;// точечная нотация
имя_объекта["свойство"] = значение;// скобочная нотация
    Пример: Создать объект myBrowser со свойствами name (значение “Microsoft Internet Explorer”) и version (значение «9.0»)

    ✍ Решение 1:
     

      1
2
3
4
5
6

      let myBrowser = {
    name: "Microsoft Internet Explorer", // свойство name 
    version: "9.0" // свойство version равно значению "9.0"
};
alert(myBrowser.name); // вывод значения свойства name
alert(myBrowser.version);

    или
    ✍ Решение 2:
     

      1
2
3

      let myBrowser = new Object(); // или let myBrowser = {}; 
myBrowser.name= "Microsoft Internet Explorer"; // точечная нотация
myBrowser["version"]= "9.0";  // скобочная нотация

    Пример: Создать два объекта-коллекции (car и moto) со свойствами color и brand (у объекта moto еще свойство horse power). Вывести значение свойства color у объекта car и свойства brand у объекта moto.

    ✍ Решение:
     

      1
2
3
4
5
6
7
8
9
10
11
12
13
14

      let car = new Object();
car.color = "Белый";
car.maxSpeed=220;
car.brand = "Nissan";
 
document.write("У машины цвет: " + car.color);
 
let moto = {
	color: "Синий",
	"horse power": 130, // если свойство из двух слов - используем кавычки
	brand: "Yamaha"
	};
 
document.write("У мотоцикла производитель: " + moto.brand);

    Изменение и удаление свойства объекта

    moto["horse power"] = 120; //если два слова, то только скобочная нотация
alert (moto["horse power"]); // 120
delete moto["horse power"]; // удаляем свойство

    С помощью квадратных скобок также также можно обратиться к свойству, вместо имени которого может быть переменная. Например:

    let moto = {
	color: "Синий",
	"horse power": 130, // если свойство из двух слов - используем кавычки
	brand: "Yamaha"
	};
let key = prompt("Что вы хотите узнать о мотоцикле? ", "brand или color?");
 
// доступ к свойству через переменную
alert( moto[key] ); // Yamaha (если ввели "brand")
    Цикл «для каждого» for in при работе с объектами в javascript

    Совсем немного об этой конструкции уже было сказано в одном из предыдущих уроков.
    Цикл for in в javascript предназначен для прохода по массивам, коллекциям и объектам.

    Рассмотрим пример использования for in:

    1
2
3
4
5
6
7
8

    let myBrowser = new Object();
myBrowser.name= "Microsoft Internet Explorer";
myBrowser["version"]= "9.0";
for (let a in myBrowser)
{
	alert(a); // Перебирает свойства объекта myBrowser. Выдаст name, version
        alert(myBrowser[a]); // Выдаст значения свойств
}
  2. Создание классов-конструкторов

Для полноценной работы с объектами необходимо создать класс-конструктор:

Создание классов-конструкторов осуществляется в два этапа:

  1. сначала создается класс с помощью конструктора;
  2. затем создается новый объект на основе конструктора.

Создание класса объектов с помощью конструктора (создание классов-конструкторов):

1
2
3
4

function Имя_класса_объектов(св-во1, св-во2){
	this.свойство1 = св-во1; // значение для свойства1 берется из значения аргумента св-во1
	this.свойство2 = св-во2;
}

Создание нового объекта на основе конструктора для класса объектов:

1

let имя_объекта = new имя_класса("значение_св-ва1","значение_св-ва2");

или

1
2
3

let имя_объекта =new имя_класса();
имя_объекта.св-во1="значение_св-ва1";
имя_объекта.св-во2="значение_св-ва2";
Название класса конструктора принято писать с заглавной буквы!

Рассмотрим пример:

Пример: Создание конструктора для класса объектов и создание объекта на основе этого класса: создать объект myBrowser со свойствами name (значение “Microsoft Internet Explorer”) и version (значение «9.0»)
Открыть решение

1
2
3
4
5
6
7
8

function Browser (name, version){
	this.name = name;
	this.version = version;
}
let myBrowser = new Browser("Microsoft Internet Explorer","9.0");
 
alert(myBrowser.name);
alert(myBrowser.version);

Итак, сравним еще раз с первым способом создания объектов:

1
2
3
4
5
6

// объект-коллекция
let myBrowser = {name: "Microsoft Internet Explorer", version: "7.0"};
alert(myBrowser.name);
alert(myBrowser.version);
// следующая строка недопустима!
let myBrowser1 = new myBrowser ("MozillaFirefox","3.5"); // НЕ ВЕРНО! !!
Важно: В случае создания объекта-коллекции нельзя создавать экземляр класса, так как это не класс
Задание js 6_1. Создать объект Сотрудник, который содержит сведения о сотрудниках некоторой фирмы, такие как Имя, Отдел, Телефон, Зарплата (использовать функцию-конструктор и ключевое слово this). Создать экземпляр объекта

Доступ к свойствам объектов в javaScript

 
имя_объекта.имя_свойства
  

1
2

agent007.Имя = "Бонд";
alert(agent007.Имя);
Что такое свойство по умолчанию

Функция-конструктор позволяет наделить объект свойствами по умолчанию. Эти свойства будут у каждого создаваемого экземпляра объекта 

1
2
3
4
5
6
7
8
9
10

function Student(name, phone) {
   this.name=name;
   this.phone="22-22-22"; // свойство по умолчанию!
}
let ivanov = new Student("Ivan","33-33-33");
alert (ivanov.name); // выдаст "Ivan"
alert (ivanov.phone); // выдаст "22-22-22"
 
ivanov.phone="33-33-33"; //меняем св-во по умолчанию
alert (ivanov.phone); // выдаст "33-33-33"
Добавление свойств к классу объектов
Значение свойства можно добавить для:

  • конкретного экземпляра объекта;
  • целого класса объектов

Добавление свойств к конкретному (экземпляру) объекту:

имя_объекта.имя_свойства = значение

function Student(biology, phisics) {
  this.biology=biology;
  this.phisics=phisics; 
}
let ivanov = new Student();
ivanov.biology = "отлично";
Важно: В примере свойство задается для конкретного объекта, а не для класса объектов!

Добавление свойств к классу объектов:

имя_класса.prototype.имя_свойства=значение

Student.prototype.biology = "отлично";
Важно: В примере свойство (по умолчанию) задается для класса объектов! Это сделано при помощи prototype ; прототип — объект, определяющий структуру
1
2

Student.prototype.email="jb@gmail.com";
alert(ivanov.email); // выдаст "jb@gmail.com"

Пример: Пример вывода всех свойств объекта со значениями
1
2
3
4
5
6
7
8
9

let summerTour={
	turkey : 2000,
	spain : 3000,
	egypt : 1000
};
let option;
for (option in summerTour){
	document.write(option + ':' + summerTour[option] + '<br/>');
}

Javascript прототипы (введение)

Рассмотрим пример того, как строятся javascript классы на прототипах

Пример: Создать класс объекта Cаr (автомобиль) с тремя свойствами : name(название), model(модель), color (цвет). Создать экземпляр класса с конкретными значениями свойств. Затем через созданный экземпляр добавить к классу свойство owner (владелец) с конкретным значением по умолчанию (Иванов). Вывести все значения свойств созданного экземпляра
1
2
3
4
5
6
7
8
9
10
11
12
13

function Car(name, model, color) { /* конструктор объекта car*/
  this.name = name; 
  this.model = model; 
  this.color = color; 
}
 
let myCar=new Car;
myCar.name="Мерс";
myCar.model="600";
myCar.color="green";
 
Car.prototype.owner = "Иванов"; /* добавляем новое свойство*/
alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);
Задание js 6_2. Для задания js 6_1 через созданный экземляр объекта Сотрудник добавьте новое свойство адрес к классу объектов

JavaScript методы объектов

Создание метода объекта

Пример: Добавить к конструктору объектов Browser метод aboutBrowser, который будет выводить на экран обозревателя информацию о свойствах этого объекта
  1. Методы объекта создаются на основе отдельно описанной функции и добавляются в конструктор класса
    2. 1
2
3
4
5
6
7
8
9
10
11
12
13

    function showBrowser() {
  document.write("Обозреватель: " + this.name +
" " + this.version);
}
 
 function Browser(name, version) {
  this.name = name;
  this.version = version;
  this.aboutBrowser = showBrowser;
}
 
let myBrowser=new Browser("Microsoft Internet Explorer",8.0);
myBrowser.aboutBrowser();
  2. Методы объекта создаются на основе функции, описанной внутри конструктора класса
1
2
3
4
5
6
7
8
9

function Browser(name, version) {
  this.name = name;
  this.version = version;
  this.aboutBrowser = function(){
	document.write("Обозреватель: " + name + " " + version);
  }
}
let myBrowser=new Browser("Microsoft Internet Explorer",8.0);
myBrowser.aboutBrowser();
Задание js 6_3. Создать класс объектов (Tour) для работы туристической фирмы с методом подсчета стоимости поездки из расчета: количества человек * количество дней * тариф страны. Создать экземпляр объекта turkeyTour со значениями свойств. Вывести все свойства объекта на экран. Метод объекта расчет создавать на основе функции.

Javascript прототипы (Prototype) встроенных объектов

Добавление свойств и методов к встроенным объектам (прототип)

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

Рассмотрим работу с прототипами на примере:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*  Изменение прототипа */
// Добавление свойства по умолчанию  к  встроенному объекту
String.prototype.color = "black";
// Добавление  (изменение) метода  к встроенному объекту
String.prototype.write = stringWrite;
function stringWrite(){
	document.write('<span style="color:' + this.color + '">');
	document.write(this.toString());
	document.write('</span>');
}
// используем измененный класс
let s = new String("Это строка");
s.color = "red";
s.write();
Важно: К объекту Math нельзя добавлять свойства и методы
Задание js 6_4. Дополните код программы для выполнения задания: К встроенному классу String добавить метод printMe(), который выводит слово «Ура!» как заголовок (тег h…), указанного пользователем уровня (prompt).
Уровень заголовка (1, 2 … 6) можно добавить в виде свойства класса String.
Вспомним, как должны выглядеть теги заголовков в HTML:

<h1>Заголовок</h1>
<h2>...</h2>
...

Дополните код:

1
2
3
4
5
6
7
8

String.prototype.uroven="1";
...
function printZagolovok (){
...
...
}
let s=new ...;
...

Резюме: сравним еще раз два варианта использования пользовательских объектов в JavaScript:

  1. Создание объектов-коллекций
    2. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    let myBook=new Object();
myBook.title="книга";
myBook.price="200";
 
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
 
function myBookShow()
{
	for (let i in myBook)
	{
		document.write(i+": "+myBook[i]+"<br>"); // Перебор свойств
	}
}
myBook.show=myBookShow;
myBook.show();
  2. Создание классов-конструкторов
    3. 1
2
3
4
5
6
7
8
9
10
11
12
13
14

    function myBook(title,price){
//  определение свойств
this.title = title;
this.price = price;
// определение метода
this.show = show;
	function show()
	{
			document.write("Название: " + this.title);
			document.write("Цена: " + this.price);
	}
}
let book = new myBook("Книга", 200);
book.show();
Задание js 6_5. Создать объект-коллекцию Сотрудник, который содержит сведения о сотруднике некоторой фирмы, такие как Имя, Отдел, Телефон, Зарплата и отображает данные об этом сотруднике (создать метод объекта для отображения данных)
Важно: Для объекта-коллекции невозможно создавать экземпляры. Свойства и методы создаются один раз для одного объекта
Задание js 6_6. Создать меню из пунктов-гиперссылок:

  • Определить класс MenuItem.
  • Определить свойства: title (название пункта меню или текст гиперссылки), url (значение атрибута href для гиперссылки), метод show (вывод на экран созданного меню).
  • Добавить 4 пункта меню в виде списка (тег li)

Вспомним код html для создания пунктов меню:

<li><а href="labs-org.ru">Перейти на главную страницу</а></li>
<li> ... </li>
<li> ... </li>

*Сложное: количество пунктов меню, их названия и url необходимо запрашивать у пользователя

Совет: для вывода в методе show() строки на экран воспользуйтесь методом document.write()

Объекты javaScript Location, Navigator, Screen

JavaScript Navigator

Рассмотрим использование объекта Navigator в javaScript на примере:

Пример: Написать функцию, которая выводит на экран:

  • название браузера
  • язык браузера
  • название ОС
  • включены ли куки
  • подключен ли пользователь к интернету
  • разрешение экрана
  • глубину цвета
  • адрес загруженной страницы
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let option;
// вывод всех свойств объекта navigator
for (option in navigator){
	document.write(option + ' : ' + navigator[option]+ ' <br />');
}
// функция выовда конкретных свойств объекта navigator
function userDetails (){
	document.write("<br><br>Название браузера: " + navigator.userAgent + "<br />");
	document.write("Язык браузера: " + navigator.language + "<br />");
	document.write("Название ОС: " + navigator.oscpu + "<br />");
	document.write("Включены ли куки: " + navigator.cookieEnabled + "<br />");
	document.write("Подключен ли Интернет: " + navigator.nLine + "<br />");
}
 
userDetails();

Объект javaScript Screen

Рассмотрим использование объекта Screenв javaScript на примере:

1
2
3
4
5

function userDetails (){	
	document.write("Разрешение: " + screen.width + " x " + screen.height + "<br />");
	document.write("Глубина цвета: " + screen.colorDepth + " x " + screen.height + "<br />");
}
userDetails();

Объект javaScript Location

Рассмотрим использование объекта Locationв javaScript на примере:

1
2
3
4

function userDetails (){
	document.write("Адрес загруженной страницы: " + location.href + "<br />");	
}
userDetails();
Выводы:

  • С помощью выражений с ключевым словом new вы можете создавать экземпляры объектов, то есть их конкретные воплощения.
  • Более того, благодаря свойству javascript prototype имеется возможность добавлять к объектам новые свойства и методы, придуманные пользователем и отсутствовавшие в исходных встроенных объектах.
  • Создание объектов можно использовать для создания баз данных.

Замкнутые функции (IIFE) при работе с объектами

IIFE (Immediately Invoked Function Expression) — такая функция выполнится сразу после ее определения.

Синтаксис:

(function () {
    операторы
})();

Состоит из двух частей. Первая часть — это непосредственно сама анонимная функции:

(function () {
    операторы
})();

Переменные IIFE замыкаются в пределах области функции, и глобальная область видимости ими не засоряется.
Вторая часть:

(function () {
    операторы
})();

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

Рассмотрим использование так называемых замкнутых функций при работе с объектом на конкретном примере.

Пример: Создать основной рабочий файл (index.html) и подключить к нему два файла со скриптами (script1.js и script2.js).

1. В первом файле со скриптом создать замкнутую функцию, выводящую в консоль фразу ‘Привет, Иван‘. Для этого:

  • Создать пустой объект IvanGreeter.
  • Добавить к объекту свойство name со значением ‘Иван‘.
  • Добавить к объекту метод sayHello, выводящий в консоль сообщение ‘Привет, Иван‘.

    •   
    2. Во втором файле со скриптом создать замкнутую функцию, выводящую в консоль фразу ‘Здравствуйте, Мария‘.

  • Создать пустой объект MarieGreeter и добавить аналогичные свойства и методы для вывода сообщения ‘Здравствуйте, Мария‘.

    •   
    3. Откройте в браузере консоль (браузер Chrome -> F12) и посмотрите на результат во вкладке Console.

    ✍ Решение:

      код index.html:

      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Замкнутые функции</title>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
  <script>
	IvanGreeter.sayHello();
	MarieGreeter.sayHello();
  </script>
</head>
<body>
  <h1>Замкнутые функции</h1>
</body>
</html>

      код script1.js:

      (function (window){ // замкнутая функция
		let IvanGreeter = {}; // создание пустого объекта
		IvanGreeter.name = "Иван"; // свойство
		let greeting = "Привет, ";
		IvanGreeter.sayHello = function () { // метод
		  console.log(greeting + " " + IvanGreeter.name);
	}
	window.IvanGreeter = IvanGreeter;
})(window);

      код script2.js:

      (function (window){
		let MarieGreeter = {};
		MarieGreeter.name = "Мария";
		let greeting = "Здравствуйте, ";
		MarieGreeter.sayHello = function () {
		  console.log(greeting + " " + MarieGreeter.name);
	}
	window.MarieGreeter = MarieGreeter;
})(window);
    Задание js 6_7. Используя цикл, рассмотреть массив имен и выдать в консоль (или на экран) «Привет, name!» или «Пока, name!» в зависимости от того, с какой буквы начинается имя. Если имя начинается с буквы «и» или «И», то выводить «Пока, name!», в остальных случаях — «Привет, name!».
      
    Для выполнения необходимо скачать четыре файла, три из которых — файлы со скриптами и четвертый — главный запускаемый файл (скачать файлы: правой кнопкой мыши — Сохранить ссылку как…). В каждом из файлов предоставлены подробные комментарии по выполнению общей программы. Следуйте комментариям и выполняйте каждый пункт последовательно.
    index.html,
    Hello.js,
    GoodBye.js,
    script.js

    Назад
    К оглавлению
    Далее к уроку 7

    4 комментария для “JavaScript урок 6. Javascript объекты”

    1. Здравствуйте
      Спасибо за обучение, хорошие уроки!
      Не поняла, создание методов объекта. Там два вида:
      1 Методы объекта создаются на основе функции и добавляются в конструктор класса
      2 Методы объекта создаются на основе функции и добавляются в конструктор класса

      они отличаются, а название одно? Зачем тогда 1 и 2? Или второй называется иначе?

      1. Спасибо! Это ошибка была, исправила. Конечно, они отличаются. Рассмотрите подробно примеры

    Обсуждение закрыто.