Объект – тип данных, который позволяет переменным содержать в себе одновременно какие либо значения и какие либо функции. Значения называются свойствами объекта, а функции – методами. Другими словами можно сказать, что объект совмещает в себе как данные (свойства), так и функции (методы). 

Использование объектов называется объектно-ориентированным программированием (ООП). Преимущества ООП могут быть видны не сразу, тем не менее они есть. Поэтому если данная тема вызывает трудности, то их необходимо преодолеть. Тем более, что современное программирование полностью основано на принципах ООП. 

Создание объекта со свойствами. 

В простейшем случае переменная типа объект создаётся примерно так же, как и массив: 

var pupil =  

{ 

  surname:'Куклин', 

  name:'Денис', 

  age:12 

}; 

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

В данном примере была создана переменная типа объект, у которой есть свойства surname, name и age.  

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

Доступ к свойствам. 

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

document.write('Фамилия - ',pupil.surname,'<br>'); 

document.write('Имя - ',pupil.name,'<br>'); 

document.write('Возраст - ',pupil.age,' лет<br>'); 

Так же с помощью точки значение свойства можно изменить: 

pupil.age = pupil.age + 1; 

Создание свойств типа объект. 

Свойству объекта можно присвоить значение любого типа, в том числе и значение типа объект. В следующем примере добавим к объекту pupil свойство birthday, которое тоже является объектом и имеет свойства day, month и year: 

var pupil =  

{ 

  surname:'Куклин', 

  name:'Денис', 

  age:12, 

  birthday: 

  { 

    day:30, 

    month:'октябрь', 

    year:2004 

  } 

}; 

Доступ к свойствам birthday будет осуществляться с помощью второй точки: 

document.write('День рождения - ',pupil.birthday.day,'<br>'); 

document.write('Месяц рождения - ',pupil.birthday.month,'<br>'); 

document.write('Год рождения - ',pupil.birthday.year,'<br>'); 

Теперь полноценный пример, демонстрирующий всё вышесказанное: 

<script> 

var pupil =  

{ 

  surname:'Куклин', 

  name:'Денис', 

  age:12, 

  birthday: 

  { 

    day:30, 

    month:'октябрь', 

    year:2004 

  } 

}; 

document.write('Фамилия - ',pupil.surname,'<br>'); 

document.write('Имя - ',pupil.name,'<br>'); 

document.write('Возраст - ',pupil.age,' лет<br>'); 

document.write('День рождения - ',pupil.birthday.day,'<br>'); 

document.write('Месяц рождения - ',pupil.birthday.month,'<br>'); 

document.write('Год рождения - ',pupil.birthday.year,'<br>'); 

document.write('<br>Прошел год.<br>'); 

pupil.age = pupil.age +1; 

document.write('Теперь возраст - ',pupil.age,' лет<br>'); 

</script> 

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

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

<script> 

var arithmetic =  

{ 

  summ:function(x,y)  

  { 

     return x+y; 

  }, 

  multiply:function(x,y)  

  { 

     return x*y; 

  } 

} 

document.write('2+3=',arithmetic.summ(2,3),'<br>'); 

document.write('2*3=',arithmetic.multiply(2,3),'<br>'); 

</script> 

Если вы внимательно посмотрите на код данного примера, то увидите, что методы создаются так же, как и свойства через запятую. Только вместо значения с помощью двоеточия им присваивается функция. Доступ к методам осуществляется так же, как и к свойствам с помощью точки. 

Объект Math. 

На данный момент мы уже научились пользоваться операциями Math.random и Math.round. Теперь, изучив данную тему, мы можем называть вещи своими именами. Т.е. слово «операция» использовать не будем вообще, а будем говорить методы random и round объекта Math. 

Сам объект Math встроен в язык JavaScript и вы в любом месте кода можете им пользоваться. Далее в таблице перечислены все его свойства и методы: 

Примечание: всё, что связано с углами в объекте Math вычисляется в радианах. 

Обработка свойств методами. 

Самое замечательное в объектах – то, что их свойства можно обрабатывать их же методами, не создавая отдельных функций. Для примера создадим объект прямоугольник, свойствами которого будут координаты двух его точек, а методы будут вычислять его периметр и площадь. Так же напишем метод, который будет сдвигать прямоугольник на заданные значения по осям X и Y: 

<script> 

var square =  

{ 

  x1:2,y1:2,x2:4,y2:5, 

  print_coord:function()//Вывод координат 

  { 

     document.write('x1=',square.x1, 

                    '  y1=',square.y1, 

                    '  x2=',square.x2, 

                    '  y2=',square.y2,'<br>'); 

  }, 

  perimeter:function ()//Периметр 

  { 

    return 2*(Math.abs(square.x2 - square.x1)+Math.abs(square.y2-square.y1)) 

  }, 

  area:function() //Площадь 

  { 

    return Math.abs(square.x2 - square.x1)*Math.abs(square.y2-square.y1) 

  }, 

  move:function(x,y)//Сдвиг прямоугольника 

  { 

    square.x1 = square.x1 + x; 

    square.x2 = square.x2 + x; 

    square.y1 = square.y1 + y; 

    square.y2 = square.y2 + y; 

  } 

} 

square.print_coord(); 

document.write('Периметр прямоугольник: ',square.perimeter(),'<br>'); 

document.write('Площадь прямоугольник: ',square.area(),'<br>'); 

square.move(2,3); 

document.write('После сдвига: '); 

square.print_coord(); 

</script> 

Примечание: обратите особое внимание на описание метода print_coord, который выводит координаты. При вызове document.write параметр в скобках был разбит на несколько строчек. Это вполне допустимо. 

Задачи. 

1. Дополнить объект pupil методами, выводящими на экран различную информацию об ученике. Например, методы выводящие только фамилию и имя; фамилию и возраст; полностью всю информацию. 

2. Создать программу, демонстрирующую свойства и методы объекта Math. 

3. Создать объект круг со свойствами, содержащими координаты центра и радиус. Создать методы вычисляющие длину окружности и площадь. А так же метод вычисляющий находится ли точка внутри круга. 

4. Создать объект прямоугольник со свойствами, которые содержат координаты двух точек, и свойством, которое задаёт угол поворота фигуры относительно оси X. Создать методы вычисляющие длины сторон, периметр и площадь. А так же метод вычисляющий находится ли точка внутри прямоугольника. 

Примеры решений. 

1. 

<script> 

var pupil =  

{ 

  surname:'Куклин', 

  name:'Денис', 

  age:12, 

  birthday: 

  { 

    day:30, 

    month:'октябрь', 

    year:2004, 

  }, 

  //Вывод фамилии и имени 

  print_SN:function() 

  { 

    document.write('Фмилия - ',pupil.surname); 

    document.write(', имя - ',pupil.name,'.<br>'); 

  }, 

  //Вывод фамилии и возраста 

  print_SA:function() 

  { 

    document.write('Фамилия - ',pupil.surname); 

    document.write(', возраст - ',pupil.age,' лет.<br>'); 

  }, 

  //Вывод всей информации 

  print:function() 

  { 

    document.write(pupil.surname,' ',pupil.name,'.'); 

    document.write(' Возраст - ',pupil.age,' лет.'); 

    document.write(' Дата рождения - ' 

                   ,pupil.birthday.day,' ', 

                   pupil.birthday.month,' ', 

                   pupil.birthday.year,'г.<br>'); 

  } 

}; 

pupil.print_SN(); 

pupil.print_SA(); 

pupil.print(); 

</script> 

2. 

<script> 

document.write('<h3>Свойства объекта Math</h3>'); 

document.write('<table border = "1"><tr><td><b>Свойство</b></td><td><b>Значение</b></td><td><b>Описание</b></td></tr>'); 

document.write('<tr><td>Math.E</td><td>',Math.E,'</td><td>Основание натуральных логарифмов</td></tr>'); 

document.write('<tr><td>Math.LN10</td><td>',Math.LN10,'</td><td>Натуральный логарифм числа 10</td></tr>'); 

document.write('<tr><td>Math.LN2</td><td>',Math.LN2,'</td><td>Натуральный логарифм числа 2</td></tr>'); 

document.write('<tr><td>Math.PI</td><td>',Math.PI,'</td><td>Число Пи</td></tr>'); 

//И так далее 

document.write('</table>'); 

document.write('<h3>Методы объекта Math</h3>'); 

document.write('<table border = "1"><tr><td><b>Метод</b></td><td><b>Описание</b></td><td><b>Пример</b></td></tr>'); 

document.write('<tr><td>Math.pow(x,y)</td><td>Возвращает x в степени y</td><td>Math.pow(2,3) = ',Math.pow(2,3),'</td></tr>'); 

document.write('<tr><td>Math.ceil(x)</td><td>Округляет число в сторону большего целого</td><td>Math.ceil(2.3) = ',Math.ceil(2.3),'</td></tr>'); 

document.write('<tr><td>Math.max(<i>аргументы</i>)</td><td>Возвращает максимальный аргумент из переданныхо</td><td>Math.max(2,3,23) = ',Math.max(2,3,23),'</td></tr>'); 

document.write('<tr><td>Math.cos(x)</td><td>Косинус угла x в радианах</td><td>Math.cos(0) = ',Math.cos(0),'</td></tr>'); 

//И так далее 

document.write('</table>');