JavaScript. Объектно-ориентированное программирование. (ООП)

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

Статья про объекты

Давайте вспомним как работать с объектами и добавим к ним новые методы.

Объекты состоят из свойств, которые представляют собой пары «ключ-значение». Например, в объекте 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 ( ) {

// тело метода

}

Изменим наш код с помощью прототипа:

 

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Анти-спам: выполните заданиеWordPress CAPTCHA