Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Дизайн сайтов
Передача объекта в функцию Методы объекта - Ключевое слово this 99 бутылок пива

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

Количество просмотров: 400

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

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

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

Как добавить метод в объект?

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

<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("Zoom zoom!");}
  • функции, определяемые в объектах, называются методами, то есть 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>

Переменная (свойство объекта) внутри метода не определена - Результат...

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. Это не локальная и не глобальная переменная (см. Область видимости переменных функции в JavaScript). И это не параметр функции.

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 указывается с точкой перед именем свойства, которое используется внутри метода текущего объекта.

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

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

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

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

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

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

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

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

fiat.start();

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

Нужно постараться в это вникнуть и понять.

Частота просмотра уроков
JavaScript
Передача объекта в функцию Методы объекта - Ключевое слово this 99 бутылок пива

Ваши комментарии:

Комментариев нет...

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

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru