From daa1a2aff136fa9da1fcc97d7da97a2036fabc77 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:47 +0100 Subject: unslug uk: move --- .../guide/details_of_the_object_model/index.html | 760 +++++++++++++++++ .../guide/dokladno_pro_objectnu_model/index.html | 760 ----------------- .../guide/expressions_and_operators/index.html | 925 +++++++++++++++++++++ .../index.html" | 925 --------------------- 4 files changed, 1685 insertions(+), 1685 deletions(-) create mode 100644 files/uk/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html create mode 100644 files/uk/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 "files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" (limited to 'files/uk/web/javascript/guide') diff --git a/files/uk/web/javascript/guide/details_of_the_object_model/index.html b/files/uk/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..5e756710dd --- /dev/null +++ b/files/uk/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,760 @@ +--- +title: Докладно про об'єктну модель +slug: Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model +tags: + - Guide + - Intermediate + - JavaScript + - Object +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
+ +

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

+ +

Вміст цього розділу розрахований на те, що ви вже, принаймні, дещо знайомі з мовою JavaScript, і застосовували його функції для створення простих об'єктів.

+ +

Мови з класовою та прототипною моделлю

+ +

Об'єктно-орієнтовані мови з класовою моделлю, такі як Java і C++, засновані на концепції двох окремих сутностей: класів та екземплярів.

+ + + +

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

+ +

Задання і визначення класу

+ +

У мовах із класовою моделлю, класс задається у окремому визначенні класу. У цому визначенні можна вказати особливі методи, що називаються конструкторами, щоб створити екземпляри класу. Метод-конструктор може задати початкові значення властивостей екземпляру, і виконати якісь інші задачі прямо у момент створення. Для створення екземплярів застосовується оператор new у комбінації із методом-конструктором.

+ +

JavaScript слідує подібній моделі, проте не має відокремленого від конструктора визначення класу. Натомість, ви одразу задаєте функцію-конструктор, щоб створити об'єкти із відповідним початковим набором властивостей та значень. Будь-яка JavaScript-функція може використовуватись як конструктор. Для створення нового об'єкту так само використовується оператор new із фукнцією-конструктором.

+ +

 

+ +
+

Зауважте, що ECMAScript 2015 вводить визначення класу:

+ +
+

Класи JavaScript, введені стандартом ECMAScript 2015, є лише синтаксичним цукром поверх уже наявного у JavaScript прототипного наслідування. Тобто ці класи не вводять у JavaScript нової моделі наслідуваня.

+
+
+ +

 

+ +

Дочірні класи і наслідування

+ +

У мові з класовою моделлю наслідкування ієрархія класів створюється через визначення класу. У цьому визначенні можна окремо вказати, що новий клас являється дочірнім стосовно уже наявного класу. Дочірній клас отримає всі властивості батьківського і може привнести нові (або ж змінити успадковані). Наприклад, припустимо, що клас Employee включає в себе лише поля name та dept, і Manager - це дочірній клас Employee, що додає властивість reports. У цьому випадку, екземпляр класу Manager матиме три властивості: name, dept, та reports.

+ +

JavaScript реалізовує наслідування дещо інакше. Він дозволяє пов'язувати об'єкт-прототип із будь-якою фукнцією-конструктором. Тобто ви можете точнісінько реалізувати приклад Employee — Manager, проте використовуючи дещо інші терміни. Спершу ви визначаєте конструктор Employee, задаючи властивості name та dept. Далі ви визначаєте фукнцію-конструктор Manager, що викликає конструктор Employee та задає властивість reports. Насамкінець, призначаєте новий об'єкт, отриманий з Employee.prototype в якості прототипу конструктора Manager. Надалі, при створенні екземпляра Manager він наслідує властивості name і dept з об'єкту Employee.

+ +

Додавання і видалення властивостей

+ +

Зазвичай у мовах із класовою моделлю наслідування класи створюються під час компіляції, а екземпляри класів - під час компіляції чи виконання програми. Після того, як його було визначено, не можна змінити кількість або тип його властивостей. Однак, у JavaScript можна додавати чи видаляти властивості будь-якого об'єкту безпосередньо під час виконання програми. Якщо додати нову властивість до об'єкту-прототипу певного набору об'єктів, вони всі також отримають цю властивість.

+ +

Підсумок відмінностей класової і прототипної моделей

+ +

Наступна таблиця надає короткий підсумок цих відмінностей. Решта розділу розкриває деталі застосування JavaScript-конструкторів і прототипів для створення ієрархії об'єктів, та порівнює це із тим, як би це робилось у Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Порівняння мови із класовою моделлю наслідування (Java) і прототипною (JavaScript)
Класова модель (Java)Прототипна модель (JavaScript)
Клас та його екземпляр - окремі сутності.Всі об'єкти можуть наслідувати інші об'єкти.
Визначення класу описує його; екземпляри створюються методами-конструкторами.Функції-конструктори і описують, і створюють набори об'єктів.
Окремий об'єкт створюється оператором new.Так само.
Ієрархія об'єктів формується при визначенні класів, шляхом задання нащадків для уже наявних класів.Ієрархія об'єктів формується шляхом призначення об'єкту прототипом функції-конструктора.
Властивості наслідуються згідно ланцюжка класів.Властивості наслідуються згідно ланцюжка прототипів.
Визначення класу задає всі властивості всіх екземплярів класу. Неможливо динамічно додавати властивості під час виконання програми.Функція-конструктор чи прототип задають лише початковий набір властивостей. Можна додавати чи видаляти властивості як окремого об'єкту, так певного їх набору.
+ +

Приклад із робітником "Employee"

+ +

Надалі у розділі ієрархія робітників, що показана на наступному зображенні.

+ +
+
+

Проста ієрархія об'єктів, сформована із наступних елементів:

+ +

+
+ +
+
    +
  • Employee має поля name (із порожнім рядком в якості значення за замовчуванням) та dept (у якого значення за замовчуванням — "general").
    • +
  • Manager заснований на Employee. Він додає властивість reports  (за замовчуванням містить порожній масив для об'єктів Employee).
    • +
  • WorkerBee також заснований на Employee. Він додає властивість projects (за замовчуванням містить порожній масив, призначений для рядків).
    • +
  • SalesPerson заснований на WorkerBee. Він додає властивість quota (за замовчуванням — число 100). Він також перевизначае властивість dept, надаючи їй нове значенням "sales" (що означає, що всі SalesPerson відносяться до одного відділу).
    • +
  • Engineer заснований на WorkerBee. Він додає властивість machine (значення за замовчуванням — порожній рядок) і перевизначає властивість dept, задаючи їй значення "engineering".
    • +
+
+
+ +

Створення ієрархії

+ +

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

+ +

Цей розділ показує, як використовувати дуже прості (і відносно негнучкі) визначення, і таким чином демонструє, як отримати робочий механізм наслідування. У цих визначеннях не можна задати жодного значення при створенні об'єкту — він отримає властивості із значеннями за замовчуванням, які можна буде змінити пізніше.

+ +

У реальному додатку ви б, ймовірно, визначали конструктор, що дозволяє задавати значення в момент створення об'єкту (докладніше у Більш гнучкі конструктори). А наразі ці прості визначення покажуть, як загалом відбувається наслідування.

+ +

Наступні визначення Employee у Java та JavaScript ідентичні. Єдина відмінність — у Java необхідно явно вказувати тип кожної властивості, на відміну від JavaScript (так як Java — мова із сильною типізацією, а JavaScript — із слабкою).

+ +
+

JavaScript

+ +
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+ +


+ Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

Визначення Manager і WorkerBee показують різницю у заданні батьківського об'єкту. У JavaScript ви додаєте екземпляр прототипу в якості значення поля prototype функції-конструктора, а потім перевизначаєте prototype.constructor, щоб це поле вказувало на функцію-конструктор. Ви можете це зробити в будь-якому місці після визначення конструктора. У Java надклас задається всередині визначення класу, і його ніяк не можна змінити зовні визначення класу.

+ +
+

JavaScript

+ +
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+Manager.prototype.constructor = Manager;
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+WorkerBee.prototype.constructor = WorkerBee;
+
+ +


+ Java

+ +
public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

 

+ +

Визначення Engineer та SalesPerson створюють об'єкти, що наслідуються вже від WorkerBee, а, отже, і від Employee. Об'єкти цих типів мають властивості всіх об'єктів вище у ланцюжку наслідування. Надодачу, ці визначення перевизначають успадковані значення поля dept, змінюючи їх відповідно до нового типу.

+ +
+

JavaScript

+ +
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+SalesPerson.prototype.constructor = SalesPerson;
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+Engineer.prototype.constructor = Engineer;
+
+ +


+ Java

+ +
public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+
+
+ +

Таким чином, ви можете створювати екземпляри об'єктів із уже заданими значеннями для своїх властивостей. Наступна схема ілюструє застосування цих JavaScript-визначень для створення нових об'єктів, і демонструє значення їх властивостей.

+ +
+

Зауважте, що: термін екземпляр має специфічний технічний зміст у мовах із класовою моделлю. У цих мовах екземпляр являється окремою реалізацією класу і корінним чином відрізняється від його визначення. У JavaScript, "екземпляр" не має такого особливого змісту, бо сам JavaScript не має такої значної відмінності класів від їх реалізацій. Однак, у контексті JavaScript, "екземпляр" може неформально позначати об'єкт, створений певною функцією-конструктором. Тому, згідно наступного прикладу, можна неформально стверджувати, що jane є екземпляром класу Engineer. Так само, хоча терміни предок, нащадок, дочірній і батьківський класи не мають формального смісту в JavaScript, їх можна застосовувати для позначення об'єктів, що знаходяться вище чи нижче у ланцюжку прототипів.

+
+ +

Створення об'єктів за допомогою простих визначень

+ +
+

Ієрархія об'єктів

+ +

Наступна ієрархія створена за допомогою коду у правій частині.

+ +

+ +

Окремі об'єкти = Jim, Sally, Mark, Fred, Jane, etc.
+ "Екземпляри", створені конструктором

+ +
var jim = new Employee;
+// Дужки можна опустити, якщо
+// конструктор не приймає аргументів.
+// jim.name має значення ''
+// jim.dept має значення 'general'
+
+var sally = new Manager;
+// sally.name має значення ''
+// sally.dept має значення 'general'
+// sally.reports має значення []
+
+var mark = new WorkerBee;
+// mark.name має значення ''
+// mark.dept має значення 'general'
+// mark.projects має значення []
+
+var fred = new SalesPerson;
+// fred.name має значення ''
+// fred.dept має значення 'sales'
+// fred.projects має значення []
+// fred.quota має значення 100
+
+var jane = new Engineer;
+// jane.name має значення ''
+// jane.dept має значення 'engineering'
+// jane.projects має значення []
+// jane.machine має значення ''
+
+
+ +

Властивості (поля) об'єкту

+ +

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

+ +

Наслідування властивостей

+ +

Припустимо, такою інструкцією ви створили екземпляр WorkerBee — об'єкт mark:

+ +
var mark = new WorkerBee;
+
+ +

Коли JavaScript бачить оператор new, він створює загальний об'єкт і неявно встановлює WorkerBee.prototype значенням внутрішньої властивості [[Prototype]], і передає цей новий об'єкт як значення this до фукнції-конструктора WorkerBee. Внутрішня властивість [[Prototype]] визначає ланцюжок прототипів для виводу значень полів. Коли ці властивості задані, JavaScript повертає новий об'єкт, а інструкція присвоєння задає його в якості значення змінної mark.

+ +

Описаний процес явно не встановлює значення об'єкту mark для властивостей (локальні значення), які mark наслідує з ланцюжка прототипів. Коли ви запитуєте значення властивості, JavaScript в першу чергу перевіряє наявність цього значення у об'єкті, і повертає його, якщо знаходить. Якщо ж ні, JavaScript перевіряє весь ланцюжок прототипів (за допомогою властивості [[Prototype]]). Якщо об'єкт у ланцюжку має таку властивість - буде повернуто її значення (або повідомлення, що об'єкт не має такої властивості, якщо її все-таки не було знайдено). Таким чином, об'єкт mark має наступні властивості і значення:

+ +
mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+
+ +

З конструктора Employee об'єкту mark призначено локальні значення для властивостей name та dept, а з конструктора WorkerBee — значення властивості projects. Таким чином ми отримуємо наслідування властивостей і їх значень у JavaScript. Деякі тонкощі цього процесу додатково висвітлені у Іще раз про наслідування властивостей.

+ +

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

+ +
mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];
+ +

Додавання властивостей

+ +

У JavaScript, можна додавати властивості до об'єкту безпосередно під час виконання. Ви не обмежені застосуванням лише властивостей, наданих конструктором. Щоб додати нову властивість до окремого об'єкту, просто призначте йому нове значення, як наведено далі:

+ +
mark.bonus = 3000;
+
+ +

Тепер об'єкт mark містить властивість bonus, проте більше ніхто із WorkerBee її не має.

+ +

Якщо додати нову властивість до об'єкту-прототипу іншого конструктора, то ця властивість з'явиться у всіх об'єктів, що наслідують властивості від прототипу. Наприклад, ось так можна додати властивість specialty всім робітникам:

+ +
Employee.prototype.specialty = 'none';
+
+ +

Як тільки JavaScript виконає інструкцію, об'єкт mark матиме властивість specialty із значенням "none". Наступна схема ілюструє ефект від додавання цієї властивості до прототипу Employee і її перевизначення у прототипі Engineer.

+ +


+ Додавання властивостей

+ +

Більш гнучкі конструктори

+ +

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

+ +


+ Задання властивостей у конструкторі, варіант 1

+ +

Таблиця далі показує визначення цих об'єктів у Java і JavaScript.

+ +
+

JavaScript

+ +

Java

+
+ +
+
function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ +
+
function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

 

+ +

 

+ +

 

+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+ +

 

+ +

 

+ +

 

+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

Ці JavaScript-визначення застосовують особливу ідіому для задання значення за замовчуванням:

+ +
this.name = name || '';
+
+ +

Логічний оператор АБО у JavaScript (||) обчислює перше значення. Якщо результат можна привести до true, оператор повертає його, а інакше - значення другого аргументу. Таким чином, ця стрічка коду перевіряє, чи name має якесь корисне значення для властивості name. Якщо так — this.name отримує її значення, а інакше значенням this.name стає порожній рядок. У розділі ця ідіома застосовується для стислості; однак вона може бути неочевидною на перший погляд.

+ +
+

Зауважте, що: це може працювати не так, як очікується, якщо конструктор викликається із аргументами, що приводяться до false (число 0 і порожній рядок (""). У цьому випадку буде обрано значення за замовчуванням.

+
+ +

Таким чином можливо задати значення для властивостей на місці, безпосередньо під час створення екземпляру об'єкту. Наступною інструкцією ви можете створити новий екземпляр Engineer:

+ +
var jane = new Engineer('belau');
+
+ +

Властивості Jane тепер виглядають так:

+ +
jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+
+ +

Зауважте, що таким визначенням ви не можете задати первинне значення для наслідуваного поля name. Для задання значення наслідуваним властивостям у JavaScript, необхідно додати трохи більше коду до фукнції-конструктора.

+ +

Поки що фукнція-конструктор створила загальний об'єкт, задала на місці властивості і значення нового об'єкту. Можна зробити, щоб конструктор додавав властивості безпосередньо викликаючи конструктор об'єкта, вищого у ієрархії прототипів. Власне, як зображено у наступній схемі.

+ +


+ Задання властивостей у конструкторі, варіант 2

+ +

Розгляньмо детальніше одне із цих визначень. Ось новий конструктор Engineer:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+ +

Припустимо, ви ось так створюєте новий об'єкт Engineer:

+ +
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+
+ +

Тут JavaScript виконує наступні кроки:

+ +
    +
  1. Оператор new створює загальний об'єкт і задає Engineer.prototype значенням його властивості __proto__ .
    2. +
  2. Оператор new передає новий об'єкт у конструктор Engineer в якості значення this.
    3. +
  3. Конструктор створює нову властивість base для цього об'єкту і присвоює їй значення конструктора WorkerBee. Так конструктор WorkerBee стає методом об'єкту Engineer. Назва властивості base не є чимось особливим. Ви можете використати будь-яке дозволене ім'я властивості, а base просто звучить змістовно для даного випадку.
    4. +
  4. Конструктор викликає метод base, передаючи в нього два своїх аргументи ("Doe, Jane" і ["navigator", "javascript"]) і новий рядок "engineering". Явно вказаний "engineering" у конструкторі означає, що всі об'єкти Engineer матимуть одне значення для наслідуваної властивості dept, і це значення заміщує успадковане від Employee.
    5. +
  5. Так як метод base належить Engineer, всередині виклику base JavaScript прив'язує значення this до об'єкту, створеного на першому етапі. Таким чином функція WorkerBee, в свою чергу, передає аргументи "Doe, Jane" та "engineering" до конструктора Employee. Після повернення з конструктора Employee функція WorkerBee задає останнім аргументом поле projects.
    6. +
  6. Після повернення з методу base конструктор Engineer ініціалізовує властивість machine об'єкту значенням "belau".
    7. +
  7. Після повернення з конструктору JavaScript присвоює новий об'єкт змінній jane.
    8. +
+ +

Може скластися враження, що, викликавши конструтктор WorkerBee зсередини конструктора Engineer, ви вкажете наслідування відповідно для об'єктів Engineer. Насправді виклик конструктора WorkerBee гарантує, що об'єкт Engineer матиме всі властивості, вказані у всіх викликаних конструкторах. Однак, якщо пізніше додати нові властивості до прототипів Employee чи WorkerBee, вони не будуть успадковані об'єктом Engineer. Припустимо, у нас є наступні інструкції:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+
+ +

Об'єкт jane не наслідує властивість specialty. Вам все ще необхідно явно вказувати прототип для гарантії динамічного наслідування. Натомість розглянемо такий набір інструкцій:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+
+ +

Тепер значенням властивості specialty об'єкту jane являється "none".

+ +

Іншим способом наслідування являється використання методів call() чи apply(). Ось дві еквівалентні ділянки коду:

+ +
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+ +
function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+
+ +

Використання методу call() дає більш чисту реалізацію, так як base більше не потрібен.

+ +

Іще раз про наслідування властивостей

+ +

У попередніх частинах було описано, як конструктори і прототипи JavaScript дозволяють реалізовувати ієрархію та наслідування. Ця частина розглядає деякі тонкощі, які, можливо, не були очевидними у наведеному вище тексті.

+ +

Локальні і успадковані змінні

+ +

Коли ви викликаєте властивість, JavaScript виконує наступні кроки (як описано вище у главі):

+ +
    +
  1. Перевіряє наявність цієї змінної прямо в об'єкті, і повертає її значення, якщо знаходить.
    2. +
  2. Якщо її немає серед локальних змінних - перевіряє ланцюжок прототипів (використовуючи властивість __proto__).
    3. +
  3. Якщо прототип у ланцюжку має значення вказаної властивості — повертає це значення.
    4. +
  4. Якщо вказана властивість не знайдена — значить, об'єкт її не має.
    5. +
+ +

Результат виконання цих кроків залежить від того, як ви задаєте значення і об'єкти.  Перший приклад мав такі визначення:

+ +
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

Припустимо, враховуючи ці визначення, що наступною інструкцією ви створили екземпляр WorkerBee у змінній amy:

+ +
var amy = new WorkerBee;
+
+ +

Об'єкт amy має одну локальну змінну — projects. Значення властивостей name та dept насправді не належать amy, і тому виводяться через поле її поле __proto__. Отже, amy має такі значення властивостей:

+ +
amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+
+ +

Тепер припустимо, що ви змінили значення властивості name у прототипі, асоційованому з Employee:

+ +
Employee.prototype.name = 'Unknown';
+
+ +

На перший погляд, можна очікувати, що нове значення пошириться на всі екземпляри Employee. Однак, це не так.

+ +

При створенні будь-якого екземпляру об'єкту Employee, цей екземпляр отримає локальне значення для властивості name (порожній рядок). Тобто, коли ми задаємо прототип WorkerBee шляхом створення нового об'єкту Employee, WorkerBee.prototype має локальне значення властивості name. Отже, коли JavaScript шукає властивість name об'єкту amy (екземпляр WorkerBee), він знаходить місцеве значення властивості у WorkerBee.prototype. І тому він не намагається шукати далі в ланцюжку прототипів до Employee.prototype.

+ +

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

+ +
function Employee() {
+  this.dept = 'general';    // Зауважте, що тут немає this.name (локальної змінної)
+}
+Employee.prototype.name = '';    // Одна копія
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+
+ +

У цьому випадку, властивість amy name стане "Unknown".

+ +

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

+ +

Визначення відносин екземпляру

+ +

Пошук властивості у JavaScript виконується серед власних властивостей об'єкту, і, якщо властивість з даним іменем не була знайдена, пошук переходить всередину особливої властивості __proto__. Це відбувається рекурсивно, і цей процес називається "пошук у ланцюжку прототипів".

+ +

Властивість __proto__ встановлюється у момент конструювання об'єкту; вказує вона на властивість prototype конструктора. Тобто вираз new Foo() створює об'єкт із__proto__ == Foo.prototype. Відповідно, зміни у Foo.prototype впливають на пошук властивості всіх об'єктів, створених через new Foo().

+ +

Кожен об'єкт має властивість __proto__ (за винятком Object); кожна функція має властивість prototype. Тобто об'єкти можуть відноситись один до одного згідно "прототипного наслідування". Перевірити наслідування можна, порівнюючи властивість __proto__ об'єкту із об'єктом prototype функції. JavaScript надає скорочення: оператор instanceof порівнює об'єкт і функцію, і повертає true, якщо об'єкт є нащадком прототипу функції. Наприклад:

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

Для більш докладного прикладу, припустимо, що у нас є набір визначень із показаних у Наслідування властивостей. Створімо об'єкт Engineer:

+ +
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+
+ +

Наступні вирази стосовно цього об'єкту являються істинними:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Враховуючи це, ми можемо ось так написати функцію instanceOf:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Зверніть увагу, що: ця реалізація додатково перевіряє відношення об'єкту до типу "xml",  щоб обійти особливість уявлення XML-об'єктіву останніх версіях JavaScript. Дивіться {{ bug(634150) }}, якщо вам потрібна докладніша інформація.
+ +

Наступні вирази із визначеною вище функцією instanceOf являються істинними:

+ +
instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+
+ +

Проте такий приклад в результаті видасть false:

+ +
instanceOf(chris, SalesPerson)
+
+ +

Глобальна інформація у конструкторах

+ +

Потрібно бути уважним при створенні конструкторів, якщо ви задаєте в них якісь глобальні дані. Наприклад, припустимо, нам потрібно автоматично задавати унікальний ID кожному новому робітнику. Ви можете об'явити Employee так:

+ +
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+ +

Згідно цього визначення Employee, під час створення нового екземпляру конструктор призначає йому наявний ID, і потім підвищує на 1 глобальний лічильник ID. Тобто, якщо виконати наступні інструкції, victoria.id буде 1, а harry.id — 2:

+ +
var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+
+ +

На перший погляд все чудово. Однак, idCounter змінюється кожного разу, коли створюється екземпляр Employee, байдуже для чого. Якщо створити всю ієрархію Employee, наведену у цьому розділі, конструктор Employee буде викликано кожного разу при заданні прототипу. Припустимо, у нас є наступний код:

+ +
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+
+ +

Далі припустимо, що визначення, що опущені тут мають властивість base і викликають констуктор, що знаходиться вище у ланцюжку прототипів. У цьому випадку, у момент створення об'єкту mac, mac.id буде 5.

+ +

Залежно від застосування, таке додаткове збільшення лічильника може мати, чи не мати значення. Якщо для вас важливе справжнє значення лічильника, один із варіантів рішення матиме такий вигляд конструктора:

+ +
function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

При створенні екземпляру Employee для застосування в якості прототипу аргументи не задаються. Згідно цього визначення конструктора, коли ми не передаємо аргументи, конструктор не задає значення id та не оновлює лічильник. Таким чином, щоб отримати Employee із призначеним id, необхідно задати ім'я робітника. У цьому випадку mac.id буде дорівнювати 1.

+ +

Інший варіант — створювати копію об'єкту-прототипу Employee, щоб потім присвоювати її WorkerBee:

+ +
WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+
+ +

Відсутність множинного успадкування

+ +

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

+ +

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

+ +

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

+ +
function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+
+ +

Далі припустимо, що визначення WorkerBee відповідає вказаному вище у розділі. У цьому випадку об'ект dennis матиме такі значення властивостей:

+ +
dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+
+ +

Тобто dennis отримує поле hobby з конструктора Hobbyist. Однак, якщо ми потім додамо нову властивість до прототипу конструктора Hobbyist:

+ +
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+
+ +

Об'єкт dennis не успадковує цю нову властивість.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
diff --git a/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html deleted file mode 100644 index 5e756710dd..0000000000 --- a/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html +++ /dev/null @@ -1,760 +0,0 @@ ---- -title: Докладно про об'єктну модель -slug: Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model -tags: - - Guide - - Intermediate - - JavaScript - - Object -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
- -

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

- -

Вміст цього розділу розрахований на те, що ви вже, принаймні, дещо знайомі з мовою JavaScript, і застосовували його функції для створення простих об'єктів.

- -

Мови з класовою та прототипною моделлю

- -

Об'єктно-орієнтовані мови з класовою моделлю, такі як Java і C++, засновані на концепції двох окремих сутностей: класів та екземплярів.

- - - -

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

- -

Задання і визначення класу

- -

У мовах із класовою моделлю, класс задається у окремому визначенні класу. У цому визначенні можна вказати особливі методи, що називаються конструкторами, щоб створити екземпляри класу. Метод-конструктор може задати початкові значення властивостей екземпляру, і виконати якісь інші задачі прямо у момент створення. Для створення екземплярів застосовується оператор new у комбінації із методом-конструктором.

- -

JavaScript слідує подібній моделі, проте не має відокремленого від конструктора визначення класу. Натомість, ви одразу задаєте функцію-конструктор, щоб створити об'єкти із відповідним початковим набором властивостей та значень. Будь-яка JavaScript-функція може використовуватись як конструктор. Для створення нового об'єкту так само використовується оператор new із фукнцією-конструктором.

- -

 

- -
-

Зауважте, що ECMAScript 2015 вводить визначення класу:

- -
-

Класи JavaScript, введені стандартом ECMAScript 2015, є лише синтаксичним цукром поверх уже наявного у JavaScript прототипного наслідування. Тобто ці класи не вводять у JavaScript нової моделі наслідуваня.

-
-
- -

 

- -

Дочірні класи і наслідування

- -

У мові з класовою моделлю наслідкування ієрархія класів створюється через визначення класу. У цьому визначенні можна окремо вказати, що новий клас являється дочірнім стосовно уже наявного класу. Дочірній клас отримає всі властивості батьківського і може привнести нові (або ж змінити успадковані). Наприклад, припустимо, що клас Employee включає в себе лише поля name та dept, і Manager - це дочірній клас Employee, що додає властивість reports. У цьому випадку, екземпляр класу Manager матиме три властивості: name, dept, та reports.

- -

JavaScript реалізовує наслідування дещо інакше. Він дозволяє пов'язувати об'єкт-прототип із будь-якою фукнцією-конструктором. Тобто ви можете точнісінько реалізувати приклад Employee — Manager, проте використовуючи дещо інші терміни. Спершу ви визначаєте конструктор Employee, задаючи властивості name та dept. Далі ви визначаєте фукнцію-конструктор Manager, що викликає конструктор Employee та задає властивість reports. Насамкінець, призначаєте новий об'єкт, отриманий з Employee.prototype в якості прототипу конструктора Manager. Надалі, при створенні екземпляра Manager він наслідує властивості name і dept з об'єкту Employee.

- -

Додавання і видалення властивостей

- -

Зазвичай у мовах із класовою моделлю наслідування класи створюються під час компіляції, а екземпляри класів - під час компіляції чи виконання програми. Після того, як його було визначено, не можна змінити кількість або тип його властивостей. Однак, у JavaScript можна додавати чи видаляти властивості будь-якого об'єкту безпосередньо під час виконання програми. Якщо додати нову властивість до об'єкту-прототипу певного набору об'єктів, вони всі також отримають цю властивість.

- -

Підсумок відмінностей класової і прототипної моделей

- -

Наступна таблиця надає короткий підсумок цих відмінностей. Решта розділу розкриває деталі застосування JavaScript-конструкторів і прототипів для створення ієрархії об'єктів, та порівнює це із тим, як би це робилось у Java.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Порівняння мови із класовою моделлю наслідування (Java) і прототипною (JavaScript)
Класова модель (Java)Прототипна модель (JavaScript)
Клас та його екземпляр - окремі сутності.Всі об'єкти можуть наслідувати інші об'єкти.
Визначення класу описує його; екземпляри створюються методами-конструкторами.Функції-конструктори і описують, і створюють набори об'єктів.
Окремий об'єкт створюється оператором new.Так само.
Ієрархія об'єктів формується при визначенні класів, шляхом задання нащадків для уже наявних класів.Ієрархія об'єктів формується шляхом призначення об'єкту прототипом функції-конструктора.
Властивості наслідуються згідно ланцюжка класів.Властивості наслідуються згідно ланцюжка прототипів.
Визначення класу задає всі властивості всіх екземплярів класу. Неможливо динамічно додавати властивості під час виконання програми.Функція-конструктор чи прототип задають лише початковий набір властивостей. Можна додавати чи видаляти властивості як окремого об'єкту, так певного їх набору.
- -

Приклад із робітником "Employee"

- -

Надалі у розділі ієрархія робітників, що показана на наступному зображенні.

- -
-
-

Проста ієрархія об'єктів, сформована із наступних елементів:

- -

-
- -
-
    -
  • Employee має поля name (із порожнім рядком в якості значення за замовчуванням) та dept (у якого значення за замовчуванням — "general").
    • -
  • Manager заснований на Employee. Він додає властивість reports  (за замовчуванням містить порожній масив для об'єктів Employee).
    • -
  • WorkerBee також заснований на Employee. Він додає властивість projects (за замовчуванням містить порожній масив, призначений для рядків).
    • -
  • SalesPerson заснований на WorkerBee. Він додає властивість quota (за замовчуванням — число 100). Він також перевизначае властивість dept, надаючи їй нове значенням "sales" (що означає, що всі SalesPerson відносяться до одного відділу).
    • -
  • Engineer заснований на WorkerBee. Він додає властивість machine (значення за замовчуванням — порожній рядок) і перевизначає властивість dept, задаючи їй значення "engineering".
    • -
-
-
- -

Створення ієрархії

- -

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

- -

Цей розділ показує, як використовувати дуже прості (і відносно негнучкі) визначення, і таким чином демонструє, як отримати робочий механізм наслідування. У цих визначеннях не можна задати жодного значення при створенні об'єкту — він отримає властивості із значеннями за замовчуванням, які можна буде змінити пізніше.

- -

У реальному додатку ви б, ймовірно, визначали конструктор, що дозволяє задавати значення в момент створення об'єкту (докладніше у Більш гнучкі конструктори). А наразі ці прості визначення покажуть, як загалом відбувається наслідування.

- -

Наступні визначення Employee у Java та JavaScript ідентичні. Єдина відмінність — у Java необхідно явно вказувати тип кожної властивості, на відміну від JavaScript (так як Java — мова із сильною типізацією, а JavaScript — із слабкою).

- -
-

JavaScript

- -
function Employee() {
-  this.name = '';
-  this.dept = 'general';
-}
-
- -


- Java

- -
public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-
-
- -

Визначення Manager і WorkerBee показують різницю у заданні батьківського об'єкту. У JavaScript ви додаєте екземпляр прототипу в якості значення поля prototype функції-конструктора, а потім перевизначаєте prototype.constructor, щоб це поле вказувало на функцію-конструктор. Ви можете це зробити в будь-якому місці після визначення конструктора. У Java надклас задається всередині визначення класу, і його ніяк не можна змінити зовні визначення класу.

- -
-

JavaScript

- -
function Manager() {
-  Employee.call(this);
-  this.reports = [];
-}
-Manager.prototype =
-    Object.create(Employee.prototype);
-Manager.prototype.constructor = Manager;
-
-function WorkerBee() {
-  Employee.call(this);
-  this.projects = [];
-}
-WorkerBee.prototype =
-    Object.create(Employee.prototype);
-WorkerBee.prototype.constructor = WorkerBee;
-
- -


- Java

- -
public class Manager extends Employee {
-   public Employee[] reports =
-       new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-
-
- -

 

- -

Визначення Engineer та SalesPerson створюють об'єкти, що наслідуються вже від WorkerBee, а, отже, і від Employee. Об'єкти цих типів мають властивості всіх об'єктів вище у ланцюжку наслідування. Надодачу, ці визначення перевизначають успадковані значення поля dept, змінюючи їх відповідно до нового типу.

- -
-

JavaScript

- -
function SalesPerson() {
-   WorkerBee.call(this);
-   this.dept = 'sales';
-   this.quota = 100;
-}
-SalesPerson.prototype =
-    Object.create(WorkerBee.prototype);
-SalesPerson.prototype.constructor = SalesPerson;
-
-function Engineer() {
-   WorkerBee.call(this);
-   this.dept = 'engineering';
-   this.machine = '';
-}
-Engineer.prototype =
-    Object.create(WorkerBee.prototype);
-Engineer.prototype.constructor = Engineer;
-
- -


- Java

- -
public class SalesPerson extends WorkerBee {
-   public String dept = "sales";
-   public double quota = 100.0;
-}
-
-
-public class Engineer extends WorkerBee {
-   public String dept = "engineering";
-   public String machine = "";
-}
-
-
-
- -

Таким чином, ви можете створювати екземпляри об'єктів із уже заданими значеннями для своїх властивостей. Наступна схема ілюструє застосування цих JavaScript-визначень для створення нових об'єктів, і демонструє значення їх властивостей.

- -
-

Зауважте, що: термін екземпляр має специфічний технічний зміст у мовах із класовою моделлю. У цих мовах екземпляр являється окремою реалізацією класу і корінним чином відрізняється від його визначення. У JavaScript, "екземпляр" не має такого особливого змісту, бо сам JavaScript не має такої значної відмінності класів від їх реалізацій. Однак, у контексті JavaScript, "екземпляр" може неформально позначати об'єкт, створений певною функцією-конструктором. Тому, згідно наступного прикладу, можна неформально стверджувати, що jane є екземпляром класу Engineer. Так само, хоча терміни предок, нащадок, дочірній і батьківський класи не мають формального смісту в JavaScript, їх можна застосовувати для позначення об'єктів, що знаходяться вище чи нижче у ланцюжку прототипів.

-
- -

Створення об'єктів за допомогою простих визначень

- -
-

Ієрархія об'єктів

- -

Наступна ієрархія створена за допомогою коду у правій частині.

- -

- -

Окремі об'єкти = Jim, Sally, Mark, Fred, Jane, etc.
- "Екземпляри", створені конструктором

- -
var jim = new Employee;
-// Дужки можна опустити, якщо
-// конструктор не приймає аргументів.
-// jim.name має значення ''
-// jim.dept має значення 'general'
-
-var sally = new Manager;
-// sally.name має значення ''
-// sally.dept має значення 'general'
-// sally.reports має значення []
-
-var mark = new WorkerBee;
-// mark.name має значення ''
-// mark.dept має значення 'general'
-// mark.projects має значення []
-
-var fred = new SalesPerson;
-// fred.name має значення ''
-// fred.dept має значення 'sales'
-// fred.projects має значення []
-// fred.quota має значення 100
-
-var jane = new Engineer;
-// jane.name має значення ''
-// jane.dept має значення 'engineering'
-// jane.projects має значення []
-// jane.machine має значення ''
-
-
- -

Властивості (поля) об'єкту

- -

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

- -

Наслідування властивостей

- -

Припустимо, такою інструкцією ви створили екземпляр WorkerBee — об'єкт mark:

- -
var mark = new WorkerBee;
-
- -

Коли JavaScript бачить оператор new, він створює загальний об'єкт і неявно встановлює WorkerBee.prototype значенням внутрішньої властивості [[Prototype]], і передає цей новий об'єкт як значення this до фукнції-конструктора WorkerBee. Внутрішня властивість [[Prototype]] визначає ланцюжок прототипів для виводу значень полів. Коли ці властивості задані, JavaScript повертає новий об'єкт, а інструкція присвоєння задає його в якості значення змінної mark.

- -

Описаний процес явно не встановлює значення об'єкту mark для властивостей (локальні значення), які mark наслідує з ланцюжка прототипів. Коли ви запитуєте значення властивості, JavaScript в першу чергу перевіряє наявність цього значення у об'єкті, і повертає його, якщо знаходить. Якщо ж ні, JavaScript перевіряє весь ланцюжок прототипів (за допомогою властивості [[Prototype]]). Якщо об'єкт у ланцюжку має таку властивість - буде повернуто її значення (або повідомлення, що об'єкт не має такої властивості, якщо її все-таки не було знайдено). Таким чином, об'єкт mark має наступні властивості і значення:

- -
mark.name = '';
-mark.dept = 'general';
-mark.projects = [];
-
- -

З конструктора Employee об'єкту mark призначено локальні значення для властивостей name та dept, а з конструктора WorkerBee — значення властивості projects. Таким чином ми отримуємо наслідування властивостей і їх значень у JavaScript. Деякі тонкощі цього процесу додатково висвітлені у Іще раз про наслідування властивостей.

- -

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

- -
mark.name = 'Doe, Mark';
-mark.dept = 'admin';
-mark.projects = ['navigator'];
- -

Додавання властивостей

- -

У JavaScript, можна додавати властивості до об'єкту безпосередно під час виконання. Ви не обмежені застосуванням лише властивостей, наданих конструктором. Щоб додати нову властивість до окремого об'єкту, просто призначте йому нове значення, як наведено далі:

- -
mark.bonus = 3000;
-
- -

Тепер об'єкт mark містить властивість bonus, проте більше ніхто із WorkerBee її не має.

- -

Якщо додати нову властивість до об'єкту-прототипу іншого конструктора, то ця властивість з'явиться у всіх об'єктів, що наслідують властивості від прототипу. Наприклад, ось так можна додати властивість specialty всім робітникам:

- -
Employee.prototype.specialty = 'none';
-
- -

Як тільки JavaScript виконає інструкцію, об'єкт mark матиме властивість specialty із значенням "none". Наступна схема ілюструє ефект від додавання цієї властивості до прототипу Employee і її перевизначення у прототипі Engineer.

- -


- Додавання властивостей

- -

Більш гнучкі конструктори

- -

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

- -


- Задання властивостей у конструкторі, варіант 1

- -

Таблиця далі показує визначення цих об'єктів у Java і JavaScript.

- -
-

JavaScript

- -

Java

-
- -
-
function Employee(name, dept) {
-  this.name = name || '';
-  this.dept = dept || 'general';
-}
-
- -

 

- -

 

- -

 

- -

 

- -

 

- -
public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this("", "general");
-   }
-   public Employee (String name) {
-      this(name, "general");
-   }
-   public Employee (String name, String dept) {
-      this.name = name;
-      this.dept = dept;
-   }
-}
-
-
- -
-
function WorkerBee(projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-
- -

 

- -

 

- -

 

- -
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-
-
- -
-
-function Engineer(mach) {
-   this.dept = 'engineering';
-   this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-
- -

 

- -

 

- -

 

- -
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-
-
- -

Ці JavaScript-визначення застосовують особливу ідіому для задання значення за замовчуванням:

- -
this.name = name || '';
-
- -

Логічний оператор АБО у JavaScript (||) обчислює перше значення. Якщо результат можна привести до true, оператор повертає його, а інакше - значення другого аргументу. Таким чином, ця стрічка коду перевіряє, чи name має якесь корисне значення для властивості name. Якщо так — this.name отримує її значення, а інакше значенням this.name стає порожній рядок. У розділі ця ідіома застосовується для стислості; однак вона може бути неочевидною на перший погляд.

- -
-

Зауважте, що: це може працювати не так, як очікується, якщо конструктор викликається із аргументами, що приводяться до false (число 0 і порожній рядок (""). У цьому випадку буде обрано значення за замовчуванням.

-
- -

Таким чином можливо задати значення для властивостей на місці, безпосередньо під час створення екземпляру об'єкту. Наступною інструкцією ви можете створити новий екземпляр Engineer:

- -
var jane = new Engineer('belau');
-
- -

Властивості Jane тепер виглядають так:

- -
jane.name == '';
-jane.dept == 'engineering';
-jane.projects == [];
-jane.machine == 'belau';
-
- -

Зауважте, що таким визначенням ви не можете задати первинне значення для наслідуваного поля name. Для задання значення наслідуваним властивостям у JavaScript, необхідно додати трохи більше коду до фукнції-конструктора.

- -

Поки що фукнція-конструктор створила загальний об'єкт, задала на місці властивості і значення нового об'єкту. Можна зробити, щоб конструктор додавав властивості безпосередньо викликаючи конструктор об'єкта, вищого у ієрархії прототипів. Власне, як зображено у наступній схемі.

- -


- Задання властивостей у конструкторі, варіант 2

- -

Розгляньмо детальніше одне із цих визначень. Ось новий конструктор Engineer:

- -
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-
- -

Припустимо, ви ось так створюєте новий об'єкт Engineer:

- -
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-
- -

Тут JavaScript виконує наступні кроки:

- -
    -
  1. Оператор new створює загальний об'єкт і задає Engineer.prototype значенням його властивості __proto__ .
    2. -
  2. Оператор new передає новий об'єкт у конструктор Engineer в якості значення this.
    3. -
  3. Конструктор створює нову властивість base для цього об'єкту і присвоює їй значення конструктора WorkerBee. Так конструктор WorkerBee стає методом об'єкту Engineer. Назва властивості base не є чимось особливим. Ви можете використати будь-яке дозволене ім'я властивості, а base просто звучить змістовно для даного випадку.
    4. -
  4. Конструктор викликає метод base, передаючи в нього два своїх аргументи ("Doe, Jane" і ["navigator", "javascript"]) і новий рядок "engineering". Явно вказаний "engineering" у конструкторі означає, що всі об'єкти Engineer матимуть одне значення для наслідуваної властивості dept, і це значення заміщує успадковане від Employee.
    5. -
  5. Так як метод base належить Engineer, всередині виклику base JavaScript прив'язує значення this до об'єкту, створеного на першому етапі. Таким чином функція WorkerBee, в свою чергу, передає аргументи "Doe, Jane" та "engineering" до конструктора Employee. Після повернення з конструктора Employee функція WorkerBee задає останнім аргументом поле projects.
    6. -
  6. Після повернення з методу base конструктор Engineer ініціалізовує властивість machine об'єкту значенням "belau".
    7. -
  7. Після повернення з конструктору JavaScript присвоює новий об'єкт змінній jane.
    8. -
- -

Може скластися враження, що, викликавши конструтктор WorkerBee зсередини конструктора Engineer, ви вкажете наслідування відповідно для об'єктів Engineer. Насправді виклик конструктора WorkerBee гарантує, що об'єкт Engineer матиме всі властивості, вказані у всіх викликаних конструкторах. Однак, якщо пізніше додати нові властивості до прототипів Employee чи WorkerBee, вони не будуть успадковані об'єктом Engineer. Припустимо, у нас є наступні інструкції:

- -
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-Employee.prototype.specialty = 'none';
-
- -

Об'єкт jane не наслідує властивість specialty. Вам все ще необхідно явно вказувати прототип для гарантії динамічного наслідування. Натомість розглянемо такий набір інструкцій:

- -
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-Employee.prototype.specialty = 'none';
-
- -

Тепер значенням властивості specialty об'єкту jane являється "none".

- -

Іншим способом наслідування являється використання методів call() чи apply(). Ось дві еквівалентні ділянки коду:

- -
-
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-
- -
function Engineer(name, projs, mach) {
-  WorkerBee.call(this, name, 'engineering', projs);
-  this.machine = mach || '';
-}
-
-
- -

Використання методу call() дає більш чисту реалізацію, так як base більше не потрібен.

- -

Іще раз про наслідування властивостей

- -

У попередніх частинах було описано, як конструктори і прототипи JavaScript дозволяють реалізовувати ієрархію та наслідування. Ця частина розглядає деякі тонкощі, які, можливо, не були очевидними у наведеному вище тексті.

- -

Локальні і успадковані змінні

- -

Коли ви викликаєте властивість, JavaScript виконує наступні кроки (як описано вище у главі):

- -
    -
  1. Перевіряє наявність цієї змінної прямо в об'єкті, і повертає її значення, якщо знаходить.
    2. -
  2. Якщо її немає серед локальних змінних - перевіряє ланцюжок прототипів (використовуючи властивість __proto__).
    3. -
  3. Якщо прототип у ланцюжку має значення вказаної властивості — повертає це значення.
    4. -
  4. Якщо вказана властивість не знайдена — значить, об'єкт її не має.
    5. -
- -

Результат виконання цих кроків залежить від того, як ви задаєте значення і об'єкти.  Перший приклад мав такі визначення:

- -
function Employee() {
-  this.name = '';
-  this.dept = 'general';
-}
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- -

Припустимо, враховуючи ці визначення, що наступною інструкцією ви створили екземпляр WorkerBee у змінній amy:

- -
var amy = new WorkerBee;
-
- -

Об'єкт amy має одну локальну змінну — projects. Значення властивостей name та dept насправді не належать amy, і тому виводяться через поле її поле __proto__. Отже, amy має такі значення властивостей:

- -
amy.name == '';
-amy.dept == 'general';
-amy.projects == [];
-
- -

Тепер припустимо, що ви змінили значення властивості name у прототипі, асоційованому з Employee:

- -
Employee.prototype.name = 'Unknown';
-
- -

На перший погляд, можна очікувати, що нове значення пошириться на всі екземпляри Employee. Однак, це не так.

- -

При створенні будь-якого екземпляру об'єкту Employee, цей екземпляр отримає локальне значення для властивості name (порожній рядок). Тобто, коли ми задаємо прототип WorkerBee шляхом створення нового об'єкту Employee, WorkerBee.prototype має локальне значення властивості name. Отже, коли JavaScript шукає властивість name об'єкту amy (екземпляр WorkerBee), він знаходить місцеве значення властивості у WorkerBee.prototype. І тому він не намагається шукати далі в ланцюжку прототипів до Employee.prototype.

- -

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

- -
function Employee() {
-  this.dept = 'general';    // Зауважте, що тут немає this.name (локальної змінної)
-}
-Employee.prototype.name = '';    // Одна копія
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = 'Unknown';
-
- -

У цьому випадку, властивість amy name стане "Unknown".

- -

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

- -

Визначення відносин екземпляру

- -

Пошук властивості у JavaScript виконується серед власних властивостей об'єкту, і, якщо властивість з даним іменем не була знайдена, пошук переходить всередину особливої властивості __proto__. Це відбувається рекурсивно, і цей процес називається "пошук у ланцюжку прототипів".

- -

Властивість __proto__ встановлюється у момент конструювання об'єкту; вказує вона на властивість prototype конструктора. Тобто вираз new Foo() створює об'єкт із__proto__ == Foo.prototype. Відповідно, зміни у Foo.prototype впливають на пошук властивості всіх об'єктів, створених через new Foo().

- -

Кожен об'єкт має властивість __proto__ (за винятком Object); кожна функція має властивість prototype. Тобто об'єкти можуть відноситись один до одного згідно "прототипного наслідування". Перевірити наслідування можна, порівнюючи властивість __proto__ об'єкту із об'єктом prototype функції. JavaScript надає скорочення: оператор instanceof порівнює об'єкт і функцію, і повертає true, якщо об'єкт є нащадком прототипу функції. Наприклад:

- -
var f = new Foo();
-var isTrue = (f instanceof Foo);
- -

Для більш докладного прикладу, припустимо, що у нас є набір визначень із показаних у Наслідування властивостей. Створімо об'єкт Engineer:

- -
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
-
- -

Наступні вирази стосовно цього об'єкту являються істинними:

- -
chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-
- -

Враховуючи це, ми можемо ось так написати функцію instanceOf:

- -
function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-
- -
Зверніть увагу, що: ця реалізація додатково перевіряє відношення об'єкту до типу "xml",  щоб обійти особливість уявлення XML-об'єктіву останніх версіях JavaScript. Дивіться {{ bug(634150) }}, якщо вам потрібна докладніша інформація.
- -

Наступні вирази із визначеною вище функцією instanceOf являються істинними:

- -
instanceOf(chris, Engineer)
-instanceOf(chris, WorkerBee)
-instanceOf(chris, Employee)
-instanceOf(chris, Object)
-
- -

Проте такий приклад в результаті видасть false:

- -
instanceOf(chris, SalesPerson)
-
- -

Глобальна інформація у конструкторах

- -

Потрібно бути уважним при створенні конструкторів, якщо ви задаєте в них якісь глобальні дані. Наприклад, припустимо, нам потрібно автоматично задавати унікальний ID кожному новому робітнику. Ви можете об'явити Employee так:

- -
var idCounter = 1;
-
-function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   this.id = idCounter++;
-}
-
- -

Згідно цього визначення Employee, під час створення нового екземпляру конструктор призначає йому наявний ID, і потім підвищує на 1 глобальний лічильник ID. Тобто, якщо виконати наступні інструкції, victoria.id буде 1, а harry.id — 2:

- -
var victoria = new Employee('Pigbert, Victoria', 'pubs');
-var harry = new Employee('Tschopik, Harry', 'sales');
-
- -

На перший погляд все чудово. Однак, idCounter змінюється кожного разу, коли створюється екземпляр Employee, байдуже для чого. Якщо створити всю ієрархію Employee, наведену у цьому розділі, конструктор Employee буде викликано кожного разу при заданні прототипу. Припустимо, у нас є наступний код:

- -
var idCounter = 1;
-
-function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   this.id = idCounter++;
-}
-
-function Manager(name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee(name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer(name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson(name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-var mac = new Engineer('Wood, Mac');
-
- -

Далі припустимо, що визначення, що опущені тут мають властивість base і викликають констуктор, що знаходиться вище у ланцюжку прототипів. У цьому випадку, у момент створення об'єкту mac, mac.id буде 5.

- -

Залежно від застосування, таке додаткове збільшення лічильника може мати, чи не мати значення. Якщо для вас важливе справжнє значення лічильника, один із варіантів рішення матиме такий вигляд конструктора:

- -
function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   if (name)
-      this.id = idCounter++;
-}
-
- -

При створенні екземпляру Employee для застосування в якості прототипу аргументи не задаються. Згідно цього визначення конструктора, коли ми не передаємо аргументи, конструктор не задає значення id та не оновлює лічильник. Таким чином, щоб отримати Employee із призначеним id, необхідно задати ім'я робітника. У цьому випадку mac.id буде дорівнювати 1.

- -

Інший варіант — створювати копію об'єкту-прототипу Employee, щоб потім присвоювати її WorkerBee:

- -
WorkerBee.prototype = Object.create(Employee.prototype);
-// instead of WorkerBee.prototype = new Employee
-
- -

Відсутність множинного успадкування

- -

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

- -

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

- -

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

- -
function Hobbyist(hobby) {
-   this.hobby = hobby || 'scuba';
-}
-
-function Engineer(name, projs, mach, hobby) {
-   this.base1 = WorkerBee;
-   this.base1(name, 'engineering', projs);
-   this.base2 = Hobbyist;
-   this.base2(hobby);
-   this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-
-var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
-
- -

Далі припустимо, що визначення WorkerBee відповідає вказаному вище у розділі. У цьому випадку об'ект dennis матиме такі значення властивостей:

- -
dennis.name == 'Doe, Dennis';
-dennis.dept == 'engineering';
-dennis.projects == ['collabra'];
-dennis.machine == 'hugo';
-dennis.hobby == 'scuba';
-
- -

Тобто dennis отримує поле hobby з конструктора Hobbyist. Однак, якщо ми потім додамо нову властивість до прототипу конструктора Hobbyist:

- -
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
-
- -

Об'єкт dennis не успадковує цю нову властивість.

- -
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
diff --git a/files/uk/web/javascript/guide/expressions_and_operators/index.html b/files/uk/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..fdfbc0659b --- /dev/null +++ b/files/uk/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,925 @@ +--- +title: Вирази та оператори +slug: Web/JavaScript/Guide/Вирази_та_оператори +tags: + - JavaScript + - Оператори + - Посібник + - вирази +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
+ +

Цей розділ описує вирази та оператори JavaScript, такі як присвоювання, порівняння, арифметичні оператори, бітові, логічні, рядкові, тернарний та інші.

+ +

Повний та детальний список операторів та виразів також доступний за посиланням.

+ +

Оператори

+ +

JavaScript має наступні типи операторів. Ця секція описує оператори, а також містить інформацію щодо їхніх пріоритетів.

+ + + +

JavaScript має як бінарні, так і унарні оператори, а також один особливий тернарний оператор - умовний оператор. Бінарному оператору потрібні два операнди - один перед оператором, інший після оператора:

+ +
операнд1 оператор операнд2
+
+ +

Наприклад, 3+4 чи x*y.

+ +

Унарний оператор потребує лише одного операнду до чи після оператора:

+ +
оператор операнд
+
+ +

чи

+ +
операнд оператор
+
+ +

Наприклад, x++ чи ++x.

+ +

Оператори присвоєння

+ +

Оператор присвоєння присвоює своєму лівому операнду значення на підставі значення правого операнда. Простим оператором присвоєння є оператор дорівнює (=), який присвоює значення свого правого операнда лівому операнду. Таким чином, x = y присвоює значення змінної y змінній x.

+ +

Також існують складені оператори присвоєння, які є скороченнями для операцій, перелічених у наступній таблиці:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Складені оператори присвоювання
НазваОператор скороченого записуЗначення
Присвоєнняx = yx = y
Присвоєння з додаваннямx += yx = x + y
Присвоєння з відніманнямx -= yx = x - y
Присвоєння з множеннямx *= yx = x * y
Присвоєння з діленнямx /= yx = x / y
Присвоєння остачіx %= yx = x % y
Присвоєння з піднесенням до степеня{{experimental_inline}}x **= yx = x ** y
Присвоєння з лівим зсувомx <<= yx = x << y
Присвоєння з правим зсувомx >>= yx = x >> y
Присвоєння з беззнаковим правим зсувомx >>>= yx = x >>> y
Присвоєння з побітовим Іx &= yx = x & y
Присвоєння з виключним побітовим АБОx ^= yx = x ^ y
Присвоєння з побітовим АБОx |= yx = x | y
+ +

Деструктуризація

+ +

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

+ +
var foo = ['один', 'два', 'три'];
+
+// без деструктуризації
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// із деструктуризацією
+var [one, two, three] = foo;
+
+ +

Оператори порівняння

+ +

Оператор порівняння порівнює свої операнди та повертає логічне значення, базуючись на істинності порівняння. Операнди можуть бути числовими, рядковими, логічними значеннями або об'єктами. Рядки порівнюються згідно стандартного лексикографічного порядку, з використанням значень Unicode. У більшості випадків, якщо два операнди не належать до одного типу, JavaScript намагається привести їх до належного для порівняння типу. Зазвичай це призводить до числового порівняння операндів. Єдиними винятками у конвертації типів під час порівняння є оператори === та !==, які виконують перевірку на строгу рівність та строгу нерівність. Ці оператори не намагаються перед перевіркою на рівність привести операнди до спільного типу. Наступна таблиця наводить оператори порівняння у контексті цього фрагменту коду:

+ +
var var1 = 3;
+var var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Оператори порівняння
ОператорОписПриклади, які повертають true
Рівність (==)Повертає true, якщо оператори рівні.3 == var1 +

"3" == var1

+ 3 == '3'
Нерівність (!=)Повертає true, якщо оператори нерівні.var1 != 4
+ var2 != "3"
Строга рівність (===)Повертає true якщо оператори рівні та належать до одного типу. Дивіться також {{jsxref("Object.is")}} та однаковість у JS.3 === var1
Строга нерівність (!==)Повертає true, якщо оператори належать до одного типу, але нерівні, або належать до різних типів.var1 !== "3"
+ 3 !== '3'
Більше ніж (>)Повертає true, якщо лівий операнд більший за правий.var2 > var1
+ "12" > 2
Більше чи дорівнює (>=)Повертає true, якщо значення лівого операнда більше або дорівнює значенню правого операнда.var2 >= var1
+ var1 >= 3
Менше ніж (<)Повертає true, якщо лівий операнд менший за правий.var1 < var2
+ "2" < 12
Менше чи дорівнює (<=)Повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.var1 <= var2
+ var2 <= 5
+ +
+

Заувага: (=>) не оператор, а позначення для стрілкових функцій.

+
+ +

Арифметичні оператори

+ +

Арифметичний оператор приймає числові значення (літерали чи змінні) в якості операндів та повертає єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/). Ці оператори працюють так само, як і в більшості інших мов програмування при використанні з числами з рухомою комою (зокрема, зауважте, що ділення на нуль повертає {{jsxref("Infinity")}}). Наприклад:

+ +
1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // це дорівнює true
+
+ +

На додачу до стандартних арифметичних операцій (+, -, * /), JavaScript надає арифметичні операції, перечислені у наведеній нижче таблиці:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Арифметичні оператори
ОператорОписПриклад
Остача (%)Бінарний оператор. Повертає цілочисельну остачу від ділення двох операндів.12 % 5 повертає 2.
Інкремент (++)Унарний оператор. Додає до операнда одиницю. Якщо використовується як префіксний оператор (++x), повертає значення операнда після додавання одиниці; якщо використовується як постфіксний оператор (x++), повертає значення операнда перед додаванням одиниці.Якщо x дорівнює 3, тоді ++x присвоює x значення 4 та повертає 4, в той час, як x++ повертає 3 і лише тоді присвоює x значення 4.
Декремент (--)Унарний оператор. Віднімає одиницю від свого операнда. Повернене значення аналогічне поверненому значенню оператора інкременту.Якщо x дорівнює 3, тоді --x присвоює x значення 2 та повертає 2, в той час, як x-- повертає 3 і тільки тоді присвоює x значення 2.
Унарний мінус (-)Унарний оператор. Повертає операнд з протилежним знаком.Якщо x дорівнює 3, то -x повертає -3.
Унарний плюс (+)Унарний оператор. Намагається перетворити операнд на число, якщо він не є числом.+"3" повертає 3.
+ +true повертає 1.
Піднесення до степеня (**) {{experimental_inline}}Підносить основу степеня до показника степеня, тобто, основапоказник2 ** 3 повертає 8.
+ 10 ** -1 повертає 0.1.
+ +

Бітові оператори

+ +

Бітовий оператор опрацьовує свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові або вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.

+ +

Наступна таблиця наводить перелік бітових операторів JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Бітові оператори
ОператорЗастосуванняОпис
Побітове І (AND)a & bПовертає одиницю на кожній позиції, де відповідні біти обох операндів дорівнюють одиницям.
Побітове АБО (OR)a | bПовертає нуль на кожній позиції, де відповідні біти обох операндів дорівнюють нулям.
Виключне побітове АБО (XOR)a ^ bПовертає нуль на кожній позиції, де відповідні біти однакові.
+ [Повертає один на кожній позиції, де відповідні біти мають різні значення.]
Побітове НЕ (NOT)~ aВиконує інверсію бітів операнду.
Лівий зсувa << bЗсуває a у двійковому представленні на b бітів ліворуч, заповнюючи позиції справа нулями.
Правий зсув з розширенням знакуa >> bЗсуває a у двійковому представленні на b бітів праворуч, відкидаючи зсунуті біти.
Правий зсув із заповненням нулямиa >>> bЗсуває a у двійковому представленні на b бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.
+ +

Побітові логічні оператори

+ +

Концептуально побітові логічні оператори працюють наступним чином:

+ + + +

Наприклад, бінарним представленням числа дев'ять є 1001, а бінарним представленням п'ятнадцяти є 1111. Отже, коли бітові оператори застосовуються до цих величин, результати будуть наступні:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Приклади бітових операторів
ВиразРезультатДвійковий опис
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
+ +

Зауважте, що усі 32 біти інвертуються побітовим оператором НЕ, і що значення, в яких найстарший (перший зліва) біт дорівнює 1, відображають від'ємні числа (формат доповняльного коду).

+ +

Оператори бітового зсуву

+ +

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

+ +

Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа та повертають результат того самого типу, до якого належить лівий операнд.

+ +

Оператори зсуву наведені у наступній таблиці.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Оператори бітового зсуву
ОператорОписПриклад
Лівий зсув
+ (<<)		Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.9<<2 вертає 36, тому що число 1001, зсунуте на 2 біти ліворуч, стає 100100, тобто, 36.
Правий зсув з розширенням знаку (>>) +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта.

+ 		9>>2 вертає 2, тому що число 1001, зсунуте на 2 біти праворуч, стає 10, тобто 2. Аналогічно, -9>>2 вертає -3,  тому що знак зберігається.
Правий зсув із заповненням нулями(>>>) +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями.

+ 		19>>>2 вертає 4, тому що число 10011, зсунуте на 2 бітів праворуч, стає 100, тобто 4. Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат.
+ +

Логічні оператори

+ +

Логічні оператори застосовуються до булевих (логічних) значень; в цьому випадку вони повертають значення типу Boolean. Однак, оператори && та || насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу. Логічні оператори описані у наведеній нижче таблиці.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Логічні оператори
ОператорЗастосуванняОпис
Логічне І (&&)expr1 && expr2Вертає вираз expr1, якщо він може бути перетворений на false; інакше, повертає expr2. Таким чином, при використанні з булевими значеннями && вертає true, якщо обидва операнди дорівнюють true; інакше, вертає false.
Логічне АБО (||)expr1 || expr2Вертає вираз expr1, якщо він може бути перетворений на true; інакше, вертає expr2. Таким чином, при використанні з булевими значеннями || вертає true, якщо будь-який з операндів дорівнює true; якщо обидва дорівнюють false, вертає false.
Логічне НЕ (!)!exprВертає false, якщо його єдиний операнд може бути перетворений на true; інакше, вертає true.
+ +

Прикладами виразів, які можуть бути перетворені на false, є ті, які повертають null, 0, NaN, порожній рядок ("") або undefined.

+ +

Наступний код демонструє приклади оператора && (логічне І).

+ +
var a1 =  true && true;     // t && t вертає true
+var a2 =  true && false;    // t && f вертає false
+var a3 = false && true;     // f && t вертає false
+var a4 = false && (3 == 4); // f && f вертає false
+var a5 = 'Кіт' && 'Пес';    // t && t вертає Пес
+var a6 = false && 'Кіт';    // f && t вертає false
+var a7 = 'Кіт' && false;    // t && f вертає false
+
+ +

Наступний код демонструє приклади оператора || (логічне АБО).

+ +
var o1 =  true || true;     // t || t вертає true
+var o2 = false || true;     // f || t вертає true
+var o3 =  true || false;    // t || f вертає true
+var o4 = false || (3 == 4); // f || f вертає false
+var o5 = 'Кіт' || 'Пес';    // t || t вертає Кіт
+var o6 = false || 'Кіт';    // f || t вертає Кіт
+var o7 = 'Кіт' || false;    // t || f вертає Кіт
+
+ +

Наступний код демонструє приклади оператора ! (логічне НЕ).

+ +
var n1 = !true;  // !t вертає false
+var n2 = !false; // !f вертає true
+var n3 = !'Кіт'; // !t вертає false
+
+ +

Коротке замикання обчислення

+ +

Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:

+ + + +

Правила логіки гарантують, що ці обчислення завжди будуть правильними. Зауважте, що частина виразу будь-що не обчислюється, тому будь-які побічні ефекти від цих обчислень не відбудуться.

+ +

Рядкові оператори

+ +

На додачу до операторів порівняння, які можуть застосовуватись до рядкових значень, оператор конкатенації (+) об'єднує значення двох рядків, повертаючи інший рядок, який є об'єднанням рядків двох операндів.

+ +

Наприклад,

+ +
console.log('мій ' + 'рядок'); // консоль виводить рядок "мій рядок".
+ +

Скорочений оператор присвоєння += також може застосовуватись для конкатенації рядків.

+ +

Наприклад,

+ +
var mystring = 'алфа';
+mystring += 'віт'; // повертає "алфавіт" та присвоює це значення mystring.
+ +

Умовний (тернарний) оператор

+ +

Умовний оператор - єдиний оператор у JavaScript, який приймає три операнди. У оператора може бути одне чи два значення, в залежності від умови. Використовує наступний синтакс:

+ +
умова ? значення1 : значення2
+
+ +

Якщо умова дорівнює true, оператор повертає значення1.  В іншому випадку - значення2. Умовний оператор можна використовувати будь-де, де використовується звичайний оператор. Наприклад:

+ +
var status = (age >= 18) ? 'дорослий' : 'неповнолітній';
+
+ +

Ця інструкція присвоює значення "дорослий" змінній status, якщо значення age (вік) більше чи дорівнює 18. Інакше, вона присвоює змінній status значення "неповнолітній".

+ +

Оператор кома

+ +

Оператор кома (,) просто обчислює обидва свої операнди та повертає значення останнього операнда. Цей оператор найчастіше використовується всередині циклу for, що дозволяє оновлювати більше однієї змінної на кожному проході циклу.

+ +

Наприклад, якщо a є двовимірним масивом з 10 елементами по кожній стороні, наступний код використовує оператор кома, щоб оновити дві змінні одночасно. Код виводить значення діагональних елементів масиву:

+ +
for (var i = 0, j = 9; i <= j; i++, j--)
+  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
+
+ +

Унарні оператори

+ +

Унарна операція - це операція лише з одним операндом.

+ +

delete

+ +

Оператор delete видаляє об'єкт, властивість об'єкта або елемент за вказаним індексом у масиві. Синтаксис наступний:

+ +
delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // працює лише всередині конструкції with
+
+ +

де objectName є іменем об'єкта, property - існуюча властивість, а index - ціле число, що вказує розташування елемента у масиві.

+ +

Четверта форма працює лише всередині блоку with для видалення властивості об'єкта.

+ +

Ви можете використовувати оператор delete для видалення змінних, оголошених неявно, але не тих, що були оголошені оператором var.

+ +

Якщо оператор delete відпрацьовує успішно, значенням властивості чи елемента стає undefined. Оператор delete повертає true, якщо операція можлива; він повертає false, якщо операція неможлива.

+ +
x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // створює властивість h
+delete x;       // вертає true (можна видалити властивість, оголошену неявно)
+delete y;       // вертає false (не можна видалити властивість, оголошену через var)
+delete Math.PI; // вертає false (не можна видаляти попередньо визначені властивості)
+delete myobj.h; // вертає true (можна видалити властивість, визначену користувачем)
+delete myobj;   // вертає true (можна видалити, якщо властивість оголошена неявно)
+
+ +
Видалення елементів масиву
+ +

Коли ви видаляєте елемент масиву, це не впливає на довжину масиву. Для прикладу, якщо ви видалите a[3], a[4] досі є a[4], а a[3] дорівнює undefined.

+ +

Коли оператор delete видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі trees[3] видаляється оператором delete. Однак, адреса trees[3] досі доступна та повертає undefined.

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+delete trees[3];
+if (3 in trees) {
+  // це не виконається
+}
+
+ +

Якщо вам потрібно, щоб елемент існував, але мав значення undefined, скористайтесь ключовим словом undefined замість оператора delete. У наступному прикладі trees[3] присвоюється значення undefined, але елемент масиву досі існує:

+ +
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+trees[3] = undefined;
+if (3 in trees) {
+  // це виконається
+}
+
+ +

typeof

+ +

Оператор typeof використовується наступним чином:

+ +
typeof операнд
+typeof (операнд)
+
+ +

Оператор typeof повертає рядок, що вказує тип необчисленого операнда. Операнд є рядком, змінною, ключовим словом чи об'єктом, для якого треба повернути тип. Круглі дужки є необов'язковими.

+ +

Припустимо, ви визначили наступні змінні:

+ +
var myFun = new Function('5 + 2');
+var shape = 'коло';
+var size = 1;
+var foo = ['Яблуко', 'Манго', 'Апельсин'];
+var today = new Date();
+
+ +

Оператор typeof вертає наступні результати для цих змінних:

+ +
typeof myFun;       // вертає "function"
+typeof shape;       // вертає "string"
+typeof size;        // вертає "number"
+typeof foo;         // вертає "object"
+typeof today;       // вертає "object"
+typeof doesntExist; // вертає "undefined"
+
+ +

Для ключових слів true та null оператор typeof вертає наступні результати:

+ +
typeof true; // вертає "boolean"
+typeof null; // вертає "object"
+
+ +

Для числа та рядка оператор typeof вертає наступні результати:

+ +
typeof 62;            // вертає "number"
+typeof 'Hello world'; // вертає "string"
+
+ +

Для значень властивостей оператор typeof вертає тип значення, яке містить ця властивість:

+ +
typeof document.lastModified; // вертає "string"
+typeof window.length;         // вертає "number"
+typeof Math.LN2;              // вертає "number"
+
+ +

Для методів та функцій оператор typeof вертає наступні результати:

+ +
typeof blur;        // вертає "function"
+typeof eval;        // вертає "function"
+typeof parseInt;    // вертає "function"
+typeof shape.split; // вертає "function"
+
+ +

Для попередньо визначених об'єктів оператор typeof вертає наступні результати:

+ +
typeof Date;     // вертає "function"
+typeof Function; // вертає "function"
+typeof Math;     // вертає "object"
+typeof Option;   // вертає "function"
+typeof String;   // вертає "function"
+
+ +

void

+ +

Оператор void використовується наступним чином:

+ +
void (вираз)
+void вираз
+
+ +

Оператор void вказує, що вираз має бути обчислений без повернення значення. Вираз є виразом JavaScript, який треба обчислити. Дужки, що оточують вираз, є необов'язковими, але вживати їх є гарним стилем.

+ +

Ви можете скористатись оператором void, щоб вказати вираз як гіпертекстове посилання. Вираз обчислюється, але не завантажується на місці відкритого документа.

+ +

Наступний код створює гіпертекстове посилання, яке нічого не робить, коли користувач на нього натискає. Коли користувач натискає на посилання, void(0) обчислюється як undefined, що не має жодного ефекту у JavaScript.

+ +
<a href="javascript:void(0)">Натисніть сюди, щоб нічого не робити</a>
+
+ +

Наступний код створює гіпертекстове посилання, яке відправляє форму, коли користувач натискає на нього.

+ +
<a href="javascript:void(document.form.submit())">
+Натисніть сюди, щоб відправити</a>
+ +

Оператори відношення

+ +

Оператор відношення порівнює свої операнди та повертає значення Boolean, на підставі того, чи є порівняння істиною.

+ +

in

+ +

Оператор in повертає true, якщо вказана властивість існує на вказаному об'єкті. Синтаксис наступний:

+ +
propNameOrNumber in objectName
+
+ +

де propNameOrNumber є рядковим або числовим виразом, який відображає ім'я властивості або індекс у масиві, а objectName є ім'ям об'єкта.

+ +

Наступний приклад демонструє варіанти використання оператора in.

+ +
// Масиви
+var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
+0 in trees;        // вертає true
+3 in trees;        // вертає true
+6 in trees;        // вертає false
+'лавр' in trees;    // вертає false (ви маєте вказати індекс,
+                   // а не значення за цим індексом)
+'length' in trees; // вертає true (length є властивістю масиву)
+
+// вбудовані об'єкти
+'PI' in Math;          // вертає true
+var myString = new String('корал');
+'length' in myString;  // вертає true
+
+// Користувацькі об'єкти
+var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
+'make' in mycar;  // вертає true
+'model' in mycar; // вертає true
+
+ +

instanceof

+ +

Оператор instanceof повертає true, якщо вказаний об'єкт належить до вказаного типу. Синтаксис наступний:

+ +
objectName instanceof objectType
+
+ +

де objectName є ім'ям об'єкта, який порівнюється з objectType, а objectType є типом об'єкта, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.

+ +

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

+ +

Наприклад, наступний код використовує instanceof для визначення того, чи theDay є об'єктом Date. Оскільки theDay є об'єктом Date, інструкції у блоці if будуть виконані.

+ +
var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // інструкції для виконання
+}
+
+ +

Пріоритет операторів

+ +

Пріоритет операторів визначає порядок, у якому вони застосовуються під час обчислення виразу. Ви можете змінити пріоритет оператора, використавши дужки.

+ +

Наступна таблиця наводить пріоритети операторів, від найвищого до найнижчого.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Пріоритет операторів
Тип оператораОкремі оператори
властивість. []
виклик / створення екземпляра() new
заперечення / інкремент! ~ - + ++ -- typeof void delete
множення / ділення* / %
додавання / віднімання+ -
бітовий зсув<< >> >>>
відношення< <= > >= in instanceof
рівність== != === !==
побітове-і&
виключне-побітове-або^
побітове-або|
логічне-і&&
логічне-або||
умовний?:
присвоєння= += -= *= /= %= <<= >>= >>>= &= ^= |=
кома,
+ +

Більш детальну версію цієї таблиці, доповнену посиланнями на додаткові подробиці щодо кожного оператора, можна знайти у довіднику з JavaScript.

+ +

Вирази

+ +

Виразом є будь-яка одиниця коду, яка вирішується з певним значенням.

+ +

Кожний синтаксично коректний вираз вирішується з якимось значенням, але, концептуально, існують два типи виразів: з побічними ефектами (наприклад: ті, що присвоюють значення змінній) та такі, що обчислюються і, таким чином, вирішуються з певним значенням.

+ +

Вираз x = 7 є прикладом першого типу. Цей вираз використовує оператор = для присвоєння семи змінній x. Сам вираз обчислюється з результатом сім.

+ +

Код 3 + 4 є прикладом другого типу виразів. Цей вираз за допомогою оператора + складає три та чотири без присвоєння результату, семи, змінній.
+
+ JavaScript має наступні категорії виразів:

+ + + +

Первинні вирази

+ +

Базові ключові слова та загальні вирази у JavaScript.

+ +

this

+ +

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

+ +
this['propertyName']
+this.propertyName
+
+ +

Припустимо, функція на ім'я validate перевіряє властивість об'єкта value, маючи найменше та найбільше значення:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival))
+    console.log('Некоректне значення!');
+}
+
+ +

Ви можете викликати validate в кожному обробнику подій елементів форми onChange, використовуючи this, щоб передати йому елемент форми, як у наступному прикладі:

+ +
<p>Введіть число між 18 та 99:</p>
+<input type="текст" name="вік" size=3 onChange="validate(this, 18, 99);">
+
+ +

Оператор групування

+ +

Оператор групування ( ) контролює пріоритет обчислення у виразах. Наприклад, ви можете змінити обчислення спочатку множення та ділення, а потім додавання та віднімання, щоб обчислити спочатку додавання.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// пріоритет за замовчуванням
+a + b * c     // 7
+// обчислюється наступним чином
+a + (b * c)   // 7
+
+// тепер змінюємо пріоритет
+// додавання перед множенням
+(a + b) * c   // 9
+
+// що є рівнозначним
+a * c + b * c // 9
+
+ +

Лівосторонні вирази

+ +

Значення зліва є призначенням присвоєння.

+ +

new

+ +

Ви можете скористатись оператором new, щоб створити екземпляр визначеного користувачем типу об'єкта або одного з вбудованих типів. Використовуйте new наступним чином:

+ +
var objectName = new objectType([param1, param2, ..., paramN]);
+
+ +

super

+ +

Ключове слово super використовується для виклику функцій батьківського об'єкта. Воно корисне для використання з класами, для виклику батьківського конструктора, наприклад.

+ +
super([arguments]); // викликає батьківський конструктор.
+super.functionOnParent([arguments]);
+
+ +

Оператор розпакування

+ +

Оператор розпакування дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).

+ +

Приклад: Сьогодні, якщо ви маєте масив та бажаєте створити новий масив, використавши існуючий масив як його частину, синтаксису масивного літералу більше недостатньо, і вам доводиться повертатись до імперативного коду, використовуючи комбінацію з push, splice, concat, і т. д. З оператором розпакування все стає набагато лаконічнішим:

+ +
var parts = ['плечі', 'коліна'];
+var lyrics = ['голова', ...parts, 'та', 'пальці'];
+ +

Схожим чином оператор розпакування працює з викликами функцій:

+ +
function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);
+ +
{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
diff --git "a/files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" "b/files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" deleted file mode 100644 index fdfbc0659b..0000000000 --- "a/files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" +++ /dev/null @@ -1,925 +0,0 @@ ---- -title: Вирази та оператори -slug: Web/JavaScript/Guide/Вирази_та_оператори -tags: - - JavaScript - - Оператори - - Посібник - - вирази -translation_of: Web/JavaScript/Guide/Expressions_and_Operators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
- -

Цей розділ описує вирази та оператори JavaScript, такі як присвоювання, порівняння, арифметичні оператори, бітові, логічні, рядкові, тернарний та інші.

- -

Повний та детальний список операторів та виразів також доступний за посиланням.

- -

Оператори

- -

JavaScript має наступні типи операторів. Ця секція описує оператори, а також містить інформацію щодо їхніх пріоритетів.

- - - -

JavaScript має як бінарні, так і унарні оператори, а також один особливий тернарний оператор - умовний оператор. Бінарному оператору потрібні два операнди - один перед оператором, інший після оператора:

- -
операнд1 оператор операнд2
-
- -

Наприклад, 3+4 чи x*y.

- -

Унарний оператор потребує лише одного операнду до чи після оператора:

- -
оператор операнд
-
- -

чи

- -
операнд оператор
-
- -

Наприклад, x++ чи ++x.

- -

Оператори присвоєння

- -

Оператор присвоєння присвоює своєму лівому операнду значення на підставі значення правого операнда. Простим оператором присвоєння є оператор дорівнює (=), який присвоює значення свого правого операнда лівому операнду. Таким чином, x = y присвоює значення змінної y змінній x.

- -

Також існують складені оператори присвоєння, які є скороченнями для операцій, перелічених у наступній таблиці:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Складені оператори присвоювання
НазваОператор скороченого записуЗначення
Присвоєнняx = yx = y
Присвоєння з додаваннямx += yx = x + y
Присвоєння з відніманнямx -= yx = x - y
Присвоєння з множеннямx *= yx = x * y
Присвоєння з діленнямx /= yx = x / y
Присвоєння остачіx %= yx = x % y
Присвоєння з піднесенням до степеня{{experimental_inline}}x **= yx = x ** y
Присвоєння з лівим зсувомx <<= yx = x << y
Присвоєння з правим зсувомx >>= yx = x >> y
Присвоєння з беззнаковим правим зсувомx >>>= yx = x >>> y
Присвоєння з побітовим Іx &= yx = x & y
Присвоєння з виключним побітовим АБОx ^= yx = x ^ y
Присвоєння з побітовим АБОx |= yx = x | y
- -

Деструктуризація

- -

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

- -
var foo = ['один', 'два', 'три'];
-
-// без деструктуризації
-var one   = foo[0];
-var two   = foo[1];
-var three = foo[2];
-
-// із деструктуризацією
-var [one, two, three] = foo;
-
- -

Оператори порівняння

- -

Оператор порівняння порівнює свої операнди та повертає логічне значення, базуючись на істинності порівняння. Операнди можуть бути числовими, рядковими, логічними значеннями або об'єктами. Рядки порівнюються згідно стандартного лексикографічного порядку, з використанням значень Unicode. У більшості випадків, якщо два операнди не належать до одного типу, JavaScript намагається привести їх до належного для порівняння типу. Зазвичай це призводить до числового порівняння операндів. Єдиними винятками у конвертації типів під час порівняння є оператори === та !==, які виконують перевірку на строгу рівність та строгу нерівність. Ці оператори не намагаються перед перевіркою на рівність привести операнди до спільного типу. Наступна таблиця наводить оператори порівняння у контексті цього фрагменту коду:

- -
var var1 = 3;
-var var2 = 4;
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Оператори порівняння
ОператорОписПриклади, які повертають true
Рівність (==)Повертає true, якщо оператори рівні.3 == var1 -

"3" == var1

- 3 == '3'
Нерівність (!=)Повертає true, якщо оператори нерівні.var1 != 4
- var2 != "3"
Строга рівність (===)Повертає true якщо оператори рівні та належать до одного типу. Дивіться також {{jsxref("Object.is")}} та однаковість у JS.3 === var1
Строга нерівність (!==)Повертає true, якщо оператори належать до одного типу, але нерівні, або належать до різних типів.var1 !== "3"
- 3 !== '3'
Більше ніж (>)Повертає true, якщо лівий операнд більший за правий.var2 > var1
- "12" > 2
Більше чи дорівнює (>=)Повертає true, якщо значення лівого операнда більше або дорівнює значенню правого операнда.var2 >= var1
- var1 >= 3
Менше ніж (<)Повертає true, якщо лівий операнд менший за правий.var1 < var2
- "2" < 12
Менше чи дорівнює (<=)Повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.var1 <= var2
- var2 <= 5
- -
-

Заувага: (=>) не оператор, а позначення для стрілкових функцій.

-
- -

Арифметичні оператори

- -

Арифметичний оператор приймає числові значення (літерали чи змінні) в якості операндів та повертає єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/). Ці оператори працюють так само, як і в більшості інших мов програмування при використанні з числами з рухомою комою (зокрема, зауважте, що ділення на нуль повертає {{jsxref("Infinity")}}). Наприклад:

- -
1 / 2; // 0.5
-1 / 2 == 1.0 / 2.0; // це дорівнює true
-
- -

На додачу до стандартних арифметичних операцій (+, -, * /), JavaScript надає арифметичні операції, перечислені у наведеній нижче таблиці:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Арифметичні оператори
ОператорОписПриклад
Остача (%)Бінарний оператор. Повертає цілочисельну остачу від ділення двох операндів.12 % 5 повертає 2.
Інкремент (++)Унарний оператор. Додає до операнда одиницю. Якщо використовується як префіксний оператор (++x), повертає значення операнда після додавання одиниці; якщо використовується як постфіксний оператор (x++), повертає значення операнда перед додаванням одиниці.Якщо x дорівнює 3, тоді ++x присвоює x значення 4 та повертає 4, в той час, як x++ повертає 3 і лише тоді присвоює x значення 4.
Декремент (--)Унарний оператор. Віднімає одиницю від свого операнда. Повернене значення аналогічне поверненому значенню оператора інкременту.Якщо x дорівнює 3, тоді --x присвоює x значення 2 та повертає 2, в той час, як x-- повертає 3 і тільки тоді присвоює x значення 2.
Унарний мінус (-)Унарний оператор. Повертає операнд з протилежним знаком.Якщо x дорівнює 3, то -x повертає -3.
Унарний плюс (+)Унарний оператор. Намагається перетворити операнд на число, якщо він не є числом.+"3" повертає 3.
- +true повертає 1.
Піднесення до степеня (**) {{experimental_inline}}Підносить основу степеня до показника степеня, тобто, основапоказник2 ** 3 повертає 8.
- 10 ** -1 повертає 0.1.
- -

Бітові оператори

- -

Бітовий оператор опрацьовує свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові або вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.

- -

Наступна таблиця наводить перелік бітових операторів JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Бітові оператори
ОператорЗастосуванняОпис
Побітове І (AND)a & bПовертає одиницю на кожній позиції, де відповідні біти обох операндів дорівнюють одиницям.
Побітове АБО (OR)a | bПовертає нуль на кожній позиції, де відповідні біти обох операндів дорівнюють нулям.
Виключне побітове АБО (XOR)a ^ bПовертає нуль на кожній позиції, де відповідні біти однакові.
- [Повертає один на кожній позиції, де відповідні біти мають різні значення.]
Побітове НЕ (NOT)~ aВиконує інверсію бітів операнду.
Лівий зсувa << bЗсуває a у двійковому представленні на b бітів ліворуч, заповнюючи позиції справа нулями.
Правий зсув з розширенням знакуa >> bЗсуває a у двійковому представленні на b бітів праворуч, відкидаючи зсунуті біти.
Правий зсув із заповненням нулямиa >>> bЗсуває a у двійковому представленні на b бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.
- -

Побітові логічні оператори

- -

Концептуально побітові логічні оператори працюють наступним чином:

- - - -

Наприклад, бінарним представленням числа дев'ять є 1001, а бінарним представленням п'ятнадцяти є 1111. Отже, коли бітові оператори застосовуються до цих величин, результати будуть наступні:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Приклади бітових операторів
ВиразРезультатДвійковий опис
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
- -

Зауважте, що усі 32 біти інвертуються побітовим оператором НЕ, і що значення, в яких найстарший (перший зліва) біт дорівнює 1, відображають від'ємні числа (формат доповняльного коду).

- -

Оператори бітового зсуву

- -

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

- -

Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа та повертають результат того самого типу, до якого належить лівий операнд.

- -

Оператори зсуву наведені у наступній таблиці.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Оператори бітового зсуву
ОператорОписПриклад
Лівий зсув
- (<<)		Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.9<<2 вертає 36, тому що число 1001, зсунуте на 2 біти ліворуч, стає 100100, тобто, 36.
Правий зсув з розширенням знаку (>>) -

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта.

- 		9>>2 вертає 2, тому що число 1001, зсунуте на 2 біти праворуч, стає 10, тобто 2. Аналогічно, -9>>2 вертає -3,  тому що знак зберігається.
Правий зсув із заповненням нулями(>>>) -

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями.

- 		19>>>2 вертає 4, тому що число 10011, зсунуте на 2 бітів праворуч, стає 100, тобто 4. Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат.
- -

Логічні оператори

- -

Логічні оператори застосовуються до булевих (логічних) значень; в цьому випадку вони повертають значення типу Boolean. Однак, оператори && та || насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу. Логічні оператори описані у наведеній нижче таблиці.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Логічні оператори
ОператорЗастосуванняОпис
Логічне І (&&)expr1 && expr2Вертає вираз expr1, якщо він може бути перетворений на false; інакше, повертає expr2. Таким чином, при використанні з булевими значеннями && вертає true, якщо обидва операнди дорівнюють true; інакше, вертає false.
Логічне АБО (||)expr1 || expr2Вертає вираз expr1, якщо він може бути перетворений на true; інакше, вертає expr2. Таким чином, при використанні з булевими значеннями || вертає true, якщо будь-який з операндів дорівнює true; якщо обидва дорівнюють false, вертає false.
Логічне НЕ (!)!exprВертає false, якщо його єдиний операнд може бути перетворений на true; інакше, вертає true.
- -

Прикладами виразів, які можуть бути перетворені на false, є ті, які повертають null, 0, NaN, порожній рядок ("") або undefined.

- -

Наступний код демонструє приклади оператора && (логічне І).

- -
var a1 =  true && true;     // t && t вертає true
-var a2 =  true && false;    // t && f вертає false
-var a3 = false && true;     // f && t вертає false
-var a4 = false && (3 == 4); // f && f вертає false
-var a5 = 'Кіт' && 'Пес';    // t && t вертає Пес
-var a6 = false && 'Кіт';    // f && t вертає false
-var a7 = 'Кіт' && false;    // t && f вертає false
-
- -

Наступний код демонструє приклади оператора || (логічне АБО).

- -
var o1 =  true || true;     // t || t вертає true
-var o2 = false || true;     // f || t вертає true
-var o3 =  true || false;    // t || f вертає true
-var o4 = false || (3 == 4); // f || f вертає false
-var o5 = 'Кіт' || 'Пес';    // t || t вертає Кіт
-var o6 = false || 'Кіт';    // f || t вертає Кіт
-var o7 = 'Кіт' || false;    // t || f вертає Кіт
-
- -

Наступний код демонструє приклади оператора ! (логічне НЕ).

- -
var n1 = !true;  // !t вертає false
-var n2 = !false; // !f вертає true
-var n3 = !'Кіт'; // !t вертає false
-
- -

Коротке замикання обчислення

- -

Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:

- - - -

Правила логіки гарантують, що ці обчислення завжди будуть правильними. Зауважте, що частина виразу будь-що не обчислюється, тому будь-які побічні ефекти від цих обчислень не відбудуться.

- -

Рядкові оператори

- -

На додачу до операторів порівняння, які можуть застосовуватись до рядкових значень, оператор конкатенації (+) об'єднує значення двох рядків, повертаючи інший рядок, який є об'єднанням рядків двох операндів.

- -

Наприклад,

- -
console.log('мій ' + 'рядок'); // консоль виводить рядок "мій рядок".
- -

Скорочений оператор присвоєння += також може застосовуватись для конкатенації рядків.

- -

Наприклад,

- -
var mystring = 'алфа';
-mystring += 'віт'; // повертає "алфавіт" та присвоює це значення mystring.
- -

Умовний (тернарний) оператор

- -

Умовний оператор - єдиний оператор у JavaScript, який приймає три операнди. У оператора може бути одне чи два значення, в залежності від умови. Використовує наступний синтакс:

- -
умова ? значення1 : значення2
-
- -

Якщо умова дорівнює true, оператор повертає значення1.  В іншому випадку - значення2. Умовний оператор можна використовувати будь-де, де використовується звичайний оператор. Наприклад:

- -
var status = (age >= 18) ? 'дорослий' : 'неповнолітній';
-
- -

Ця інструкція присвоює значення "дорослий" змінній status, якщо значення age (вік) більше чи дорівнює 18. Інакше, вона присвоює змінній status значення "неповнолітній".

- -

Оператор кома

- -

Оператор кома (,) просто обчислює обидва свої операнди та повертає значення останнього операнда. Цей оператор найчастіше використовується всередині циклу for, що дозволяє оновлювати більше однієї змінної на кожному проході циклу.

- -

Наприклад, якщо a є двовимірним масивом з 10 елементами по кожній стороні, наступний код використовує оператор кома, щоб оновити дві змінні одночасно. Код виводить значення діагональних елементів масиву:

- -
for (var i = 0, j = 9; i <= j; i++, j--)
-  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
-
- -

Унарні оператори

- -

Унарна операція - це операція лише з одним операндом.

- -

delete

- -

Оператор delete видаляє об'єкт, властивість об'єкта або елемент за вказаним індексом у масиві. Синтаксис наступний:

- -
delete objectName;
-delete objectName.property;
-delete objectName[index];
-delete property; // працює лише всередині конструкції with
-
- -

де objectName є іменем об'єкта, property - існуюча властивість, а index - ціле число, що вказує розташування елемента у масиві.

- -

Четверта форма працює лише всередині блоку with для видалення властивості об'єкта.

- -

Ви можете використовувати оператор delete для видалення змінних, оголошених неявно, але не тих, що були оголошені оператором var.

- -

Якщо оператор delete відпрацьовує успішно, значенням властивості чи елемента стає undefined. Оператор delete повертає true, якщо операція можлива; він повертає false, якщо операція неможлива.

- -
x = 42;
-var y = 43;
-myobj = new Number();
-myobj.h = 4;    // створює властивість h
-delete x;       // вертає true (можна видалити властивість, оголошену неявно)
-delete y;       // вертає false (не можна видалити властивість, оголошену через var)
-delete Math.PI; // вертає false (не можна видаляти попередньо визначені властивості)
-delete myobj.h; // вертає true (можна видалити властивість, визначену користувачем)
-delete myobj;   // вертає true (можна видалити, якщо властивість оголошена неявно)
-
- -
Видалення елементів масиву
- -

Коли ви видаляєте елемент масиву, це не впливає на довжину масиву. Для прикладу, якщо ви видалите a[3], a[4] досі є a[4], а a[3] дорівнює undefined.

- -

Коли оператор delete видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі trees[3] видаляється оператором delete. Однак, адреса trees[3] досі доступна та повертає undefined.

- -
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
-delete trees[3];
-if (3 in trees) {
-  // це не виконається
-}
-
- -

Якщо вам потрібно, щоб елемент існував, але мав значення undefined, скористайтесь ключовим словом undefined замість оператора delete. У наступному прикладі trees[3] присвоюється значення undefined, але елемент масиву досі існує:

- -
var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
-trees[3] = undefined;
-if (3 in trees) {
-  // це виконається
-}
-
- -

typeof

- -

Оператор typeof використовується наступним чином:

- -
typeof операнд
-typeof (операнд)
-
- -

Оператор typeof повертає рядок, що вказує тип необчисленого операнда. Операнд є рядком, змінною, ключовим словом чи об'єктом, для якого треба повернути тип. Круглі дужки є необов'язковими.

- -

Припустимо, ви визначили наступні змінні:

- -
var myFun = new Function('5 + 2');
-var shape = 'коло';
-var size = 1;
-var foo = ['Яблуко', 'Манго', 'Апельсин'];
-var today = new Date();
-
- -

Оператор typeof вертає наступні результати для цих змінних:

- -
typeof myFun;       // вертає "function"
-typeof shape;       // вертає "string"
-typeof size;        // вертає "number"
-typeof foo;         // вертає "object"
-typeof today;       // вертає "object"
-typeof doesntExist; // вертає "undefined"
-
- -

Для ключових слів true та null оператор typeof вертає наступні результати:

- -
typeof true; // вертає "boolean"
-typeof null; // вертає "object"
-
- -

Для числа та рядка оператор typeof вертає наступні результати:

- -
typeof 62;            // вертає "number"
-typeof 'Hello world'; // вертає "string"
-
- -

Для значень властивостей оператор typeof вертає тип значення, яке містить ця властивість:

- -
typeof document.lastModified; // вертає "string"
-typeof window.length;         // вертає "number"
-typeof Math.LN2;              // вертає "number"
-
- -

Для методів та функцій оператор typeof вертає наступні результати:

- -
typeof blur;        // вертає "function"
-typeof eval;        // вертає "function"
-typeof parseInt;    // вертає "function"
-typeof shape.split; // вертає "function"
-
- -

Для попередньо визначених об'єктів оператор typeof вертає наступні результати:

- -
typeof Date;     // вертає "function"
-typeof Function; // вертає "function"
-typeof Math;     // вертає "object"
-typeof Option;   // вертає "function"
-typeof String;   // вертає "function"
-
- -

void

- -

Оператор void використовується наступним чином:

- -
void (вираз)
-void вираз
-
- -

Оператор void вказує, що вираз має бути обчислений без повернення значення. Вираз є виразом JavaScript, який треба обчислити. Дужки, що оточують вираз, є необов'язковими, але вживати їх є гарним стилем.

- -

Ви можете скористатись оператором void, щоб вказати вираз як гіпертекстове посилання. Вираз обчислюється, але не завантажується на місці відкритого документа.

- -

Наступний код створює гіпертекстове посилання, яке нічого не робить, коли користувач на нього натискає. Коли користувач натискає на посилання, void(0) обчислюється як undefined, що не має жодного ефекту у JavaScript.

- -
<a href="javascript:void(0)">Натисніть сюди, щоб нічого не робити</a>
-
- -

Наступний код створює гіпертекстове посилання, яке відправляє форму, коли користувач натискає на нього.

- -
<a href="javascript:void(document.form.submit())">
-Натисніть сюди, щоб відправити</a>
- -

Оператори відношення

- -

Оператор відношення порівнює свої операнди та повертає значення Boolean, на підставі того, чи є порівняння істиною.

- -

in

- -

Оператор in повертає true, якщо вказана властивість існує на вказаному об'єкті. Синтаксис наступний:

- -
propNameOrNumber in objectName
-
- -

де propNameOrNumber є рядковим або числовим виразом, який відображає ім'я властивості або індекс у масиві, а objectName є ім'ям об'єкта.

- -

Наступний приклад демонструє варіанти використання оператора in.

- -
// Масиви
-var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен'];
-0 in trees;        // вертає true
-3 in trees;        // вертає true
-6 in trees;        // вертає false
-'лавр' in trees;    // вертає false (ви маєте вказати індекс,
-                   // а не значення за цим індексом)
-'length' in trees; // вертає true (length є властивістю масиву)
-
-// вбудовані об'єкти
-'PI' in Math;          // вертає true
-var myString = new String('корал');
-'length' in myString;  // вертає true
-
-// Користувацькі об'єкти
-var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
-'make' in mycar;  // вертає true
-'model' in mycar; // вертає true
-
- -

instanceof

- -

Оператор instanceof повертає true, якщо вказаний об'єкт належить до вказаного типу. Синтаксис наступний:

- -
objectName instanceof objectType
-
- -

де objectName є ім'ям об'єкта, який порівнюється з objectType, а objectType є типом об'єкта, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.

- -

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

- -

Наприклад, наступний код використовує instanceof для визначення того, чи theDay є об'єктом Date. Оскільки theDay є об'єктом Date, інструкції у блоці if будуть виконані.

- -
var theDay = new Date(1995, 12, 17);
-if (theDay instanceof Date) {
-  // інструкції для виконання
-}
-
- -

Пріоритет операторів

- -

Пріоритет операторів визначає порядок, у якому вони застосовуються під час обчислення виразу. Ви можете змінити пріоритет оператора, використавши дужки.

- -

Наступна таблиця наводить пріоритети операторів, від найвищого до найнижчого.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Пріоритет операторів
Тип оператораОкремі оператори
властивість. []
виклик / створення екземпляра() new
заперечення / інкремент! ~ - + ++ -- typeof void delete
множення / ділення* / %
додавання / віднімання+ -
бітовий зсув<< >> >>>
відношення< <= > >= in instanceof
рівність== != === !==
побітове-і&
виключне-побітове-або^
побітове-або|
логічне-і&&
логічне-або||
умовний?:
присвоєння= += -= *= /= %= <<= >>= >>>= &= ^= |=
кома,
- -

Більш детальну версію цієї таблиці, доповнену посиланнями на додаткові подробиці щодо кожного оператора, можна знайти у довіднику з JavaScript.

- -

Вирази

- -

Виразом є будь-яка одиниця коду, яка вирішується з певним значенням.

- -

Кожний синтаксично коректний вираз вирішується з якимось значенням, але, концептуально, існують два типи виразів: з побічними ефектами (наприклад: ті, що присвоюють значення змінній) та такі, що обчислюються і, таким чином, вирішуються з певним значенням.

- -

Вираз x = 7 є прикладом першого типу. Цей вираз використовує оператор = для присвоєння семи змінній x. Сам вираз обчислюється з результатом сім.

- -

Код 3 + 4 є прикладом другого типу виразів. Цей вираз за допомогою оператора + складає три та чотири без присвоєння результату, семи, змінній.
-
- JavaScript має наступні категорії виразів:

- - - -

Первинні вирази

- -

Базові ключові слова та загальні вирази у JavaScript.

- -

this

- -

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

- -
this['propertyName']
-this.propertyName
-
- -

Припустимо, функція на ім'я validate перевіряє властивість об'єкта value, маючи найменше та найбільше значення:

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival))
-    console.log('Некоректне значення!');
-}
-
- -

Ви можете викликати validate в кожному обробнику подій елементів форми onChange, використовуючи this, щоб передати йому елемент форми, як у наступному прикладі:

- -
<p>Введіть число між 18 та 99:</p>
-<input type="текст" name="вік" size=3 onChange="validate(this, 18, 99);">
-
- -

Оператор групування

- -

Оператор групування ( ) контролює пріоритет обчислення у виразах. Наприклад, ви можете змінити обчислення спочатку множення та ділення, а потім додавання та віднімання, щоб обчислити спочатку додавання.

- -
var a = 1;
-var b = 2;
-var c = 3;
-
-// пріоритет за замовчуванням
-a + b * c     // 7
-// обчислюється наступним чином
-a + (b * c)   // 7
-
-// тепер змінюємо пріоритет
-// додавання перед множенням
-(a + b) * c   // 9
-
-// що є рівнозначним
-a * c + b * c // 9
-
- -

Лівосторонні вирази

- -

Значення зліва є призначенням присвоєння.

- -

new

- -

Ви можете скористатись оператором new, щоб створити екземпляр визначеного користувачем типу об'єкта або одного з вбудованих типів. Використовуйте new наступним чином:

- -
var objectName = new objectType([param1, param2, ..., paramN]);
-
- -

super

- -

Ключове слово super використовується для виклику функцій батьківського об'єкта. Воно корисне для використання з класами, для виклику батьківського конструктора, наприклад.

- -
super([arguments]); // викликає батьківський конструктор.
-super.functionOnParent([arguments]);
-
- -

Оператор розпакування

- -

Оператор розпакування дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).

- -

Приклад: Сьогодні, якщо ви маєте масив та бажаєте створити новий масив, використавши існуючий масив як його частину, синтаксису масивного літералу більше недостатньо, і вам доводиться повертатись до імперативного коду, використовуючи комбінацію з push, splice, concat, і т. д. З оператором розпакування все стає набагато лаконічнішим:

- -
var parts = ['плечі', 'коліна'];
-var lyrics = ['голова', ...parts, 'та', 'пальці'];
- -

Схожим чином оператор розпакування працює з викликами функцій:

- -
function f(x, y, z) { }
-var args = [0, 1, 2];
-f(...args);
- -
{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
-- cgit v1.2.3-54-g00ecf