Далее на странице...
В этой заметке мы создавали объекты двумя способами и придумывали для них свойства (или значения).
Также были рассмотрены 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.
// Создаем объект и указываем свойство
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
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 параметра.
<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-ой способ обращения к свойствам объекта - через квадратные скобки.
