Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

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

Статьи для сайтов!!!
Создание объекта Создание методов - Доступ через this Цикл for...in - Все свойства объекта

Создание методов объекта - Доступ к объекту из метода через this

Еще об объектах - Создание объекта

Урок №6 Создание методов - Доступ через this

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

В прошлом уроке мы создавали объекты двумя способами и придумывали для них свойства (или значения).

А также рассмотрели 2 способа обращения к свойствам объекта.

Здесь будет идти речь о создании методов для объекта. Методы - это функции объекта (или действия с ним связанные)

Создание методов объекта

Создание методов объекта

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

Но сначала - синтаксис создания метода объекта.

// Создаем объект и указываем свойство
var object = {
property: value,
}

// Создаем метод объекта и указываем действие
object.method = function()
{
document.write();
}

object - имя объекта
property - свойство объекта
value - значение свойства
method - имя метода
function - функция и далее действие...

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

object.method();

object - имя объекта
method - имя метода

<script type="text/javascript">

var light;

/* Создание объекта auto со свойствами brand, year и color */
var auto = {
brand: "Hyundai",
year: 2010,
color: "Мокрый асфальт"
}

/* Добавление объекту auto метода goes */
auto.goes = function()
{
document.write(auto.brand + " едет по шоссе <br>");
light = true;
}

/* Добавление объекту auto метода stand */
auto.stand = function()
{
document.write(auto.brand + " на парковке <br>");
light = false;
}

/* Добавление объекту auto метода onOff */
auto.onOff = function()
{
if (light == true)
document.write(" с ВКЛ-юченными фарами <br>");
else
document.write(" с ВЫКЛ-юченными фарами <br>");
}

/* Добавление объекту auto метода about */
auto.about = function()
{
document.write("<p> " + auto.brand + " " + auto.year + " года цвета " + auto.color)
}

/* Обращение к методам объекта */
auto.goes();
auto.onOff();
auto.stand();
auto.onOff();

auto.about();

</script>

Создание методов бъекта

Hyundai едет по шоссе
с ВКЛ-юченными фарами
Hyundai на парковке
с ВЫКЛ-юченными фарами

Hyundai 2010 года цвета Мокрый асфальт

Доступ к объекту из метода через this

Доступ к объекту из метода через this

При работе с методами и свойствами одного объекта (как в примере выше) можно не указывать имя объекта, а (как часто делают) использовать ключевое слово this.

Или такая формулировка....

Для доступа к текущему объекту из метода используется ключевое слово this.

// Создаем объект и указываем свойство
var object = {
property: value,
}

// Создаем метод объекта. Доступ к объекту через: 1. его имя и 2. через слово this
object.method = function()
{
document.write(object.property);

document.write(this.property);
}

object - имя объекта
property - свойство объекта
value - значение свойства
method - имя метода
function - функция и далее действие...

Вернемся к предыдущему примеру, где мы получали доступ к объекту auto (обращались к его свойствам) непосредственно через его имя. Только теперь воспользуемся ключевым словом this.

<script type="text/javascript">

var light;

/* Создание объекта auto со свойствами brand, year и color */
var auto = {
brand: "Hyundai",
year: 2010,
color: "Мокрый асфальт"
}

/* Добавление объекту auto метода goes */
auto.goes = function()
{
document.write(this.brand + " едет по шоссе <br>");
light = true;
}

/* Добавление объекту auto метода stand */
auto.stand = function()
{
document.write(this.brand + " на парковке <br>");
light = false;
}

/* Добавление объекту auto метода onOff */
auto.onOff = function()
{
if (light == true)
document.write(" с ВКЛ-юченными фарами <br>");
else
document.write(" с ВЫКЛ-юченными фарами <br>");
}

/* Добавление объекту auto метода about */
auto.about = function()
{
document.write("<p> " + this.brand + " " + this.year + " года цвета " + this.color)
}

/* Обращение к методам объекта */
auto.goes();
auto.onOff();
auto.stand();
auto.onOff();

auto.about();

</script>

Доступ к объекту из метода через this

Hyundai едет по шоссе
с ВКЛ-юченными фарами
Hyundai на парковке
с ВЫКЛ-юченными фарами

Hyundai 2010 года цвета Мокрый асфальт

Результат тот же.

Способы обращения к свойствам объекта - Нюансы

Способы обращения к свойствам объекта - Нюансы

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

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

Далее рассмотрим пример...

Есть объект со свойствами: попробуем обратиться к одному из них разными способами.

<script type="text/javascript">

var motor = {
value_1: 1600,
value_2: 1800,
value_3: 2000
}

// 1. Обращаемся к свойству двумя способами:

document.write(motor.value_1 + "<br />");
document.write(motor["value_1"] + "<br />");

// 1. Обращаемся к свойству через переменную двумя способами:

var index = "value_1"; /* имя свойства содержится в переменной */

document.write(motor.index + "<br />");
document.write(motor[index]);

</script>

Прокомментируем этот пример:

  • 1-ый момент - Обращаемся к свойству объекта, указывая непосредственно имя свойства.

    При этом работают оба способа обращения к свойствам!!!

  • 2-ой момент - Обращаемся к свойству объекта через переменную, в которой содержится имя свойства.

    При этом работает только 2-ой способ обращения - через квадратные скобки!!! Так как при этом:

    document.write(motor.[index]); javascript подставит значение "value_1" переменной index. То есть в итоге свойство value_1.

    В то время, как в 1-ом случае document.write(motor.index); javascript будет искать свойство index в объекте motor, а его не существует. В результате мы видим undefined.

А теперь усложним предыдущий пример. И реализуем следующее:

Допустим, что цена автомобиля складывается из произведения какого-то «СТАНДАРТНОГО КОЭФФИЦИЕНТА» на объем его двигателя.

Есть три неизменных значения объема двигателя 1600, 1800 и 2000 куб.см.

И есть «КОЭФФИЦИЕНТ» - число, например, 500 (но его можно менять).

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

А метод объекта вычислял бы стоимость автомобиля в зависимости от указанного «КОЭФФИЦИЕНТА» и выбранного значения объема.

Метод должен содержать 2 параметра.

<script type="text/javascript">

var motor = {
value_1: 1600,
value_2: 1800,
value_3: 2000
}

// 1. Создаем метод price_1 - Функция имеет один параметр...
motor.price_1 = function(Standart)
{
document.write("Цена автомобиля " + Standart * this.value_1 + " рублей <br />") /* Способ обращения к свойству value_1 через точку */
}
motor.price_1(500);

 

// 2. Создаем метод price_2 - Функция имеет один параметр...
motor.price_2 = function(Standart)
{
document.write("Цена автомобиля " + Standart * this['value_2'] + " рублей <br />"); /* 2-ой способ обращения к свойству value_2 - его название заключается в квадратные скобки */
}
motor.price_2(500);

 

// 3. Создаем метод price_3 - Функция имеет два параметра...
motor.price_3 = function(Standart,index)
{
document.write("Цена автомобиля " + Standart * this[index] + " рублей <br />")
}
motor.price_3(500,'value_3');

</script>

Прокомментируем этот пример:

  • 1-е два метода - price_1 и price_2 объекта motor были созданы для наглядности. В них работает функция с одним параметром: Standart - «СТАНДАРТНЫМ КОЭФФИЦИЕНТОМ», который может иметь любое значение.

    При этом работают оба способа обращения к свойствам!!!

  • 3-ий метод - price_3 объекта motor содержит функцию с двумя параметрами: Standart и index. При этом переменной index присваивается имя одного из свойств объекта motor - в данном случае 'value_3'.

При этом будет работать только 2-ой способ обращения к свойствам объекта - через квадратные скобки!!!

Главная Изучаем JavaScript Создание методов - Доступ через this Цикл for...in - Все свойства объекта

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

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

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

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

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