Об'єкти JavaScript

Як виявилося, більшість з чим ми працюємо в JavaScript є об'єктом — насправді, є тільки п'ять типів значень, які не є об'єктами:

• рядки (текст);
• логічні (true/false);
• числа;
• undefined;
• null.

Ці значення називаються примітивами, але навіть деякі з них можна розглядати як би вони були об'єктами — докладніше про це дізнаєтеся за хвилину. Але що таке об'єкт? Давайте подивимося на прикладі простого об'єкта:

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер' };

Створений нами об'єкт містить дві властивості: firstName та lastName. Ми створили його за допомогою «синтаксису літеральних об'єктів» — тобто, встановивши набір пар ключ-значення {}. Зверніть увагу, що для кожної пари поставлено двокрапку між ключем і значенням і кома між кожною парою. Зазначимо також, що після останньої пари ключ-значення немає коми — якщо ви випадково поставите кому після останньої пари, то отримайте помилки в старих браузерах.

Доступ до властивостей

Ми зберігаємо наш об'єкт у змінній з ім'ям person, яка дозволяє легко отримати доступ до властивостей об'єкта, використовуючи нотацію з точкою або квадратними дужками.

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер' }; console.log( 'Ім'я: ' + person.firstName); //нотація з точкою console.log( 'Прізвище: '+ person[ 'lastName' ]); //нотація з квадратними дужками

Зверніть увагу, що в нотації з дужками ми використовували рядок у лапках для імені властивості; у нотації з точкою ми використовували ім'я властивості без лапок. Нотація з дужками є корисним підходом, якщо, скажімо, пізніше ви зберігаєте ім'я властивості в змінній:

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер '}; var prop='lastName'; console.log( 'Прізвище: ' + person[ prop ]);

Після створення об'єкта ми можемо змінити його властивості.

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер'}; person.firstName='Бін'; person.lastName='Альман'; console.log( 'Ім'я: ' + person.firstName); console.log( 'Прізвище: ' + person.lastName);

Цей аспект JavaScript є одночасно благословенням і прокляттям. Це означає, що об'єкти неймовірно гнучкі, але також означає, що немає «конфіденційності». Будь-який код може легко переписати значення якості будь-якого об'єкта, до якого він має доступ. Це ще одна причина, чому важливо зберігати змінні за межами глобальної області видимості — хіба це нормально, коли інший код їх змінює.

Методи об'єкта

Методи об'єкта — це властивості, значення яких є функціями. Додайте метод .greet() до нашого об'єкта person:

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер', greet : function(name) { console.log( 'Привіт, ' + name); } 
}; person.greet( person.firstName);

Метод .greet() в даному прикладі отримав як аргумент рядок name. Коли ми викликаємо метод, то просто надсилаємо йому значення властивості firstName об'єкта person. Якби ми хотіли супер-гнучкий метод .greet(), який може вітати будь-кого, це те, що нам потрібно. Але, мабуть, більше сенсу в тому, що метод .greet() вітатиме конкретну особу.

Розуміння this

Усередині методу , а насправді всередині будь-якої функції є доступне нам спеціальне ключове слово this. Воно відноситься до об'єкта, який є контекстом, в якому функція була викликана.

Коли ми викликаємо person.greet(), контекстом об'єкта служить сам person. Це означає, що ми можемо використовувати this і отримати доступ до якості об'єкта person безпосередньо з методу .greet().

Розуміння this може неймовірно заплутати нових розробників JavaScript і вас має втішити що jQuery в основному робить так, що вам поки що і не потрібно розуміти. Однак, обговорення об'єктів і методів не є повним, якщо взагалі не згадати про this, хоча б небагато. Якщо цей розділ вас бентежить, то сміливо пропускайте його і повертайтеся до нього коли будете готові.

Давайте подивимося, як ми могли б використовувати this нашому методі.

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер', greet : function() { console.log( 'Привіт, ' + this.firstName); } 
}; person.greet();

Не так вже й заплутано, вірно? Плутанина виникає, тому що сенс this може змінитися — як згадувалося раніше, це залежить від контексту, в якому функція була викликана! Розглянемо наступний код:

Увага! Некоректний код

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер', greet : function() { console.log( 'Привіт, ' + this.firstName); } 
}; var sayIt=person.greet; //зберігаємо метод змінної sayIt(); //виводить: 'Привіт, undefined' — ой-ой

Коли ми зберігаємо метод .greet() у змінній sayIt, а потім викликаємо sayIt(), контекст об'єкта змінюється на глобальний об'єкт window, а не об'єкт person. Оскільки об'єкт window не має властивості firstName, ми отримуємо undefined при спробі отримати до нього доступ.

Що робити розробнику? По-перше, слід знати, що збереження методів об'єкта змінних може мати непередбачувані наслідки для this. По-друге, пам'ятайте, що ви можете зафіксувати значення this на бажане за допомогою методів .call() або .apply() для самої функції.

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер', greet : function() { console.log( 'Привіт, ' + this.firstName); } 
}; var sayIt=person.greet; sayIt.call( person);

Обидва методи дуже схожі. Метод .apply() також дозволяє передавати аргументи у функцію, до якої ми звертаємось. Уявіть, що наш метод .greet() передаються деякі аргументи; ми могли б передати їх за допомогою .call(), так:

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер', greet : function(greeting, punctuation) { console.log( greeting + ', ' + this.firstName + punctuation); } 
}; var sayIt=person.greet; sayIt.call( person, 'Привіт', '!!!');

Ми могли б зробити те саме через .apply(), але тоді доведеться передавати аргументи у вигляді єдиного масиву замість окремих аргументів:

<code data-language="javascript">var person={ firstName : 'Баз', lastName : 'Сендер', greet : function(greeting, punctuation) { console.log( greeting + ', ' + this.firstName + punctuation); } 
}; var sayIt=person.greet; sayIt.apply( person, [ 'Привіт', '!!!' ]);

Докладніше про ці методи розповідається в документації на MDN про .call() та apply().

Об'єкти в jQuery

Ми лише поверхово освоїли об'єкти, але тепер знаючи основи ви навчитеся, як працювати з об'єктами jQuery. У базовому jQuery ви широко використовуватимете об'єкти, щоб задати параметри конфігурації. Наприклад, ви можете вказати об'єкт і цим одночасно змінити кілька властивостей CSS для елемента:

<code data-language="javascript">$('#main').css({ color: 'red' , border: '1px solid blue' });

Щодо this, jQuery, як правило, керує його значенням. У разі обробки подій, this буде посилатися на елемент, до якого прив'язаний обробник; у разі перебору елементів у вибірці, this посилатиметься на поточний елемент. Вам не варто сильно турбуватися про розуміння this під час початкового навчання — це просто хороша штука і пам'ятайте про неї, поки ваше навчання триває.

Дальнє читання

Посібник із JavaScript на MDN докладно розглядає такі теми як прототипи об'єктів, конструктори та видалення властивостей об'єктів.