path: root/files/uk/web/javascript/reference/operators/super/index.html

---
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>