initial commit

1 files changed, 184 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/operators/super/index.html b/files/uk/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..b1c2a89135
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,184 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Класи
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключове слово <strong>super</strong> використовується для доступу до функцій на батьківському об'єкті та виклику цих функцій.</p>
+
+<p>Вирази <code>super.prop</code> та <code>super[expr]</code> є коректними у будь-якому <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методу</a> як у <a href="/uk/docs/Web/JavaScript/Reference/Classes">класах</a>, так і у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктних літералах</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">super([arguments]); // викликає батьківський конструктор.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>При застосуванні у конструкторі ключове слово <code>super</code> використовується окремо та має викликатись до ключового слова <code>this</code>. Ключове слово <code>super</code> також може використовуватись у викликах функцій батьківського об'єкта.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Використання_super_у_класах">Використання <code>super</code> у класах</h3>
+
+<p>Цей фрагмент коду взято з <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">прикладу класів</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">демонстрація</a>). Тут <code>super()</code> викликається для запобігання дублюванню частин конструктора, які є спільними у <code>Rectangle</code> (прямокутник) та <code>Square</code> (квадрат).</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.name = 'Прямокутник';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Привіт, я ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this._area = value;
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, спочатку має викликатись super!
+
+    // Тут ми викликаємо конструктор батьківського класу з довжиною
+    // в якості ширини та довжини прямокутника
+    super(length, length);
+
+    // Заувага: У похідному класі super() має викликатись до 'this'.
+    // Не врахувавши це, ви отримаєте помилку посилання.
+    this.name = 'Квадрат';
+  }
+}</pre>
+
+<h3 id="Виклик_статичних_методів_через_super">Виклик статичних методів через super</h3>
+
+<p>Ви також можете викликати через super <a href="/uk/docs/Web/JavaScript/Reference/Classes/static">статичні</a> методи.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'Я маю 4 сторони';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ', і вони рівні';
+  }
+}
+Square.logDescription(); // 'Я маю 4 сторони, і вони рівні'
+</pre>
+
+<h3 id="Видалення_super-властивостей_викине_помилку">Видалення super-властивостей викине помилку</h3>
+
+<p>Ви не можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">оператор delete</a> та <code>super.prop</code> або <code>super[expr]</code>, щоб видалити властивість батьківського класу, це викине {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // це погано
+  }
+}
+
+new Derived().delete(); // ReferenceError: некоректний оператор delete з використанням 'super'. </pre>
+
+<h3 id="super.prop_не_може_перезаписувати_властивості_недоступні_для_запису"><code>super.prop</code> не може перезаписувати властивості, недоступні для запису</h3>
+
+<p>Коли властивості створені недоступними для запису, наприклад, за допомогою {{jsxref("Object.defineProperty")}}, <code>super</code> не може перезаписувати значення такої властивості.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Не можна перезаписати значення.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" доступна лише для читання
+console.log(y.prop); // 1
+</pre>
+
+<h3 id="Використання_super.prop_у_обєктних_літералах">Використання <code>super.prop</code> у об'єктних літералах</h3>
+
+<p>Super також можна використовувати у нотації <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктної ініціалізації  / літералу</a>. У цьому прикладі два об'єкти визначають метод. У другому об'єкті <code>super</code> викликає метод першого об'єкта. Це працює завдяки методу {{jsxref("Object.setPrototypeOf()")}}, який дає можливість встановити прототипом об'єкта <code>obj2</code> об'єкт <code>obj1</code>, таким чином, <code>super</code> може знайти метод <code>method1</code> на об'єкті <code>obj1</code>.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log('метод 1');
+  }
+}
+
+var obj2 = {
+  method2() {
+    super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // виводить "метод 1"
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</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>