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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

object.method();

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

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

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.

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

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

document.write(this.property);
}

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

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

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

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

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

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

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

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

1600
1600
undefined
1600

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

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 параметра.

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

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>

Результат

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

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

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