«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих
 

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

Но объекты могут быть активны, то есть выполнять какие-либо действия, операции. В объекты можно добавлять функции, которые называются методами.



Добавление метода в объект

Рассмотрим, как добавить метод в объект JavaScript?

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

Фрагмент кода

<script type="text/javascript">

/* объект Автомобиль fiat */
var fiat = {
make: "Fiat",
model: "500",
year: 1957,
color: "Medium Blue",
passengers: 2,
convertible: false,
mileage: 88000,

/* метод drive - функция эмулирующая движения автомобиля */
drive: function() {
document.write("Went went!");
/* Поехали, поехали! */
}

};

document.write(fiat.color + "<br />");
fiat.drive(); /* вызываем метод drive */

</script>

Результат

Добавляем метод в объект

Результат

Medium Blue
Went went!

Комментарии:

  • В объекте fiat для свойства drive была определена функция:
    drive: function() {document.write("Went went!");}

  • функции, определяемые в объектах, называются методами, то есть drive - это метод объекта fiat;

  • Далее вызываем метод drive, как функцию, указывая после имени метода круглые скобки.

  • Обратите внимание: обращение к методам объекта происходит точно так же, как и к его свойствам. Сначала указывается имя объекта, затем через точку имя метода или свойства (разница лишь в том, что после имени метода ставятся круглые скобки).

Добавляем еще методы - Переменная не определена

Продолжим работать с объектом «Автомобиль», к которому добавим еще методы и усовершенствуем метод drive.

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

Фрагмент кода

<script type="text/javascript">

/* объект Автомобиль fiat */
var fiat = {
make: "Fiat",
model: "500",
year: 1957,
color: "Medium Blue",
passengers: 2,
convertible: false,
mileage: 88000,

started: false, /* Свойство started - Двигатель заглушен */

/* Метод запуска двигателя */
start: function(){
started = true;
},

/* Метод остановки двигателя */
stop: function(){
started = false;
},


/* Метод движения или остановки автомобиля */
drive: function() {
if(started){
document.write("The motor started. Went, went... <br />")
}
else{
document.write("The car STOPped...");
}
}
}

document.write(fiat.color + "<br />");
fiat.drive();

</script>

Результат

Переменная started (свойство объекта) внутри метода не определена

Результат

Medium Blue

ReferenceError: started is not defined

Комментарии к коду...

  • Здесь для объекта fiat добавлено свойство started, которое принимает значение false. Условно это означает, что изначально автомобиль не заведен.

  • Далее создан метод запуска двигателя start, где started принимает значение true. И метод остановки двигателя stop, где started принимает значение false.

  • Методом drive объекта является усовершенствованным. Для него составлено условие, согласно которому: если мотор запущен, то есть если started = true, то мы увидим на экране: The motor started. Went, went... (Мотор запущен. Поехали, поехали...).

    Иначе, если started = false, то Javascript выдаст: The car STOPped (Машина остановилась...).

  • Далее мы обращаемся к одному из свойств объекта fiat.color - цвет автомобиля и вызываем метод drive fiat.drive(); (методы start и stop пока оставим без внимания).

В результате, в окне браузера, мы увидим лишь строку Medium Blue - это значение свойства color объекта fiat.

Но почему не сработал метод drive? Ведь изначально свойство started объекта fiat принимает значение false. Следовательно, по логике, обратившись к методу drive, мы должны увидеть The car STOPped.

Если заглянуть в Веб-консоль браузера (в Firefox это путь Инструменты - Веб-разработка - Веб-консоль или комбинация Ctrl+Shift+K), то мы увидим: ReferenceError: started is not defined. Это значит, что переменная started не определена. Далее разберемся, почему?

Свойства и методы одного объекта - Ключевое слово this

Итак, внутри метода мы имеем неопределенную переменную started. Нужно разобраться: как метод drive видит свойство started?

1) Для метода drive, как для функции, свойство started - это переменная, которая должна быть где-то определена. Но где?

2) Это не локальная и не глобальная переменная (см. область видимости переменных функции). И это не параметр функции.

3) Дело в том, что started это свойство объекта fiat, а не какая-либо переменная, как ее видит метод (функция) drive.

Нужно как-то сообщить Javascript, что свойство started как и сам метод drive, внутри которого оно используется, относиться к тому же объекту.

Для этого существует ключевое слово this. Об этом уже шла речь в теоретической части.

Фрагмент кода

<script type="text/javascript">

/* объект Автомобиль fiat */
var fiat = {
make: "Fiat",
model: "500",
year: 1957,
color: "Medium Blue",
passengers: 2,
convertible: false,
mileage: 88000,

started: false,

start: function(){
this.started = true;
},

stop: function(){
this.started = false;
},

drive: function() {
if(this.started){
document.write("The motor started. Went, went... <br />")
}
else{
document.write("The car STOPped... <br />");
}
}
}

document.write(fiat.color + "<br />");
fiat.drive(); /* Изначально двигатель заглушен - The car STOPped */
fiat.start();
/* Запуск двигателя */
fiat.drive();
/* The motor started. Went, went... */
fiat.stop();
/* Остановка двигателя */
fiat.drive();
/* The car STOPped */

</script>

Результат

Используем ключевое слово this Результат

Medium Blue
The car STOPped...
The motor started. Went, went...
The car STOPped...

Комментарии к коду...

  • Здесь при помощи ключевого слова this было сообщено интерпретатору Javascript о том, что started - является свойством конкретно этого объекта, чтобы интерпретатор не думал, что мы ссылаемся на переменную.

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

Теперь все в порядке: можно приводить автомобиль в движение после запуска двигателя или после прекращения его работы останавливать машину.

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

this - указывает на Объект

Следует дать пояснения и разобрать один немаловажный момент, связанный с ключевым словом this.

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

1) Объект fiat содержит метод start, в теле которого используется ключевое слово this.

start: function(){
this.started = true;
}

2) Далее мы вызываем метод start:

fiat.start();

При этом ключевое слово this в теле метода start указывает на объект fiat.

Нужно постараться в это вникнуть и понять. Для общего понимания того, как работает JavaScript.

Читайте также...

Отзывы и комментарии:

Добавил(а): Давид
Дата: 2019-08-24

Спасибо! Хорошее объяснение, классный сайт окунулся в нулевые)

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Тематические публикации

Задачи по JavaScript
Популярные заметки
Последние заметки