Добавление методов в объект - Свойства и методы одного объекта

Далее на странице...

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

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

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

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

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

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

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

Рассмотрим, как добавить метод в объект 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.