initial commit

4 files changed, 786 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/classes/constructor/index.html b/files/uk/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..488a9c1829
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,119 @@
+---
+title: Конструктор
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - Classes
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Метод <code>constructor</code> — це особливий метод, призначений для створення й започаткування (ініціалізації) новоствореного примірника класу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">constructor([аргументи]) { … }</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Клас може мати лише один метод з іменем «constructor». Спроба оголосити декілька методів «constructor» для одного класу матиме наслідком помилку {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}.</p>
+
+<p>Метод <code>constructor</code> може звернутися до однойменного методу батьківського класу (надкласу) через ключове слово <code>{{jsxref("Operators/super", "super")}}</code>.</p>
+
+<p>За відсутності оголошеного методу <code>constructor</code> буде використано типовий започаткувач (конструктор).</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_методу_constructor">Використання методу <code>constructor</code></h3>
+
+<p>Цей шмат коду взято з <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">переглянути наживо</a>):</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Наступний рядок здійснює виклик успадкованого від Polygon
+    // конструктора, передаючи до нього власні параметри.
+    super(length, length);
+
+    // Завважте, що в класах-нащадках виклик super() завжди має передувати
+    // найпершому звертанню до this. Інакше матимете помилку.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Інший_приклад">Інший приклад</h3>
+
+<p>Погляньте також на цей приклад:</p>
+
+<pre class="brush: js">class Polygon {
+    constructor() {
+        this.name = "Polygon";
+    }
+}
+
+class Square extends Polygon {
+    constructor() {
+        super();
+    }
+}
+
+let newInstance = new Square();
+console.log(newInstance.name);  // виводить "Polygon"</pre>
+
+<h3 id="Типові_конструктори">Типові конструктори</h3>
+
+<p>Якщо метод <code>constructor</code> не оголошено, буде використано типовий конструктор. Для первинного класу (що не успадковує інших) то є метод з порожнім тілом:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Натомість для вторинного класу (що успадковує якийсь інший клас) типовим конструктором є такий:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">вираз <code>class</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення <code>class</code></a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/classes/extends/index.html b/files/uk/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..fb64cf21aa
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,112 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Ключове слово <strong><code>extends</code></strong> використовується у <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошеннях класів</a> або у <a href="/uk/docs/Web/JavaScript/Reference/Operators/class">виразах класів</a> для створення дочірнього класу від іншого класу.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Ключове слово <code>extends</code> може використовуватись для створення підкласів з користувацьких класів, як і з вбудованих об'єктів.</p>
+
+<p>Значенням <code>.prototype</code> батьківського класу має бути {{jsxref("Object")}} або {{jsxref("null")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_extends">Використання <code>extends</code></h3>
+
+<p>Перший приклад створює клас на ім'я <code>Square</code> (квадрат) з класу на ім'я <code>Polygon</code> (багатокутник). Даний приклад взятий з цього <a href="https://googlechrome.github.io/samples/classes-es6/index.html">зразка </a><a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(джерело)</a>.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Тут він викликає конструктор батьківського класу
+    // та надає значення ширини й довжини багатокутника
+    super(length, length);
+    // Заувага: У похідному класі super() має викликатися до
+    // використання 'this'. Інакше виникне помилка посилання.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}</pre>
+
+<h3 id="Використання_extends_із_вбудованими_обєктами">Використання <code>extends</code> із вбудованими об'єктами</h3>
+
+<p>Цей приклад розширює вбудований об'єкт {{jsxref("Date")}}. Даний приклад взяти з цього <a href="https://googlechrome.github.io/samples/classes-es6/index.html">зразка</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(джерело)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Розширення_null">Розширення <code>null</code></h3>
+
+<p>Розширення {{jsxref("null")}} працює, як для звичайних класів, за винятком того, що прототип не успадковується від {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+
+new nullExtends(); //ReferenceError: this is not defined
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+ <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super &amp; Extends in JavaScript</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/classes/index.html b/files/uk/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..ec1694bfd1
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/index.html
@@ -0,0 +1,418 @@
+---
+title: Класи
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+  - конструктори
+  - наслідування
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Класи в JavaScript були додані в стандарті ECMAScript 6 і є насамперед синтаксичним цукром для існуючого прототипного наслідування у JavaScript. Синтаксис класів <em>не впроваджує</em> нову модель об'єктно-орієнтованого наслідування у JavaScript.</p>
+
+<h2 id="Визначення_класів">Визначення класів</h2>
+
+<p>Класи - це, по факту, "особливі <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>", і так само, як ви можете визначити <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональний вираз</a> та <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функції</a>, синтаксис класу складається з двох компонентів: <a href="/uk/docs/Web/JavaScript/Reference/Operators/class">виразу класу</a> and <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення класу</a>.</p>
+
+<h3 id="Оголошення_класу">Оголошення класу</h3>
+
+<p>Одним зі способів визначення класу є <strong>оголошення класу</strong>. Для оголошення класу використовується ключове слово <code>class</code> з назвою класу (у прикладі нижче "Rectangle").</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Підняття">Підняття</h4>
+
+<p>Важлива відмінність між <strong>оголошеннями функції</strong> та <strong>класу</strong> полягає в тому, що оголошення функції {{Glossary("Hoisting", "піднімається")}}, а оголошення класу ні. Спочатку необхідно оголосити клас, і тільки потім звертатись до нього, інакше подібний код викине помилку {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+</pre>
+
+<h3 id="Вираз_класу">Вираз класу</h3>
+
+<p><strong>Вираз класу</strong> - це інший спосіб визначення класу. Вираз класу може бути іменованим або неіменованим. Ім'я, надане іменованому виразу класу, є локальним для тіла класу. (Хоча його можна отримати через властивість класу (не екземпляра) {{jsxref("Function.name", "name")}}).</p>
+
+<pre class="brush: js">// не іменований
+let Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// виведе "Rectangle"
+
+// іменований
+let Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// виведе "Rectangle2"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> <strong>Вирази</strong> класів підпадають під такі самі обмеження підняття, які описані у розділі {{anch("Оголошення класу")}}.</p>
+</div>
+
+<h2 id="Тіло_класу_та_визначення_методів">Тіло класу та визначення методів</h2>
+
+<p>Тіло класу - це та частина, що знаходиться у фігурних дужках <code>{}</code>. Тут ви визначаєте складові класу, такі як методи або конструктор.</p>
+
+<h3 id="Строгий_режим">Строгий режим</h3>
+
+<p>Код у тілі класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>, тобто, код, записаний тут, є предметом більш строгого синтаксису заради підвищення продуктивності. Деякі помилки, які пройшли б непоміченими, будуть викидатися, а певні ключові слова є зарезервованими для майбутніх версій ECMAScript.</p>
+
+<h3 id="Конструктор">Конструктор</h3>
+
+<p>Метод <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> - це спеціальний метод для створення та ініціалізації об'єктів, створених ключовим словом <code>class</code>. У класі може бути лише один спеціальний метод з ім'ям "constructor". Якщо клас містить більше одного метода <code>constructor</code>, виникне помилка {{jsxref("SyntaxError")}}.</p>
+
+<p>Конструктор може звертатися до конструктора батьківського класу за допомогою ключового слова <code>super</code>.</p>
+
+<h3 id="Методи_прототипу">Методи прототипу</h3>
+
+<p>Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначення методів</a>. </p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // гетер
+  get area() {
+    return this.calcArea();
+  }
+  // метод
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100</pre>
+
+<h3 id="Статичні_методи">Статичні методи</h3>
+
+<p>Ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/static">static</a></code> визначає статичний метод класу. Статичні методи класу викликаються без <a href="/uk/docs/Learn/JavaScript/Objects/Object-oriented_JS#Створення_реальних_об'єктів" title='Прикладом екземпляра класу є "var john = new Person();"'>створення екземпляра </a>свого класу і <strong>не можуть</strong> бути викликані через екземпляр класу. Статичні методи часто використовують для створеня функцій-утиліт для застосунків.</p>
+
+<pre class="brush: js">class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.hypot(dx, dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+p1.distance; //undefined
+p2.distance; //undefined
+
+console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre>
+
+<h3 id="Пакування_через_прототипні_та_статичні_методи">Пакування через прототипні та статичні методи</h3>
+
+<p>Коли статичний або прототипний метод викликається без значення для <em>this</em>, значенням <em>this</em> всередині метода буде <code>undefined</code>. Ця поведінка буде такою самою навіть якщо директива <code>"use strict"</code> не задана, тому що код в межах тіла класу завжди виконується у строгому режимі.</p>
+
+<pre class="brush: js">class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // Animal {}
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined</pre>
+
+<p>Якщо наведений приклад написаний з використанням традиційного синтаксису функцій, то автоматичне пакування при викликах методів відбуватиметься у нестрогому режимі, на основі початкового значення <em>this</em>. Якщо початковим значенням є <code>undefined</code>, <em>this</em> буде присвоєний глобальний об'єкт.</p>
+
+<p>Автопакування не відбудеться у строгому режимі, значення <em>this</em> залишиться незмінним.</p>
+
+<pre class="brush: js">function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object
+
+let eat = Animal.eat;
+eat(); // global object</pre>
+
+<h3 id="Властивості_екземпляра">Властивості екземпляра</h3>
+
+<p>Властивості екземпляра повинні визначатися всередині методів класу:</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>Статичні (на боці класу) властивості-значення та прототипні властивості-значення повинні визначатися за межами оголошення класу:</p>
+
+<pre class="brush: js">Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;</pre>
+
+<h3 id="Оголошення_полів_класу">Оголошення полів класу</h3>
+
+<div class="blockIndicator warning">
+<p>Оголошення публічних та приватних полів є <a href="https://github.com/tc39/proposal-class-fields">експериментальною функціональністю (stage 3)</a>, запропонованою на <a href="https://tc39.github.io/beta/">TC39</a>, комітеті стандартів JavaScript. Підтримка у переглядачах є обмеженою, але функціональність можна використовувати через збирачі пакетів з системами на кшталт <a href="https://babeljs.io/">Babel</a>.</p>
+</div>
+
+<h4 id="Оголошення_публічних_полів">Оголошення публічних полів</h4>
+
+<p>З синтаксисом оголошення полів JavaScript наведений вище приклад можна записати наступним чином:</p>
+
+<pre class="brush: js">class Rectangle {
+  height = 0;
+  width;
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>З оголошенням полів заздалегідь оголошення класу стає більш самозадокументованим, а поля завжди присутні.</p>
+
+<p>Як бачимо, оголошені поля можуть мати або не мати значення за замовчуванням.</p>
+
+<h4 id="Оголошення_приватних_полів">Оголошення приватних полів</h4>
+
+<p>З використанням приватних полів визначення можна вдосконалити наступним чином.</p>
+
+<pre class="brush: js">class Rectangle {
+  #height = 0;
+  #width;
+  constructor(height, width) {
+    this.#height = height;
+    this.#width = width;
+  }
+}</pre>
+
+<p>Буде помилкою посилатися на приватні поля поза межами класу; вони доступні для читання або запису тільки всередині тіла класу. Визначаючи щось, невидиме за межами класу, ви забезпечуєте умови, за яких користувачі ваших класів не зможуть покладатися на внутрішні властивості, які можуть змінюватись між версіями.</p>
+
+<p>Приватні поля можуть оголошуватися лише одразу при оголошенні полів.</p>
+
+<p>Приватні поля не можуть створюватись пізніше через присвоювання, як це роблять нормальні властивості.</p>
+
+<p>Щоб дізнатись більше, дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Classes/Class_fields">поля класу</a>.</p>
+
+<h2 id="Створення_підкласу_за_допомогою_extends">Створення підкласу за допомогою <code>extends</code></h2>
+
+<p>Ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> використовують у <em>оголошенні класу</em> або у <em>виразі класу</em>, щоб створити клас, як дочірній від іншого класу.</p>
+
+<pre class="brush: js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} видає звуки.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name) {
+    super(name); // викликати конструктор суперкласу та передати параметром ім'я
+  }
+
+  speak() {
+    console.log(`${this.name} гавкає.`);
+  }
+}
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні гавкає.</pre>
+
+<p>Якщо у підкласі присутній конструктор, він має спочатку викликати super(), перед використанням "this".</p>
+
+<p>Можна також розширювати через <code>extend</code> традиційні "класи" на основі функцій:</p>
+
+<pre class="brush: js">function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(`${this.name} видає звуки.`);
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(`${this.name} гавкає.`);
+  }
+}
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні гавкає.
+
+//Заувага: Для однойменних методів, дочірній метод переважає над батьківським</pre>
+
+<p>Зауважте, що класи не можуть розширювати звичайні об'єкти (не конструктори). Якщо бажаєте успадкуватись від звичайного об'єкта, можете натомість використати {{jsxref("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js">const Animal = {
+  speak() {
+    console.log(`${this.name} видає звуки.`);
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Якщо ви цього не зробите, то отримаєте помилку, викликавши speak
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+let d = new Dog('Мінні');
+d.speak(); // Мінні видає звуки.</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>Можливо, ви захочете повернути об'єкти {{jsxref("Array")}} у своєму похідному класі масиву <code>MyArray</code>. Шаблон species дозволяє перевизначати початкові конструктори.</p>
+
+<p>Наприклад, використовуючи такі методи, як {{jsxref("Array.map", "map()")}}, що повертає конструктор за замовчуванням, ви хочете, щоб ці методи повертали батьківський об'єкт <code>Array</code> замість об'єкту <code>MyArray</code>. Символ {{jsxref("Symbol.species")}} дозволяє це зробити:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Заміщення Symbol.species батьківським конструктором Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+</pre>
+
+<h2 id="Виклик_методів_суперкласу_за_допомогою_super">Виклик методів суперкласу за допомогою <code>super</code></h2>
+
+<p>Ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super</a></code> використовують для виклику відповідних методів суперкласу. Це одна з переваг над прототипним наслідуванням.</p>
+
+<pre class="brush: js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' видає звуки.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' ричить.');
+  }
+}
+</pre>
+
+<h2 id="Домішки">Домішки</h2>
+
+<p>Абстрактні підкласи, або <em>домішки</em>, це шаблони для створення класів. В ECMAScript підклас може мати лише один суперклас, тому множинне наслідування, наприклад, кількох класів інструментів, неможливе. Функціональність має бути надана суперкласом. </p>
+
+<p>У ECMAScript для реалізації домішок може використовуватись функція з суперкласом в якості параметра та підкласом, що розширює цей суперклас, в якості значення, що повертається:</p>
+
+<pre class="brush: js">let calculatorMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+let randomizerMixin = Base =&gt; class extends Base {
+  randomize() { }
+};
+</pre>
+
+<p>Клас, що використовує ці домішки, може бути записаний так:</p>
+
+<pre class="brush: js">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="Запуск_у_Чернетці">Запуск у Чернетці</h2>
+
+<p>Клас не можна перевизначати. Якщо ви працюєте з кодом у Чернетці (меню Firefox Інструменти &gt; Веб-розробка &gt; Чернетка), і 'Запускаєте' визначення класу з тим самим ім'ям двічі, ви отримаєте дивну помилку SyntaxError: redeclaration of let &lt;ім'я-класу&gt;.</p>
+
+<p>Щоб перезапустити визначення, використовуйте меню Чернетки Виконати &gt; Перезавантажити і запустити.<br>
+ Будь ласка, голосуйте за помилку <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Functions">Функції</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">Оголошення класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">Вираз класу</a></li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Блог-стаття: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/uk/web/javascript/reference/classes/static/index.html b/files/uk/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..3f676d3d6e
--- /dev/null
+++ b/files/uk/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,137 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Static
+  - Класи
+  - Статичний
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Ключове слово <code><strong>static</strong></code> визначає статичний метод класу. Статичні методи не викликаються на екземплярах класу. Вони натомість викликаються на самому класі. Часто це допоміжні функції, такі як функції для створення чи клонування об'єктів.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">static <em>methodName</em>() { ... }</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Виклики статичного методу виконуються безпосередньо через клас, і неможливі на екземплярах класу. Статичні методи часто застосовуються для створення різноманітних допоміжних функцій.</p>
+
+<h2 id="Виклик_статичних_методів">Виклик статичних методів</h2>
+
+<h3 id="З_іншого_статичного_методу">З іншого статичного методу</h3>
+
+<p>Щоб звернутися до статичного методу зсередини іншого статичного методу в межах одного класу, можна використати ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  static staticMethod() {
+    return 'Викликано статичний метод';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' зсередини іншого статичного методу';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Викликано статичний метод'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Викликано статичний метод зсередини іншого статичного методу'</pre>
+
+<h3 id="Зсередини_конструктора_класу_чи_інших_звичайних_методів">Зсередини конструктора класу, чи інших звичайних методів</h3>
+
+<p>Статичні методи недоступні напряму за ключовим словом <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code> зсередини нестатичних методів. Слід викликати їх, використовуючи ім'я класу: <code>CLASSNAME.STATIC_METHOD_NAME()</code>; або ж звертаючись до методу як до властивості конструктора: <code>this.constructor.STATIC_METHOD_NAME()</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  constructor() {
+    console.log(StaticMethodCall.staticMethod());
+    // 'Викликано статичний метод.'
+
+    console.log(this.constructor.staticMethod());
+    // 'Викликано статичний метод.'
+  }
+
+  static staticMethod() {
+    return 'Викликано статичний метод.';
+  }
+}</pre>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Наступний приклад демонструє декілька аспектів:</p>
+
+<ol>
+ <li>Яким чином статичний метод реалізується у класі.</li>
+ <li>Що цей клас із статичним членом може наслідуватись підкласом.</li>
+ <li>Як статичний метод викликати можна, а як — ні.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (Створення екземпляру предка ніяк не вплинуло на метод нащадка)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первинне визначення.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">Вираз класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">Оголошення класу</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li>
+</ul>