initial commit

6 files changed, 1482 insertions, 0 deletions

diff --git a/files/ru/web/javascript/reference/classes/class_fields/index.html b/files/ru/web/javascript/reference/classes/class_fields/index.html
new file mode 100644
index 0000000000..ade4b8151f
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/class_fields/index.html
@@ -0,0 +1,350 @@
+---
+title: Поля классов
+slug: Web/JavaScript/Reference/Classes/Class_fields
+tags:
+  - JavaScript
+  - Классы
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div class="note">Объявление публичных и приватных полей является <a href="https://github.com/tc39/proposal-class-fields">экспериментальной разработкой</a>, предложенной в коммитете стандартов JavaScript <a href="https://tc39.github.io/beta/">TC39</a>. Поддержка браузерами ограничена, но данное нововведение можно использовать посредством транспиляторов (например, <a href="https://babeljs.io/">Babel</a>). Смотрите информацию о совместимости ниже.</div>
+
+<h2 id="Публичные_поля">Публичные поля</h2>
+
+<p>И статические, и публичные поля являются изменяемыми, перечисляемыми, настраиваемыми свойствами. Таким образом, в отличие от приватных полей, они участвуют в прототипном наследовании.</p>
+
+<h3 id="Публичные_статические_поля">Публичные статические поля</h3>
+
+<p>Публичные статические поля полезны тогда, когда необходимо существование одного единственного поля для всего класса, а не для каждого созданного экземпляра по отдельности. Это полезно для кеша, конфигураций или любых прочих данных, которые одинаковы для всех экземпляров.</p>
+
+<p>Публичные статические поля объявляются при помощи ключевого слова <code>static</code>. Они добавляются в конструктор класса во время его создания с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>. Доступ также осуществляется через конструктор класса.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField = 'static field';
+}
+
+console.log(ClassWithStaticField.staticField);
+// Ожидаемый вывод: "static field"
+</pre>
+
+<p>Поля без инициализации имеют значение <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField;
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'));
+console.log(ClassWithStaticField.staticField);
+// Ожидаемый вывод: "undefined"</pre>
+
+<p>Публичные статические поля не переопределяются в наследниках класса, а могут быть доступны через иерархию прототипов.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static baseStaticField = 'base field';
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = 'sub class field';
+}
+
+console.log(SubClassWithStaticField.subStaticField);
+// Ожидаемый вывод: "sub class field"
+
+console.log(SubClassWithStaticField.baseStaticField);
+// Ожидаемый вывод: "base field"</pre>
+
+<p>При определении полей <code>this</code> ссылается на конструктор класса. Также можно обратиться к нему по имени и использовать <code>super</code> для получения конструктора базового класса, если он существует.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static baseStaticField = 'base static field';
+  static anotherBaseStaticField = this.baseStaticField;
+
+  static baseStaticMethod() { return 'base static method output'; }
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = super.baseStaticMethod();
+}
+
+console.log(ClassWithStaticField.anotherBaseStaticField);
+// Ожидаемый вывод: "base static field"
+
+console.log(SubClassWithStaticField.subStaticField);
+// Ожидаемый вывод: "base static method output"
+</pre>
+
+<h3 id="Публичные_поля_экземпляра">Публичные поля экземпляра</h3>
+
+<p>Такие публичные поля имеются у каждого экземпляра данного класса. Объявляя публичные поля, мы можем гарантировать, что поле всегда актуально, а объявление класса является более самодокументированным.</p>
+
+<p>Публичные поля экземпляра добавляются через <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty </a>либо перед тем, как будет исполнено тело конструктора в базовом классе, либо после того, как завершится <code>super()</code> в классе наследнике.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  instanceField = 'instance field';
+}
+
+const instance = new ClassWithInstanceField();
+console.log(instance.instanceField);
+// Ожидаемый вывод: "instance field"</pre>
+
+<p>Поля без инициализации имеют значение <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  instanceField;
+}
+
+const instance = new ClassWithInstanceField();
+console.assert(instance.hasOwnProperty('instanceField'));
+console.log(instance.instanceField);
+// Ожидаемый вывод: "undefined"</pre>
+
+<p>Как и свойства, названия полей могут вычисляться.</p>
+
+<pre class="brush: js notranslate">const PREFIX = 'prefix';
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field';
+}
+
+const instance = new ClassWithComputedFieldName();
+console.log(instance.prefixField);
+// Ожидаемый вывод: "prefixed field"</pre>
+
+<p>При определении полей <code>this</code> ссылается на создающийся экземпляр класса. Как и в публичных методах экземпляра, получить доступ к прототипу базового класса можно с помощью <code>super</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  baseInstanceField = 'base field';
+  anotherBaseInstanceField = this.baseInstanceField;
+  baseInstanceMethod() { return 'base method output'; }
+}
+
+class SubClassWithInstanceField extends ClassWithInstanceField {
+  subInstanceField = super.baseInstanceMethod();
+}
+
+const base = new ClassWithInstanceField();
+const sub = new SubClassWithInstanceField();
+
+console.log(base.anotherBaseInstanceField);
+// Ожидаемый вывод: "base field"
+
+console.log(sub.subInstanceField);
+// Ожидаемый вывод: "base method output"</pre>
+
+<h2 id="Публичные_методы">Публичные методы</h2>
+
+<h3 id="Публичные_статические_методы">Публичные статические методы</h3>
+
+<p>Ключевое слово <code><strong>static</strong></code> объявляет статический метод класса. Статические методы не вызываются из экземпляра, вместо этого они вызывается из самого класса. Чаще всего это какие-либо служебные функции, такие как функции создания или копирования объектов.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>Статические методы добавляются в конструктор класса с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> во время его создания. Эти методы - изменяемые, неперечисляемые и настраеваемые свойства объекта.</p>
+
+<h3 id="Публичные_методы_экземпляра">Публичные методы экземпляра</h3>
+
+<p>Как и следует из названия, публичные методы экземпляра это методы, доступные для вызова из экземпляров.</p>
+
+<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world';
+  }
+}
+
+const instance = new ClassWithPublicInstanceMethod();
+console.log(instance.publicMethod());
+// Ожидаемый вывод: "hello worl​d"</pre>
+
+<p>Публичные методы добавляются в прототип класса во время его создания с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>. Они изменяемы, неперечисляемы и настраиваемы.</p>
+
+<p>Вы можете использовать генераторы, асинхронные функции и асинхронные генераторы.</p>
+
+<pre class="brush: js notranslate">class ClassWithFancyMethods {
+  *generatorMethod() { }
+  async asyncMethod() { }
+  async *asyncGeneratorMethod() { }
+}</pre>
+
+<p>Внутри методов экземпляра, <code>this</code> ссылается на сам экземпляр.<br>
+ В классах наследниках, <code>super</code> дает доступ к прототипу базового класса, позволяя вызывать его методы.</p>
+
+<pre class="brush: js notranslate">class BaseClass {
+  msg = 'hello world';
+  basePublicMethod() {
+    return this.msg;
+  }
+}
+
+class SubClass extends BaseClass {
+  subPublicMethod() {
+    return super.basePublicMethod();
+  }
+}
+
+const instance = new SubClass();
+console.log(instance.subPublicMethod());
+// Ожидаемый вывод: "hello worl​d"
+</pre>
+
+<p>Геттеры и сеттеры это специальные методы, которые привязаны к свойствам класса и которые вызываются, когда к свойсту обращаются или записывают. Используйте <a href="/ru/docs/Web/JavaScript/Reference/Functions/get">get</a> и <a href="/ru/docs/Web/JavaScript/Reference/Functions/set">set</a> для объявления публичных геттеров и сеттеров экземпляра.</p>
+
+<pre class="brush: js notranslate">class ClassWithGetSet {
+  #msg = 'hello world';
+  get msg() {
+    return this.#msg;
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`;
+  }
+}
+
+const instance = new ClassWithGetSet();
+console.log(instance.msg);
+// Ожидаемый вывод: "hello worl​d"
+
+instance.msg = 'cake';
+console.log(instance.msg);
+// Ожидаемый вывод: "hello cake"
+</pre>
+
+<h2 id="Приватные_поля">Приватные поля</h2>
+
+<h3 id="Приватные_статические_поля">Приватные статические поля</h3>
+
+<p>Приватные поля доступны через конструктор внутри объявления самого класса.</p>
+
+<p>Также сохраняется ограничение на вызов статических полей только внутри статических методов.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42;
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);</pre>
+
+<p>Приватные статические поля добавляются в конструктор на этапе оценки класса.</p>
+
+<p>Существует ограничение происхождения приватных статических полей. Только класс, который объявляет приватное статическое поле, может обращаться к нему. Это может привести к неожиданному поведению при использовании <strong><code>this</code></strong>.</p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42;
+    return this.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() =&gt; SubClass.basePublicStaticMethod(), TypeError);
+</pre>
+
+<h3 id="Приватные_поля_экземпляра_объекта">Приватные поля экземпляра объекта</h3>
+
+<p>Приватные поля объекта объявляются как <strong># names </strong>( произносятся как "hash names"), <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>которые являются идентификаторами с префиксом</span></span></span> #.  # <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>является частью самого имени и также используется для объявления и доступа</span></span></span>.</p>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Инкапсуляция обеспечивается языком.</span></span> <span class="ChMk0b JLqJ4b"><span>Ссылка на # names вне области видимости является синтаксической ошибкой</span></span></span>.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField;
+
+  constructor() {
+    this.#privateField = 42;
+    this.#randomField = 666; # Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField();
+instance.#privateField === 42; // Syntax error
+</pre>
+
+<h2 id="Приватные_методы">Приватные методы</h2>
+
+<h3 id="Приватные_статические_методы">Приватные статические методы</h3>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Как и публичные методы, приватные статические методы вызываются в классе, а не в экземплярах класса.</span></span> <span class="ChMk0b JLqJ4b"><span>Как и приватные статические поля, они доступны только из объявления класса.</span></span></span></p>
+
+<p>Приватные статические методы могут быть генераторами, асинхронными функциями и асинхронными генераторами.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42;
+    }
+
+    static publicStaticMethod() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);
+</pre>
+
+<h3 id="Приватные_методы_экземпляра_объекта">Приватные методы экземпляра объекта</h3>
+
+<p>Приватные методы экземпляра объекта являются методами, доступными в экземплярах класса <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>чей доступ ограничен так же, как и</span></span></span> приватные поля экземпляра объекта.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world';
+  }
+
+  getPrivateMessage() {
+      return #privateMethod();
+  }
+}
+
+const instance = new ClassWithPrivateMethod();
+console.log(instance.getPrivateMessage());
+// expected output: "hello worl​d"</pre>
+
+<p>Приватные методы экземпляра объекта могут быть генераторами, асинхронными функциями и асинхронными генераторами. <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Также возможны приватные геттеры и сеттеры</span></span></span>:</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message;
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`;
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg;
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world';
+    console.log(this.#decoratedMessage);
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="Публичные_поля_класса">Публичные поля класса</h3>
+
+
+
+<p>{{Compat("javascript.classes.public_class_fields")}}</p>
+
+<h3 id="Приватные_поля_класса">Приватные поля класса</h3>
+
+<div class="hidden">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.</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">Семантика всех элементов JS класса</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/constructor/index.html b/files/ru/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..7d7fe14e82
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,205 @@
+---
+title: constructor
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Классы
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<div><code>constructor</code> - специальный метод, служащий для создания и инициализации объектов, созданных с использованием <code>class</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Конструктор позволяет произвести начальную инициализацию, которая должна быть выполнена до того, как остальные методы вызваны.</p>
+
+<pre class="notranslate">class Person {
+
+  constructor(name) {
+    this.name = name;
+  }
+
+  introduce() {
+    console.log(`Hello, my name is ${this.name}`);
+  }
+
+}
+
+const otto = new Person('Отто');
+
+otto.introduce();</pre>
+
+<p>Если вы не определили метод constructor, то будет использован конструктор по умолчанию. Если ваш класс базовый, то конструктор по умолчанию пустой:</p>
+
+<pre class="notranslate">constructor() {}</pre>
+
+<p>Если ваш класс является производным классом, конструктор по умолчанию вызывает родительский конструктор, передавая любые аргументы, которые были предоставлены:</p>
+
+<pre class="notranslate">constructor(...args) {
+  super(...args);
+}</pre>
+
+<p>Это позволяет работать код:</p>
+
+<pre class="notranslate">class ValidationError extends Error {
+
+  printCustomerMessage() {
+    return `Проверка не удалась :-( (подробности: ${this.message})`;
+  }
+
+}
+
+try {
+  throw new ValidationError("Не правильный номер телефона");
+} catch (error) {
+   if (error instanceof ValidationError) {
+    console.log(error.name); // Это Error вместо ValidationError!
+    console.log(error.printCustomerMessage());
+  } else {
+    console.log('Не известная ошибка', error);
+    throw error;
+  }
+}</pre>
+
+<p><code>ValidationError</code> классу не нужен явный (explicit) конструктор, потому что не требуется инициализация. Затем конструктор по умолчанию позаботится о инициализации родительского класса <code>Error</code> переданным ему аргументом.</p>
+
+<p>Однако, если определен ваш собственный конструктор и ваш класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя <code>super</code>. К примеру:</p>
+
+<pre class="notranslate">class ValidationError extends Error {
+
+  constructor(message) {
+    super(message);  // вызов конструктора родительского класса
+    this.name = 'ValidationError';
+    this.code = '42';
+  }
+
+  printCustomerMessage() {
+     return `Проверка не удалась :-( (подробности: ${this.message}, code: ${this.code})`;
+  }
+
+}
+
+try {
+  throw new ValidationError("Не правильный номер телефона");
+} catch (error) {
+   if (error instanceof ValidationError) {
+    console.log(error.name); // Теперь это ValidationError!
+    console.log(error.printCustomerMessage());
+  } else {
+    console.log('Не известная ошибка', error);
+    throw error;
+  }
+}</pre>
+
+<p>В классе может быть только один метод с именем "<code>constructor</code>". Если класс содержит более одного <code>constructor</code>, будет сгенерировано исключение {{jsxref("SyntaxError")}}.</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">live demo</a>).</p>
+
+<pre class="brush: js notranslate">class Square extends Polygon {
+  constructor(length) {
+    // Здесь вызывается конструктор родительского класса,
+    // в который передается length в качестве аргументов,
+    // соответствующим полям width и height класса Polygon
+    super(length, length);
+    // Заметка: В производном классе, super() должен вызываться перед тем как
+    // вы сможете использовать 'this'. Иначе будет сгенерировано исключение reference error.
+    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 notranslate">class Polygon {
+  constructor() {
+    this.name = "Polygon";
+  }
+}
+
+class Square extends Polygon {
+  constructor() {
+    super();
+  }
+}
+
+class Rectangle {}
+
+Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
+
+console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
+console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
+
+let newInstance = new Square();
+console.log(newInstance.name); //Polygon</pre>
+
+<p>Здесь прототип <strong>Square</strong> класса изменен, но в то же время constructor предыдущего базового класса <strong>Polygon</strong> вызывается при создании нового экземпляра <strong>Square</strong>.</p>
+
+<h3 id="Constructors_по_умолчанию.">Constructors по умолчанию.</h3>
+
+<p>Если вы не определите метод constructor, будет использован constructor по умолчанию. Для базовых классов, constructor по умолчанию:</p>
+
+<pre class="brush: js notranslate">constructor() {}</pre>
+
+<p>Для производных классов, constructor по умолчанию:</p>
+
+<pre class="brush: js notranslate">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES2015')}}</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">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <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="/ru/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">Object.prototype.constructor</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/extends/index.html b/files/ru/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..df642e9e23
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,179 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - Классы
+  - Наследование
+  - Расширение
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Ключевое слово <strong><code>extends</code></strong> используется в  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">объявлении класса</a> или в  <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">выражениях класса</a> для создания дочернего класса.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Ключевое слово <strong><code>extends</code></strong> может быть использовано для создания дочернего класса для уже существующего класса или встроенного объекта.</p>
+
+<p>Свойство <strong><code>.prototype</code></strong> родительского класса или объекта должно быть {{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">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Здесь вызывается конструктор родительского класса,
+    // в который передается свойство length в качестве
+    // аргументов, соответствующих полям width и height,
+    // класса Polygon
+    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">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</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">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/index.html b/files/ru/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..883df1a1be
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/index.html
@@ -0,0 +1,414 @@
+---
+title: Классы
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Reference
+  - Классы
+  - Наследование
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Классы")}}</div>
+
+<p>Классы в JavaScript были введены в ECMAScript 2015 и представляют собой синтаксический сахар над существующим в JavaScript механизмом прототипного наследования. Синтаксис классов <strong>не вводит</strong> новую объектно-ориентированную модель, а предоставляет более простой и понятный способ создания объектов и организации наследования.</p>
+
+<h2 id="Определение_классов">Определение классов</h2>
+
+<p>На самом деле классы — это "специальные <a href="/ru/docs/Web/JavaScript/Reference/Functions">функции</a>", поэтому точно также, как вы определяете функции (<a href="/ru-RU/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> и <a href="/ru-RU/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>), вы можете определять и классы с помощью: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a> и <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a>.</p>
+
+<h3 id="Объявление_класса">Объявление класса</h3>
+
+<p>Первый способ определения класса — <strong>class declaration (</strong><em>объявление класса</em><strong>)</strong>. Для этого необходимо воспользоваться ключевым словом <code>class</code> и указать имя класса (в примере — «Rectangle»).</p>
+
+<pre class="brush: js notranslate"><code>class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</code></pre>
+
+<h4 id="Подъём_hoisting">Подъём (hoisting)</h4>
+
+<p>Разница между <em>объявлением функции</em> (<em>function declaration</em>) и <em>объявлением класса</em> (<em>class declaration</em>) в том, что <em>объявление функции</em> совершает подъём ({{Glossary("Hoisting", "hoisted")}}), в то время как <em>объявление класса</em> — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а код же вроде следующего сгенерирует исключение типа {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js notranslate"><code>var p = new Rectangle(); // ReferenceError
+
+class Rectangle {}</code></pre>
+
+<h3 id="Выражение_класса">Выражение класса</h3>
+
+<p>Второй способ определения класса — <strong>class expression (</strong><em>выражение класса</em><strong>)</strong>. Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.</p>
+
+<pre class="brush: js notranslate"><code>// безымянный
+var Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// отобразится: "Rectangle"
+
+// именованный
+var Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// отобразится: "Rectangle2" </code>
+</pre>
+
+<div class="note">
+<p><strong>Обратите внимание: выражения </strong>класса подвержены тем же проблемам с подъёмом (hoisting), что и <strong>объявления</strong> класса.</p>
+</div>
+
+<h2 id="Тело_класса_и_задание_методов">Тело класса и задание методов</h2>
+
+<p>Тело класса — это часть кода, заключенная в фигурные скобки <code>{}</code>. Здесь вы можете объявлять члены класса, такие как методы и конструктор.</p>
+
+<h3 id="Строгий_режим">Строгий режим</h3>
+
+<p>Тела <em>объявлений классов</em> и <em>выражений классов</em> выполняются в строгом режиме (<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>).</p>
+
+<h3 id="Constructor">Constructor</h3>
+
+<p>Метод <code><a href="/ru/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> — специальный метод, необходимый для создания и инициализации объектов, созданных, с помощью класса. В классе может быть только один метод с именем <code>constructor</code>. Исключение типа {{jsxref("SyntaxError")}} будет выброшено, если класс содержит более одного вхождения метода <code>constructor</code>.</p>
+
+<p>Ключевое слово <code>super</code> можно использовать в методе <code>constructor</code> для вызова конструктора родительского класса.</p>
+
+<h3 id="Методы_прототипа">Методы прототипа</h3>
+
+<p>См. также <a href="/ru/docs/Web/JavaScript/Reference/Functions/%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B8%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%B2">определение методов</a>.</p>
+
+<pre class="brush: js notranslate"><code>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</code></pre>
+
+<h3 id="Статические_методы_и_свойства">Статические методы  и свойства</h3>
+
+<p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code>, определяет статический метод или свойства для класса. Статические методы и свойства вызываются без <a href="/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Object_.28Class_Instance.29">инстанцирования</a> их класса, и <strong>не могут</strong> быть вызваны у экземпляров (<em>instance</em>) класса. Статические методы, часто используются для создания служебных функций для приложения, в то время как статические свойства полезны для кеширования в рамках класса, фиксированной конфигурации или любых других целей, не связанных с реплецированием данных между экземплярами.</p>
+
+<pre class="brush: js notranslate"><code>class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static displayName = "Точка";
+  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.displayName; //undefined
+p1.distance;    //undefined
+p2.displayName; //undefined
+p2.distance;    //undefined
+
+console.log(Point.displayName);      // "Точка"
+console.log(Point.distance(p1, p2)); // 7.0710678118654755</code></pre>
+
+<h3 id="Привязка_this_в_прототипных_и_статических_методах">Привязка <code>this</code> в прототипных и статических методах</h3>
+
+<p>Когда статический или прототипный метод вызывается без привязки к <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> объекта (или когда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> является типом boolean, string, number, undefined, null), тогда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> будет иметь значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> внутри вызываемой функции. Автоупаковка не будет произведена. Поведение будет таким же как если бы мы писали код в нестрогом режиме.</p>
+
+<pre class="brush: js notranslate"><code>class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // объект Animal
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // класс Animal
+let eat = Animal.eat;
+eat(); // undefined</code></pre>
+
+<p>Если мы напишем этот же код используя классы основанные на функциях, тогда произойдет автоупаковка основанная на значении <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдет - значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> останется прежним.</p>
+
+<pre class="brush: js notranslate"><code>function Animal() { }
+
+Animal.prototype.speak = function(){
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // глобальный объект (нестрогий режим)
+
+let eat = Animal.eat;
+eat(); // глобальный объект (нестрогий режим)</code>
+</pre>
+
+<h3 id="Свойства_экземпляра">Свойства экземпляра</h3>
+
+<p>Свойства экземпляра должны быть определены в методе класса:</p>
+
+<pre class="notranslate">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>Статические (class-side) свойства и свойства прототипа должны быть определены за рамками тела класса:</p>
+
+<pre class="notranslate">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.es/">TC39</a> по стандартам языка Javascript. Поддержка баузерами ограничена, но это нововведение может быть использовано на моменте сборки, используя к примеру <a href="https://babeljs.io/">Babel</a>.</p>
+</div>
+
+<h4 id="Публичные_поля">Публичные поля</h4>
+
+<p>Используя Javascript синтаксис определения полей, приведенный выше пример может быть изменен следующим образом:</p>
+
+<pre class="notranslate">class Rectangle {
+  height = 0;
+  width;
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>Как видно из примера, поля могут быть объявлены как со начальным значением, так и без него.</p>
+
+<p>Более подробно об этом написано в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes/Class_fields">публичные поля класса</a>.</p>
+
+<h4 id="Приватные_поля">Приватные поля</h4>
+
+<p>Предыдущий пример может быть изменен следующим образом, используя приватные поля:</p>
+
+<pre class="notranslate">class Rectangle {
+  #height = 0;
+  #width;
+  constructor(height, width) {
+    this.#height = height;
+    this.#width = width;
+  }
+}</pre>
+
+<p>Приватные поля могут быть изменены или прочитаны только в рамках класса и не могут быть вызваны извне. Определяя вещи, которые не видны за пределами класса, вы гарантируете, что пользователи ваших классов не могут зависеть от внутренних компонентов, которые могут изменить версию на версию.</p>
+
+<div class="blockIndicator note">
+<p>Приватные поля могут быть объявлены только заранее в объявлении поля.</p>
+</div>
+
+<p>Приватные поля не могут быть созданы позже путем присваивания им значения, в отличии от обычных свойств.</p>
+
+<p>Более подробно об этом написано в <a href="/ru/docs/Web/JavaScript/Reference/Classes/%D0%9F%D1%80%D0%B8%D0%B2%D0%B0%D1%82%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0">Приватные поля класса</a>.</p>
+
+<h2 id="Наследование_классов_с_помощью_extends">Наследование классов с помощью <code>extends</code></h2>
+
+<p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> используется в <em>объявлениях классов</em> и <em>выражениях классов</em> для создания класса, дочернего относительно другого класса.</p>
+
+<pre class="brush: js notranslate"><code class="language-js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }</code>
+
+  speak() {
+    console.log(`${this.name} издает звук.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name) {
+    super(name); // вызывает конструктор super класса и передает параметр name
+  }
+
+  speak() {
+    console.log(`${this.name} лает.`);
+  }
+}
+
+<code class="language-js">let d = new Dog('Митци');
+d.speak(); // Митци лает</code></pre>
+
+<p>Если в подклассе присутствует конструктор, он должен сначала вызвать <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">super</span></font>, прежде чем использовать <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>.</p>
+
+<p>Аналогичным образом можно расширять традиционные, основанные на функциях "классы":</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">function Animal (name) {
+  this.name = name;
+}
+Animal.prototype.speak = function () {
+  console.log(</code>`${this.name} издает звук.`<code class="language-js">);
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(</code>`${this.name} лает.`<code class="language-js">);
+  }
+}
+
+let d = new Dog('Митци');
+d.speak(); // Митци лает
+
+// </code>Для аналогичных методов дочерний метод имеет приоритет над родительским.</pre>
+
+<p>Обратите внимание, что классы не могут расширять обычные (non-constructible) объекты. Если вам необходимо создать наследование от обычного объекта, в качестве замены можно использовать {{jsxref("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var Animal = {
+  speak() {
+    console.log(</code>`${this.name} издает звук.`<code class="language-js">);
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Если вы этого не сделаете, вы получите ошибку TypeError при вызове speak.
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+let d = new Dog('Митци');
+d.speak(); // Митци издает звук.</code></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 line-numbers  language-js notranslate"><code class="language-js">class MyArray extends Array {
+  // Изменить 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</code></pre>
+
+<h2 id="Обращение_к_родительскому_классу_с_помощью_super">Обращение к родительскому классу с помощью <code>super</code></h2>
+
+<p>Ключевое слово <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super</a></code> используется для вызова функций на родителе объекта.</p>
+
+<pre class="brush: js  language-js notranslate"><code class="language-js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(</code>`${this.name} издает звук.`<code class="language-js">);
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(</code>`${this.name}<code class="language-js"> рычит.`);
+  }
+}
+
+let l = new Lion('Фаззи');
+l.speak();
+// Фаззи издает звук.
+// Фаззи рычит.</code>
+</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Абстрактные подклассы, или mix-ins, — это шаблоны для классов. У класса в ECMAScript может быть только один родительский класс, поэтому множественное наследование (к примеру, от tooling classes) невозможно. Функциональность должен предоставлять родительский класс.</p>
+
+<p>Для реализации mix-ins в ECMAScript можно использовать функцию, которая в качестве аргумента принимает родительский класс, а возвращает подкласс, его расширяющий:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var calculatorMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base =&gt; class extends Base {
+  randomize() { }
+};</code></pre>
+
+<p>Класс, использующий такие mix-ins, можно описать следующим образом:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></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-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</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.classes")}}</p>
+
+<h2 id="Повторное_определение_класа">Повторное определение класа</h2>
+
+<p>Класс не может быть переопределен. Попытка этого приведет к <code>SyntaxError</code> .</p>
+
+<p>Если мы запускаете код в веб браузере, к примеру в Firefox Web Console (<strong>Tools </strong>&gt;<strong> Web Developer </strong>&gt;<strong> Web Console</strong>) и вы используете ('Run') определение класса с одним и тем же именем дважды, вы получите <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (Обсуждение по ошибке можно посмотреть в {{Bug(1428672)}}.) Chrome Developer Tools возвращает сообщение типа <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at &lt;anonymous&gt;:1:1</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Функции</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/class">Определение классов</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/class">Выражение классов</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes/Class_fields">Публичные поля класса</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Classes/%D0%9F%D1%80%D0%B8%D0%B2%D0%B0%D1%82%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0">Приватные поля класса</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Статья в блоге: "ES6 In Depth: Classes"</a></li>
+ <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/static/index.html b/files/ru/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..cec6516733
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,129 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Для того, чтобы объявить статический метод класса, необходимо использовать ключевое слово <strong>static</strong>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">static <em>methodName</em>() { ... }</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.</p>
+
+<h2 id="Вызов_статических_методов">Вызов статических методов</h2>
+
+<h3 id="Вызов_из_другого_статического_метода">Вызов из другого статического метода</h3>
+
+<p>Чтобы вызвать статический метод в другом статическом методе того же класса, вы можете использовать ключевое слово <code><a href="/ru/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="/ru/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());
+// Выведет сообщение, что "tripple" не является
+// функцией ('tp.tripple 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> и отправить нам запрос на слияние.</div>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html b/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html
new file mode 100644
index 0000000000..09fe2505e2
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html
@@ -0,0 +1,205 @@
+---
+title: Приватные поля класса
+slug: Web/JavaScript/Reference/Classes/Приватные_поля_класса
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p><span class="seoSummary">Свойства класса по умолчанию являются общедоступными и могут быть рассмотрены или изменены вне класса. Тем не менее, есть <a href="https://github.com/tc39/proposal-class-fields">экспериментальное предложение</a>, позволяющее определить приватные поля класса, используя префикс хэша <code>#</code>.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Приватные_статические_поля">Приватные статические поля</h3>
+
+<p>Приватные поля доступны в конструкторе класса изнутри самой декларации класса.</p>
+
+<p>Ограничение статических переменных, вызываемых только статическими методами, все еще сохраняется.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p>Приватные статические поля добавляются в конструктор класса во время обработки класса.</p>
+
+<p>Существует ограничение по происхождению частных статических полей. Только класс, который определяет приватное статическое поле, может получить доступ к этому полю.</p>
+
+<p>Это может привести к неожиданному поведению при использовании this.</p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+</pre>
+
+<h3 id="Приватные_поля_экземпляров">Приватные поля экземпляров</h3>
+
+<p>Приватные поля экзмепляров объявляются <strong>#имя </strong>(произносится как "хэш нэймс"), которые идентифицируются префиксом <code><strong>#</strong></code>. <code>#</code> является частью имени, а также используется для объявления и доступа.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Инкапсуляция обеспечивается языком.</span> <span title="">Обращение к <code>#</code> именам вне области видимости является синтаксической ошибкой.</span></span></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+</pre>
+
+<h3 id="Приватные_методы">Приватные методы</h3>
+
+<h4 id="Приватные_статические_методы">Приватные статические методы</h4>
+
+<p>Приватные статические методы</p>
+
+<p>Как и их публичный эквивалент, приватные статические методы вызываются на самом классе, а не на экземплярах класса. Как и приватные статические поля, они доступны только изнутри объявления класса.</p>
+
+<p>Приватные статические методы могут быть генераторами, асинхронными функциями и асинхронными функциями-генераторами.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
+</pre>
+
+<p>Это может привести к неожиданному поведению при его использовании <strong><code>this</code></strong>. В следующем примере <code>this</code> относится к классу <code>Derived</code> (а не к классу <code>Base</code>), когда мы пытаемся вызвать <code>Derived.publicStaticMethod2()</code>, и, таким образом, имеет такое же "ограничение по происхождению", как упоминалось выше:</p>
+
+<pre class="brush: js notranslate">class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+</pre>
+
+<h4 id="Приватные_методы_экземпляровinstance">Приватные методы экземпляров(instance)</h4>
+
+<p>Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещен также, как у приватных полей класса.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p>Приватные методы экземпляров могут быть генератором, async, или функциями async генератора. Приватные геттеры и сеттеры также возможны:</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>