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

Таки едем дальше. На повестке сегодняшнего дня – объедки... Т.е., объекты.

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

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

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

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

Домашка

Домашнее задание сегодня максимально простое. Под этим постов, в самом телеграмм-канале будет ссылка на комментарии.

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

Мы будем развивать игру, чтобы в итоге можно было действительно походить героем, чтобы можно было атаковать врагов, прокачиваться и так далее =)

Если ты ЗА эту идею, пожалуйста, напиши об этом в комментариях к этому посту в самом телеграмме, а не здесь(не в Teletype).

P.S. Если появились вопросы, задавай их там же, я всегда рад помочь и ответить на все интересующие вопросы.