diff options
Diffstat (limited to 'files/uk/web/javascript/reference/operators/class')
| -rw-r--r-- | files/uk/web/javascript/reference/operators/class/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/operators/class/index.html b/files/uk/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..4b4e8bee1e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/class/index.html @@ -0,0 +1,122 @@ +--- +title: Вираз класу +slug: Web/JavaScript/Reference/Operators/class +tags: + - ECMAScript 2015 + - JavaScript + - Класи + - Оператор + - вираз +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Вираз класу</strong> - це один зі способів визначити клас у ECMAScript 2015. Схоже до <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональних виразів</a>, вирази класів можуть бути іменовані або неіменовані. У іменованих ім'я класу є локальним для використання тільки у тілі класу. Класи JavaScript використовують прототипне наслідування.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { + // тіло класу +};</pre> + +<h2 id="Опис">Опис</h2> + +<p>Вираз класу має синтаксис, подібний до синтаксису <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення (оператору) класу</a>. Однак, у виразі класу ви можете опустити ім'я класу ("зв'язуючий ідентифікатор"), чого не можна зробити у оголошенні класу. Додатково, вираз класу дозволяє перевизначити/переоголосити клас та <strong>не викинути</strong> жодних помилок типу, як у <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошенні класу</a>. Конструктор є необов'язковою властивістю. А результатом <em>typeof </em>для класів, створених за допомогою ключового слова, завжди буде "function".</p> + +<p>Як і у оголошенні класу, тіло класу у виразі класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>.</p> + +<pre class="brush: js">'use strict'; +var Foo = class {}; // конструктор є необов'язковою властивістю +var Foo = class {}; // дозволяється перевизначення + +typeof Foo; //вертає "function" +typeof class {}; //вертає "function" + +Foo instanceof Object; // true +Foo instanceof Function; // true +class Foo {}; // Викидає TypeError, не дозволяє перевизначення +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Простий_вираз_класу">Простий вираз класу</h3> + +<p>Це простий анонімний вираз класу, на який можна посилатись через змінну "Foo".</p> + +<pre class="brush: js">var Foo = class { + constructor() {} + bar() { + return 'Привіт!'; + } +}; + +var instance = new Foo(); +instance.bar(); // "Привіт!" +Foo.name; // "Foo" +</pre> + +<h3 id="Іменовані_вирази_класів">Іменовані вирази класів</h3> + +<p>Якщо ви бажаєте звертатись до поточного класу всередині тіла класу, ви можете створити іменований вираз класу. Це ім'я видиме тільки в області видимості самого виразу класу.</p> + +<pre class="brush: js">var Foo = class NamedFoo { + constructor() {} + whoIsThere() { + return NamedFoo.name; + } +} +var bar = new Foo(); +bar.whoIsThere(); // "NamedFoo" +NamedFoo.name; // ReferenceError: NamedFoo is not defined +Foo.name; // "NamedFoo" +</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> + + + +<p>{{Compat("javascript.operators.class")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональний вираз</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> |
