Створений нами об'єкт містить дві властивості: firstName і lastName. Ми створили його за допомогою «синтаксису літеральних об'єктів» - тобто, встановивши набір пар ключ-значення в <>. Зверніть увагу, що для кожної пари поставлено двокрапка між ключем і значенням і кома між кожною парою. Відзначимо також, що після останньої пари ключ-значення немає коми - якщо ви випадково поставите кому після останньої пари, то отримаєте помилки в старих браузерах.
Доступ до властивостей
Ми зберігаємо наш об'єкт у змінній з ім'ям person. яка дозволяє легко отримати доступ до властивостей об'єкта, використовуючи нотацію з точкою або з квадратними дужками.
Зауважте, що в нотації з дужками ми використовували рядок в лапках для імені властивості; в нотації з точкою ми просто використовували ім'я властивості без лапок. Нотація з дужками є корисним підходом, якщо, скажімо, пізніше ви зберігаєте ім'я властивості в змінної:
Після створення об'єкта ми можемо змінити його властивості.
методи об'єкта
Методи об'єкта - це просто властивості, значення яких є функціями. Давайте додамо метод .greet () до нашого об'єкту person:
Метод .greet () в даному прикладі отримав в якості аргументу рядок name. Коли ми викликаємо метод, то просто відправляємо йому значення властивості firstName об'єкта person. Якби ми хотіли супер-гнучкий метод .greet (). який може вітати будь-якого, це те що нам потрібно. Але, ймовірно, більше сенсу в тому, що метод .greet () буде вітати конкретну особу.
розуміння this
Усередині методу, а в дійсності всередині будь-якої функції, є доступне нам спеціальне ключове слово this. Воно відноситься до об'єкту, який є контекстом в якому функція була викликана.
Коли ми викликаємо person.greet (). контекстом об'єкта служить сам person. Це означає, що ми можемо використовувати this і отримати доступ до властивості об'єкта person безпосередньо з методу .greet ().
Давайте подивимося, як ми могли б використовувати this в нашому методі.
Не так вже й заплутано, вірно? Плутанина виникає, тому що сенс this може помінятися - як згадувалося раніше, це залежить від контексту, в якому функція була викликана! Розглянемо наступний код:
Увага! некоректний код
Коли ми зберігаємо метод .greet () в змінної sayIt. а потім викликаємо sayIt (). контекст об'єкта змінюється на глобальний об'єкт window. а не об'єкт person. Оскільки у об'єкта window немає властивості firstName. ми отримуємо undefined при спробі отримати до нього доступ.
Що робити розробнику? По-перше, слід знати, що збереження методів об'єкта в змінних може мати непередбачувані наслідки для this. По-друге, пам'ятайте що ви можете зафіксувати значення this на бажане за допомогою методів .call () або .apply () для самої функції.
Обидва методи дуже схожі. Метод .apply () також дозволяє передавати аргументи на функцію, до якої ми звертаємося. Уявіть, що в наш метод .greet () передаються деякі аргументи; ми могли б передати їх за допомогою .call (). ось так:
Ми могли б зробити те ж саме через .apply (). але тоді доведеться передавати аргументи у вигляді єдиного масиву, замість окремих аргументів:
Об'єкти в jQuery
Ми лише поверхово освоїли об'єкти, але тепер знаючи основи ви навчитеся як працювати з об'єктами jQuery. У базовому jQuery ви будете широко використовувати об'єкти, щоб задати параметри конфігурації. Наприклад, ви можете вказати об'єкт і тим самим одночасно змінити кілька властивостей CSS для елемента:
Що стосується this. jQuery, як правило, керує його значенням. У разі обробників подій, this буде посилатися на елемент, до якого прив'язаний обробник; в разі перебору елементів у вибірці, this буде посилатися на поточний елемент. Вам не варто сильно турбуватися про розуміння this під час початкового навчання - це просто хороша штука і пам'ятайте про неї, поки ваше навчання триває.