Объекты. Начало игры

JavaScript простым языком

Вначале объекты могут показаться непонятной и ненужной фигней, но, поверь, это далеко не так. Объекты очень крутые ^_^ и будут выручать тебя не раз. Поэтому, эту тему нужно понять максимально хорошо.

Объекты выглядят следующим образом:

const boy = {
    name: 'Вася',
    age: 12
};

Объект всегда имеет такой вид. После знака = мы должны открыть фигурные скобки {}и весь код писать внутри них.

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

Но объекты были бы не настолько полезны, если бы не было возможности добавить в них методы. Методы – это функции, которые могут выполнять данный объект. Сейчас все объясню, ты удивишься насколько просто это запомнить =)

Сначала, добавлю метод в существующий объект:

const boy = {
    name: 'Вася',
    age: 12,

    sayHello: function() {
        alert('Привет, меня зовут', this.name);
    }
};

Хочу заметить, что после каждого свойства нужно ставить обязательно запятую, как и после каждого метода, иначе будет ошибка.

Что мы можем теперь сделать с этим объектом? Мы можем запросить любое его свойство или метод:

const boy = {
    name: 'Вася',
    age: 12,

    sayHello: function() {
        alert('Привет, меня зовут', this.name);
    }
};

alert('Мое имя', boy.name);
alert('Мой возраст', boy.age);
boy.sayHello(); // выведет alert, который внутри этого \
// метода

alert('Мое имя', boy['name']);
alert('Мой возраст', boy['age']);
boy['sayHello'](); // выведет alert, который внутри этого \
// метода

К свойству или методу можно обращаться через точку, а можно как к элементам массива (о них в следующем уроке). Но, на практике, все-таки, чаще применяют подход вызова через точку. Но у этого вызова есть важный нюанс – свойства и методы должны быть одним словом (без пробелов). Обычно методы имеют название в 2 или 3 слова (как и в нашем случае), поэтому их называют в стиле camelCase, в нашем случае sayHello, а не say hello, или say_hello.

Итак, чем же отличаются свойства от методов и зачем, вообще, это все нужно?

JavaScript – объектно-ориентированный язык. Может ты где-то читал об этом раньше или слышал. Так вот, объектно-ориентированного подхода в программировании придерживаются почти все программисты. Практически все популярные ЯП являются объектно-ориентированными.

Если говорить простыми словами, то это подход при котором всё с чем ты работаешь нужно представлять в виде объектов.

А мы живем с тобой в мире объектов: компьютер или телефон, с которого ты читаешь данный урок является объектом. У него есть свойства: марка, модель, разрешение экрана; у него есть методы (функции): звонить, писать, отправлять/принимать какие-то данные и т.д. и т.п.

Надеюсь ты начинаешь понимать что к чему. В каком-то смысле, данный подход облегчает разработку.

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

Немного практики

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

Итак, что мы знаем о героях из компьютерных игр? У них должны быть минимальные характеристики: здоровье, атака, защита, накопленный опыт, уровень и для того, чтобы он умел ходить, добавим ему в свойства значение координаты, в которой он находится. Ну, и, конечно же, придумаем ему имя. Приступим:

const hero = {
    name: 'jsHero',
    attack: 15,
    defense: 5,
    level: 1,
    experience: 0,
    coordinate: 0
};

Мы получили героя с именем jsHero и прописали ему характеристики, которые в объекте являются свойствами. Героя мы получили, но вот ни ходить, ни драться, не защищаться, да и, вообще, ничего он делать сейчас не умеет. Он просто стоит и всё. Давайте научим его хотя бы ходить.

Не будем усложнять и сделаем так, чтобы наш герой умел ходить только налево и направо. Вспомните игрушку из детства Super Mario:

Будем считать, что значение 0, в свойстве coordinate соответствует самому левому положению героя. Т.е, если герою нужно будет идти вправо, то координата будет каждый шаг увеличиваться на единицу, а влево – уменьшатся на единицу. Итак, создаем методы, которые научат нашего героя ходить:

const hero = {
    name: 'jsHero',
    attack: 15,
    defense: 5,
    level: 1,
    experience: 0,
    coordinate: 0,

    goRight: function() {
       this.coordinate++;
    },

    goLeft: function() {
       this.coordinate--;
    }
};

Теперь наш герой умеет ходить. Для этого нам просто нужно вызвать один из 2-х методов:

hero.goRight(); // для того, чтобы идти вправо 
// (вперед в нашей системе координат)
hero.goLeft(); // для того, чтобы идти влево 
// (назад в нашей системе координат)

Внутри этих методов наверное ты заметил обращение к какой-то непонятной переменной this.coordinate. С помощью this мы можем обращаться к свойствам и методам объекта внутри самого объекта. Разберём:

...
goRight: function() {
   this.coordinate++;
}
...

Чтобы внутри метода goRight обратиться к свойству coordinate этого же объекта нужно обязательно использовать ключевое слово this. Если не сделать этого, то получится неприятный сюрприз в виде ошибки:

...
goRight: function() {
   coordinate++; // ReferenceError: coordinate is not \
   // defined
}
...

Ошибка гласит о том, что переменная coordinate не определена, что и логично. Ведь нигде у нас в коде не существует данной переменной. Существует только одноимённое свойство в объекте и его нужно вызывать только через this.coordinate.

Итак, ходить научили, давайте для закрепления научим героя атаковать и защищаться:

const hero = {
    name: 'jsHero',
    attack: 15,
    defense: 5,
    level: 1,
    experience: 0,
    coordinate: 0,

    goRight: function() {
       this.coordinate++;
    },

    goLeft: function() {
      this.coordinate--;
    },

    hit: function() {
      this.experience += 10;
      alert('Ударил врага');
    },

    blockKick: function() {
      alert('Заблокировал удар');
    }
};

Теперь для атаки используем этот метод:

hero.hit(); // атака

За каждый удар, мы будем начислять очки опыта увеличивая значения свойства experience на 10 единиц.

А для защиты этот:

hero.blockKick(); // защита

Ссылка на живой пример (тык). Попробуй дописать свои методы и свойства. Вызови их и поделись результатами с другими в комментариях.

Итак, подведу небольшой итог.

Свойства

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

Методы

Методы предназначены для того, чтобы что-то сделать со свойствами: как-либо изменить, дополнить, удалить и так далее.

Ключевое слово this

Используется для обращения к свойствам и методам внутри самого объекта.

PreviousDOM-элементы. События. Часть 2 NextМассивы

Last updated 5 years ago

Was this helpful?