В этой статье мы научимся создавать и использовать объекты в рамках объектно-ориентированного программирования. ООП — это способ проектирования и написания кода, когда все важные части программы являются объектами. Например, если вы пишите видеоигру «гонки», вы можете воспользоваться ООП для программирования объекта «машина», а затем создать множество таких объектов с одинаковым набором свойств и одинаковой функциональностью.
Давайте вспомним как работать с объектами и добавим к ним новые методы.
Объекты состоят из свойств, которые представляют собой пары «ключ-значение». Например, в объекте dog, есть свойства — name, legs, isAwesome.
var dog = {
name: «Оладушек»,
legs: 4,
isAwesome: true
};
К свойства созданного объекта можно обращаться следующим образом:
dog.name;
ответом будет
«Оладушек»
Кроме того, свойства можно добавлять, например вот так:
dog.age = 6;
Добавим к нашему объекту новый метод.
Мы уже пользовались методом join, чтобы добавить элемент к массиву. Давайте попробуем создать свой метод.
dog.bark = function( ){
console.log («Гав!» Меня зовут» + this.name + «!»);
};
dog.bark ( );
Гав! Меня зовут Оладушек!
Мы добавили к объекту dog свойство bark и задали в качестве его значения функцию.
Ключевое слово this
Ключевое слово this можно использовать в теле метода, чтобы обратиться к объекту, для которого этот метод вызывается. this.name — это свойство dog.name.
Используем один метод с разными объектами.
Давайте создадим функцию speak, чтобы затем использовать её как метод с разными объектами. В случае вызова для какого-нибудь объекта метод speak будет обращаться к имени объекта (this.name) и звуку, которое издает животное
(this.sound), чтобы вывести в консоль сообщение.
В результате вызов через консоль выдает такой результат:
Создание объектов при помощи конструкторов
В JS конструктор — это функция, которая создает объекты, давай им набор заранее определенных свойств и методов. Задав конструктор, вы можете создавать любое количество одинаковых объектов. Чтобы попробовать его в деле, напишем основу игры «Гонки», где используем конструктор для создания парка машин с одинаковыми базовыми свойствами.
При каждом вызову конструктор создает объект, добавляя ему нужные свойства. Если для вызовы обычной функции мы указывали ее имя и следом круглые скобки, то для вызова конструктора используется ключевое слово new (оно сообщает JS, что вы собираетесь использовать конструктор), а следом — имя конструктора и скобки.
var car = new Car (100, 200)
(Большинство программистов называют конструкторы с заглавной буквы, чтобы отличать их от обычной функции)
Создаем конструктор Car
Конструктор Car будет добавлять свойства x и y. Мы будем использовать их, как координаты для перемещения машины. Создадим html файл, назовем его car.html.
функция car, которая принимает два аргумента. При вызове конструктора будет создан новый объект со свойствами x и y, значения которых соответствуют переданным аргументам.
Рисуем автомобиль.
Получается:
Настройка объектов через прототипы.
Прототипы JS — это механизм, который упрощает использование общей функциональности (то есть методов) разными объектами. У всех конструкторов есть свойство prototype, к которому можно добавлять методы; любой метод, добавленный к свойству prototype, будет доступен всем объектам, которые созданы при помощи этого конструктора.
Car.prototype.draw = function ( ) {
// тело метода
}
Изменим наш код с помощью прототипа:
