aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/javascript/reference/classes
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/javascript/reference/classes
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pl/web/javascript/reference/classes')
-rw-r--r--files/pl/web/javascript/reference/classes/extends/index.html88
-rw-r--r--files/pl/web/javascript/reference/classes/index.html410
-rw-r--r--files/pl/web/javascript/reference/classes/konstruktor/index.html188
-rw-r--r--files/pl/web/javascript/reference/classes/private_class_fields/index.html205
-rw-r--r--files/pl/web/javascript/reference/classes/public_class_fields/index.html269
-rw-r--r--files/pl/web/javascript/reference/classes/static/index.html138
6 files changed, 1298 insertions, 0 deletions
diff --git a/files/pl/web/javascript/reference/classes/extends/index.html b/files/pl/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..6b25a766e5
--- /dev/null
+++ b/files/pl/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,88 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+ - Classes
+ - ECMAScript 2015
+ - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Słowo kluczowe <strong><code>extends</code></strong> jest używane w <a href="/pl/docs/Web/JavaScript/Referencje/Polecenia/class">deklaracjach klas</a> lub <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">wyrażeniach class</a> do tworzenia klasy jako elementu potomnego innej klasy.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-extends.html")}}</div>
+
+
+
+<h2 id="Składnia">Składnia</h2>
+
+<pre class="syntaxbox notranslate">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Opis">Opis</h2>
+
+<p>Słowo kluczowe <code>extends</code> może być użyte do dziedziczenia po niestandardowych klasach lub standardowych obiektach wbudowanych.</p>
+
+<p>Prototypem rozszerzenia musi być {{jsxref("Object")}} lub {{jsxref("null")}}.</p>
+
+<h2 id="Przykłady">Przykłady</h2>
+
+<h3 id="Zastosowanie_extends">Zastosowanie <code>extends</code></h3>
+
+<p>Pierwszy przykład tworzy klasę <code>Square</code> rozszerzającą klasę <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 notranslate">class Square extends Polygon {
+ constructor(length) {
+ // Wywołanie konstruktora klasy nadrzędnej
+ // określenie szerokości i wysokości wielokątu
+ super(length, length);
+ // Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż
+ // pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia.
+ this.name = 'Square';
+ }
+
+ get area() {
+ return this.height * this.width;
+ }
+}</pre>
+
+<h3 id="Zastosowanie_extends_z_obiektami_wbudowanymi">Zastosowanie <code>extends</code> z obiektami wbudowanymi</h3>
+
+<p>Poniższy przykład rozszerza wbudowany obiekt {{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 notranslate">class myDate extends Date {
+
+ getFormattedDate() {
+ var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+ return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+ }
+}
+</pre>
+
+<h2 id="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność">Kompatybilność</h2>
+
+
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li><a href="/pl/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/pl/docs/Web/JavaScript/Reference/Classes/Konstruktor">Konstruktor</a></li>
+ <li><a href="/pl/docs/Web/JavaScript/Referencje/Operatory/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/pl/web/javascript/reference/classes/index.html b/files/pl/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..81388acbc3
--- /dev/null
+++ b/files/pl/web/javascript/reference/classes/index.html
@@ -0,0 +1,410 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+ - Classes
+ - Constructors
+ - ECMAScript 2015
+ - Inheritance
+ - Intermediate
+ - JavaScript
+ - TopicStub
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Klasy w Javascript zostały wprowadzone w ECMAScript 2015 jako lukier składniowy<strong> </strong>(ang. <em>syntactic sugar</em>) dla istniejącego, opartego na prototypach modelu dziedziczenia. Składnia klas <strong>nie</strong> wprowadza nowego zorientowanego obiektowo modelu dziedziczenia. Klasy wprowadzają znacznie prostszą i bardziej czytelną składnię do tworzenia obiektów i dziedziczenia.</p>
+
+<h2 id="Definiowanie_klas">Definiowanie klas</h2>
+
+<p>Klasy są w zasadzie "szczególnymi <a href="/pl/docs/Web/JavaScript/Reference/Functions">funkcjami</a>". Podobnie jak w funkcji można definiować <a href="/pl/docs/Web/JavaScript/Referencje/Operatory/Operator_function">wyrażenie <code>function</code></a> i <a href="/pl/docs/Web/JavaScript/Reference/Statements/function">deklaracje funkcji</a>, tak składnia klasy posiada dwa komponenty: <a href="/pl/docs/Web/JavaScript/Reference/Operators/class">wyrażenie <code>class</code></a> i <a href="/pl/docs/Web/JavaScript/Reference/Statements/class">deklaracje klasy</a>.</p>
+
+<h3 id="Deklaracje_klas">Deklaracje klas</h3>
+
+<p>Jednym ze sposobów definiowania klas jest <strong>deklaracja klasy</strong>. Aby zadeklarować klasę, należy użyć słowa kluczowego <code>class</code> wraz z nazwą klasy (w tym przypadku "Prostokat").</p>
+
+<pre class="brush: js notranslate">class Prostokat {
+ constructor(wysokosc, szerokosc) {
+ this.wysokosc = wysokosc;
+ this.szerokosc = szerokosc;
+ }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p>Ważną różnicą pomiędzy <strong>deklaracją funkcji</strong> a <strong>deklaracją klasy</strong> jest to, że deklaracje funkcji są przenoszone na początek ({{Glossary("Hoisting")}}) a klas nie. Najpierw musisz zadeklarować swoją klasę, by mieć do niej dostęp, w przeciwnym razie kod, jak ten poniżej, wygeneruje błąd {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad notranslate">var p = new Prostokat(); // ReferenceError
+
+class Prostokat {}
+</pre>
+
+<h3 id="Wyrażenie_class">Wyrażenie <code>class</code></h3>
+
+<p><strong>Wyrażenie <code>class</code></strong> jest kolejnym sposobem definiowania klasy. Wyrażenia <code>class</code> mogą być nazwane lub nienazwane. Nazwa przypisana nazwanemu wyrażeniu <code>class</code> jest lokalna dla ciała klasy. (można ją odczytać z właściwości {{jsxref("Function.name", "name")}} klasy)</p>
+
+<pre class="brush: js notranslate">// nienazwane
+var Prostokat = class {
+ constructor(wysokosc, szerokosc) {
+    this.wysokosc = wysokosc;
+    this.szerokosc = szerokosc;
+ }
+};
+console.log(Prostokat.name); // Prostokat
+
+// nazwane
+var Prostokat = class Prostokat2 {
+  constructor(wysokosc, szerokosc) {
+    this.wysokosc = wysokosc;
+    this.szerokosc = szerokosc;
+  }
+};
+console.log(Prostokat.name); // Prostokat2
+</pre>
+
+<div class="note">
+<p><strong>Uwaga</strong>: <strong>Wyrażenia </strong><code>class</code> dotykają te same kwestie związane z przenoszeniem na początek (ang. hoisting) co wspomnianych <strong>deklaracji </strong>klas.</p>
+</div>
+
+<h2 id="Ciało_klasy_i_definicje_metod">Ciało klasy i definicje metod</h2>
+
+<p>Ciało klasy jest umieszczane w nawiasach klamrowych <code>{}</code>. To tam definiuje się metody, czy konstruktory.</p>
+
+<h3 id="Tryb_ścisły">Tryb ścisły</h3>
+
+<p>Ciało klasy jest wykonywane w <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">trybie ścisłym</a> (ang. <em>strict mode</em>). W celu poprawienia wydajności, kod wykorzystywany tutaj podlega ścisłej składni; nie pozwala to na ukrycie niektórych wyjątków, a pewne słowa kluczowe są rezerwowane dla przyszłych wersji ECMAScript.</p>
+
+<h3 id="Konstruktor">Konstruktor</h3>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">Constructor</a></code> jest szczególną metodą, która służy tworzeniu i inicjalizowaniu obiektu zdefiniowanego słowem kluczowym <code>class</code>. Dozwolony jest tylko jeden konstruktor w danej klasie. Jeśli klasa posiada więcej niż jedno wystąpienie metody <code>constructor</code>, wygenerowany zostanie błąd {{jsxref("SyntaxError")}}.</p>
+
+<p>Aby wywołać konstruktor klasy bazowej, należy użyć słowa kluczowego <code>super</code>.</p>
+
+<h3 id="Metody">Metody</h3>
+
+<p>Zobacz też <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definiowanie metod</a>.</p>
+
+<pre class="brush: js notranslate">class Prostokat {
+ constructor(wysokosc, szerokosc) {
+ this.wysokosc = wysokosc;
+ this.szerokosc = szerokosc;
+ }
+ // Getter
+  get pole() {
+ return this.liczPole();
+  }
+ // Method
+  liczPole() {
+  return this.wysokosc * this.szerokosc;
+  }
+}
+
+const kwadrat = new Prostokat(10, 10);
+
+console.log(kwadrat.pole); // 100</pre>
+
+<h3 id="Metody_i_właściwości_statyczne">Metody i właściwości statyczne</h3>
+
+<p>Słowo kluczowe <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definiuje metodę kub właściwość statyczną w klasie. Statyczne metody i właściwości są wywoływane bez <a href="/pl/docs/Learn/JavaScript/Obiekty" title='An example of class instance is "var john = new Person();"'>inicjalizowania</a> ich klas i <strong>nie mogą</strong> być wywołane przez instancję klasy.</p>
+
+<pre class="brush: js notranslate">class Punkt {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+
+ static nazwa = "Punkt";
+ static odleglosc(a, b) {
+ const dx = a.x - b.x;
+ const dy = a.y - b.y;
+
+ return Math.sqrt(dx*dx + dy*dy);
+ }
+}
+
+const p1 = new Punkt(5, 5);
+const p2 = new Punkt(10, 10);
+p1.nazwa; // undefined
+p1.odleglosc; // undefined
+p2.nazwa; // undefined
+p2.odleglosc; // undefined
+
+console.log(Punkt.nazwa); // "Punkt"
+console.log(Punkt.odleglosc(p1, p2)); // 7.0710678118654755</pre>
+
+<h3 id="Powiązanie_this_z_metodami_niestatycznymi_i_statycznymi">Powiązanie <code>this</code> z metodami niestatycznymi i statycznymi</h3>
+
+<p>Kiedy metoda typu <code>static</code> lub <code>prototype</code> jest wywoływana bez <code>this</code> (na przykład poprzez przypisanie metody do zmiennej), wtedy <code>this</code><em> </em>będzie <code>undefined</code> w środku metody. Takie zachowanie będzie takie same, nawet jeżeli dyrektywa <code>"use strict"</code> nie będzie obecna, ponieważ kod w obrębie metody danej klasy zawsze będzie wykonywał się jako <code>strict mode</code>.</p>
+
+<pre class="brush: js notranslate">class Animal {
+  speak() {
+  return this;
+  }
+  static eat() {
+  return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // obiekt Animal
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat(); // klasa Animal
+let eat = Animal.eat;
+eat(); // undefined</pre>
+
+<p>Jeśli przepiszemy powyższy przykład z użyciem tradycyjnych funkcji bez dyrektywy <code>"use strict"</code>, to <code>this</code> wywołane w metodzie będzie automatycznie przypisane do pierwotnej wartości <code>this</code>, którą domyślnie jest <a href="/en-US/docs/Glossary/Global_object">global object</a>.</p>
+
+<pre class="brush: js notranslate">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="Właściwości_instancji">Właściwości instancji</h3>
+
+<p>Właściwości instancji muszą być zdefiniowane wewnątrz metody klasy:</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+ constructor(height, width) {
+ this.height = height;
+ this.width = width;
+ }
+}</pre>
+
+<p>Statyczne właściwości i właściwości prototypu muszą być zdefiniowane poza ciałem klasy:</p>
+
+<pre class="brush: js notranslate">Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;</pre>
+
+<h3 id="Deklaracje_pól">Deklaracje pól</h3>
+
+<div class="blockIndicator warning">
+<p>Publiczna i prywatne deklaracje pól są <a href="https://github.com/tc39/proposal-class-fields">funkcjonalnościami eksperymentalnymi</a> zaproponowanymi na <a href="https://tc39.es">TC39</a>. Wsparcie przeglądarek jest ograniczone, ale ta funkcjonalność może być używana przy użyciu systemów takich jak <a href="https://babeljs.io/">Babel</a>. </p>
+</div>
+
+<h4 id="Deklaracje_pól_publicznych">Deklaracje pól publicznych</h4>
+
+<p>Przy użyciu deklaracji pól, powyższy przykład może być przepisany na:</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+ height = 0;
+ width;
+ constructor(height, width) {
+ this.height = height;
+ this.width = width;
+ }
+}
+</pre>
+
+<p>Dzięki deklarowaniu pól na początku klasy, definicje klas stają się bardziej samodokumentujące, a pola są zawsze obecne.</p>
+
+<p>Jak widać w powyższym przykładzie, pola mogą być zadeklarowane z lub bez domyślnej wartości.</p>
+
+<p>Zobacz <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">public class fields</a> po więcej informacji.</p>
+
+<h4 id="Deklaracje_pól_prywatnych">Deklaracje pól prywatnych</h4>
+
+<p>Używając deklaracji pól prywatnych, definicja może być zapisana w taki sposób:</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+ #height = 0;
+ #width;
+ constructor(height, width) {
+ this.#height = height;
+ this.#width = width;
+ }
+}
+</pre>
+
+<p>Próba odniesienia się do prywatnego pola poza ciałem klasy wygeneruje błąd. Prywatne pola mogą być tylko odczytywane i modyfikowane wewnątrz ciała klasy. Poprzez definicję właściwości niewidocznych poza ciałem klasy, można zapewnić, że użytkownicy klasy nie będą polegali na jej wewnętrznych właściwościach.</p>
+
+<div class="note">
+<p>Pola prywatne mogą być tylko zadeklarowane na początku ciała klasy</p>
+</div>
+
+<p>Prywatnych pól nie da się utworzyć później, poprzez przypisywanie, tak jak normalnych właściwości.</p>
+
+<p>Po więcej informacji zobacz <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">private class fields</a>.</p>
+
+<h2 id="Podklasy_z_extends">Podklasy z <code>extends</code></h2>
+
+<p>Słowo kluczowe <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> jest używane w <em>deklaracjach klas</em> lub <em>wyrażeniach klas</em> do tworzenia klasy jako elementu potomnego innej klasy.</p>
+
+<pre class="brush: js notranslate">class Animal {
+ constructor(name) {
+  this.name = name;
+  }
+
+  speak() {
+ console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+ constructor(name) {
+ super(name); // wywyłanie konstruktora klasy nadrzędnej poprzez użycie super()
+ }
+ speak() {
+ console.log(this.name + ' barks.');
+  }
+}
+
+let d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+</pre>
+
+<p>Jeśli w podklasie znajduje się konstruktor, musi najpierw wywołać super() przed użyciem "this".</p>
+
+<p>Można również rozszerzyć tradycyjne klasy oparte na funkcjach:</p>
+
+<pre class="brush: js notranslate">function Animal (name) {
+ this.name = name;
+}
+
+Animal.prototype.speak = function () {
+ console.log(this.name + ' makes a noise.');
+}
+
+class Dog extends Animal {
+ speak() {
+ console.log(this.name + ' barks.');
+ }
+}
+
+let d = new Dog('Mitzie');
+d.speak(); // Mitzie barks
+</pre>
+
+<p>Zwróć uwagę, że klasy nie mogą rozszerzać zwykłych (niezdatnych do konstrukcji) obiektów. Jeśli chcesz dziedziczyć po zwykłym obiekcie, możesz, zamiast tego użyć {{jsxref ("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js notranslate">var Animal = {
+ speak() {
+ console.log(this.name + ' makes a noise.');
+ }
+};
+
+class Dog {
+ constructor(name) {
+ this.name = name;
+ }
+}
+
+Object.setPrototypeOf(Dog.prototype, Animal);// If you do not do this you will get a TypeError when you invoke speak
+
+let d = new Dog('Mitzie');
+d.speak(); //Mitzie makes a noise.
+</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>Jeśli chcesz zwrócić obiekt {{jsxref("Array")}} w twojej klasie <code>MyArray</code>, która dziedziczy po <code>Array</code>, to możesz użyć wzorca "species", który pozwala na nadpisywanie domyślnych konstruktorów.</p>
+
+<p>Na przykład, wywołanie metody {{jsxref("Array.map", "map()")}} zwraca domyślny konstruktor <code>MyArray</code>. Użycie {{jsxref("Symbol.species")}} pozwala na nadpisanie tego zachowania tak, by zwracany był obiekt typu <code>Array</code>, a nie <code>MyArray</code>:</p>
+
+<pre class="brush: js notranslate">class MyArray extends Array {
+ // Nadpisanie domyślnego kontruktora
+ 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="Słowo_kluczowe_super">Słowo kluczowe <code>super</code></h2>
+
+<p>Słowo kluczowe <strong>super </strong>jest wykorzystywane do udostępniania i korzystania z funkcji klasy, po której nasz obiekt dziedziczy.</p>
+
+<pre class="brush: js notranslate">class Cat {
+ constructor(name) {
+ this.name = name;
+ }
+
+ speak() {
+ console.log(`${this.name} makes a noise.`);
+ }
+}
+
+class Lion extends Cat {
+ speak() {
+ super.speak();
+ console.log(`${this.name} roars.`);
+ }
+}
+
+let l = new Lion('Fuzzy');
+l.speak();
+// Fuzzy makes a noise.
+// Fuzzy roars.</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Abstrakcyjne podklasy lub <em>mix-ins</em> są szablonami dla klas. Klasa może mieć tylko jedną klasę nadrzędną, więc dziedziczenie z wielu klas jest niemożliwe. Cała funkcjonalność musi być dostarczona przez jedną klasę nadrzędną.</p>
+
+<p>Funkcja przyjmująca klasę nadrzędną jako argument i zwracająca podklasę rozszerzającą klasę nadrzędną może być użyta do implementacji mix-in'ów:</p>
+
+<pre class="brush: js notranslate">var calculatorMixin = Base =&gt; class extends Base {
+ calc() { }
+};
+
+var randomizerMixin = Base =&gt; class extends Base {
+ randomize() { }
+};
+</pre>
+
+<p>Klasa używająca tych mix-in'ów może być zapisana w taki sposób:</p>
+
+<pre class="brush: js notranslate">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>
+
+<h2 id="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ <th scope="col">Status</th>
+ <th scope="col">Komentarz</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność">Kompatybilność</h2>
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/pl/web/javascript/reference/classes/konstruktor/index.html b/files/pl/web/javascript/reference/classes/konstruktor/index.html
new file mode 100644
index 0000000000..353adecd19
--- /dev/null
+++ b/files/pl/web/javascript/reference/classes/konstruktor/index.html
@@ -0,0 +1,188 @@
+---
+title: Konstruktor
+slug: Web/JavaScript/Reference/Classes/Konstruktor
+tags:
+ - Classes
+ - JavaScript
+ - Language feature
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Konstruktor <span id="result_box" lang="pl"><span>jest specjalną metodą tworzenia i inicjowania obiektu utworzonego w klasie.</span></span></p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</p>
+
+<h2 id="Składnia">Składnia</h2>
+
+<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre>
+
+<h2 id="Opis">Opis</h2>
+
+<p>Konstruktor umożliwia zdefiniowanie inicjalizacji obiektu, która musi się wykonać, zanim będzie można wywołać metody obiektu.</p>
+
+<pre class="brush: js notranslate">class Person {
+
+ constructor(name) {
+ this.name = name;
+ }
+
+ introduce() {
+ console.log(`Hello, my name is ${this.name}`);
+ }
+
+}
+
+const otto = new Person('Otto');
+
+otto.introduce();</pre>
+
+<p>Jeśli niestandardowy konstruktor nie został podany, to domyślny konstruktor będzie użyty. Dla klas bazowych konstruktor domyślny jest pusty:</p>
+
+<pre class="brush: js notranslate">constructor() {}</pre>
+
+<p>Dla klas pochodnych domyślny konstruktor wywołuje konstruktor klasy nadrzędnej:</p>
+
+<pre class="brush: js notranslate">constructor(...args) {
+ super(...args);
+}</pre>
+
+<p>Pozwala to na działanie takiego kodu:</p>
+
+<pre class="brush: js notranslate">class ValidationError extends Error {
+
+ printCustomerMessage() {
+ return `Validation failed :-( (details: ${this.message})`;
+ }
+
+}
+
+try {
+ throw new ValidationError("Not a valid phone number");
+} catch (error) {
+ if (error instanceof ValidationError) {
+ console.log(error.name); // This is Error instead of ValidationError!
+ console.log(error.printCustomerMessage());
+ } else {
+ console.log('Unknown error', error);
+ throw error;
+ }
+}</pre>
+
+<p>Klasa <code>ValidationError</code> nie musi mieć niestandardowego konstruktora, ponieważ domyślny konstruktor wywołuje konstruktor klasy <code>Error</code>.</p>
+
+<p>Jeśli jednak klasa <code>ValidationError</code> ma niestandardowy konstruktor, to musi on wywoływać konstruktor klasy nadrzędnej przy użyciu <code>super</code>:</p>
+
+<pre class="brush: js notranslate">class ValidationError extends Error {
+
+ constructor(message) {
+ super(message); // call parent class constructor
+ this.name = 'ValidationError';
+ this.code = '42';
+ }
+
+ printCustomerMessage() {
+ return `Validation failed :-( (details: ${this.message}, code: ${this.code})`;
+ }
+
+}
+
+try {
+ throw new ValidationError("Not a valid phone number");
+} catch (error) {
+ if (error instanceof ValidationError) {
+ console.log(error.name); // Now this is ValidationError!
+ console.log(error.printCustomerMessage());
+ } else {
+ console.log('Unknown error', error);
+ throw error;
+ }
+}</pre>
+
+<p>Wewnątrz klasy może być tylko jedna metoda nazwana <code>constructor</code>. Jeżeli <code>constructor</code> wystąpi więcej niż jeden raz, to wygeneruje błąd {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Przykłady">Przykłady</h2>
+
+<h3 id="Używanie_konstruktora">Używanie konstruktora</h3>
+
+<p>Fragment kodu pochodzi z <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) {
+ // Wywołanie konstruktora klasy nadrzędnej
+ // określenie szerokości i wysokości wielokątu
+ super(length, length);
+ // Uwaga: W pochodnych klasach, super() musi być wywołane wcześniej niż
+ // pierwsze użycie 'this'. W przeciwnym wypadku pojawi się błąd odniesienia.
+ this.name = 'Square';
+ }
+
+ get area() {
+ return this.height * this.width;
+ }
+
+ set area(value) {
+ this.area = value;
+ }
+}</pre>
+
+<h3 id="Inny_przykład">Inny przykład</h3>
+
+<p>W tym przykładzie klasa <code>Square</code> jest zmieniona — ale konstruktor klasy <code>Polygon</code> nadal jest wywoływany przy tworzeniu nowej instancji klasy <code>Square</code>.</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>
+
+<h2 id="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ <th scope="col">Status</th>
+ <th scope="col">Komentarz</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność">Kompatybilność</h2>
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/pl/web/javascript/reference/classes/private_class_fields/index.html b/files/pl/web/javascript/reference/classes/private_class_fields/index.html
new file mode 100644
index 0000000000..6b55474d5b
--- /dev/null
+++ b/files/pl/web/javascript/reference/classes/private_class_fields/index.html
@@ -0,0 +1,205 @@
+---
+title: Private class fields
+slug: Web/JavaScript/Reference/Classes/Private_class_fields
+tags:
+ - Classes
+ - JavaScript
+ - Language feature
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Właściwości klas są domyślnie publiczne i mogą być wywoływane i modyfikowane poza klasą. Istnieje jednak <a href="https://github.com/tc39/proposal-class-fields">funkcjonalność eksperymentalna</a> pozwalająca na zdefiniowanie pól prywatnych klasy przy użyciu <code>#</code> przed nazwą pola.</p>
+
+<h2 id="Składnia">Składnia</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithPrivateField {
+ #privateField
+}
+
+class ClassWithPrivateMethod {
+ #privateMethod() {
+ return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+ static #PRIVATE_STATIC_FIELD
+}
+</pre>
+
+<h2 id="Przykłady">Przykłady</h2>
+
+<h3 id="Prywatne_pola_statyczne">Prywatne pola statyczne</h3>
+
+<p>Pola prywatne są dostępne z poziomu konstruktora klasy ze środka ciała klasy.</p>
+
+<p>Prywatne pola statyczne są tylko dostępne z poziomu statycznych metod. </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>Prywatne pola statyczne są dodawane do konstruktora klasy podczas wykonywania klasy.</p>
+
+<p>Tylko klasa, która definiuje prywatne pola statyczne, może mieć do nich dostęp.</p>
+
+<p>Może to prowadzić to nieoczekiwanego zachowania podczas używania <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 { }
+
+let error = null
+
+try {
+ SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+</pre>
+
+<h3 id="Prywatne_pola_instancji">Prywatne pola instancji</h3>
+
+<p>Prywatne pola instancji są deklarowane przy użyciu <strong># names </strong>("<em>hash names</em>"), czyli nazw poprzedzonych <code>#</code>. Znak <code>#</code> jest częścią nazwy. Jest używany do deklaracji i dostępu do właściwości.</p>
+
+<p>Enkapsulacja jest wymuszona przez język. Próba dostępu do prywatnego pola poza klasą wygeneruje błąd <code>Syntax Error</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 444 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+</pre>
+
+<h3 id="Prywatne_metody">Prywatne metody</h3>
+
+<h4 id="Prywatne_metody_statyczne">Prywatne metody statyczne</h4>
+
+<p>Podobnie jak ich publiczne odpowiedniki, prywatne metody statyczne są wywoływane przez samą klasę, a nie jej instancje. Podobnie jak pola prywatne, są dostępne tylko z poziomu ciała klasy.</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>Może to prowadzić do nieoczekiwanego zachowania przy używaniu <strong><code>this</code></strong>. W poniższym przykładzie <code>this</code> odnosi się do klasy <code>Derived</code> (a nie klasy <code>Base</code>) podczas wywołania metody <code>Derived.publicStaticMethod2()</code>, co powoduje błąd.</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="Prywatne_metody_instancji">Prywatne metody instancji</h4>
+
+<p>Prywatne metody instancji to metody dostępne dla instancji klasy, które mają podobne ograniczenia co prywatne pola instancji.</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>Prywatne metody mogą używać async lub być generatorami. Możliwe jest również tworzenie prywatnych getter'ów i setter'ów:</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="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność_2"><a id="Kompatybilność" name="Kompatybilność">Kompatybilność</a></h2>
+
+
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li><a href="/pl/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>
diff --git a/files/pl/web/javascript/reference/classes/public_class_fields/index.html b/files/pl/web/javascript/reference/classes/public_class_fields/index.html
new file mode 100644
index 0000000000..780300e64f
--- /dev/null
+++ b/files/pl/web/javascript/reference/classes/public_class_fields/index.html
@@ -0,0 +1,269 @@
+---
+title: Public class fields
+slug: Web/JavaScript/Reference/Classes/Public_class_fields
+tags:
+ - Classes
+ - JavaScript
+ - Language feature
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div>
+<div class="note">
+<p><strong>Ta strona opisuje funkcjonalności eksperymentalne</strong></p>
+
+<p>Deklaracje pól publicznych i prywatnych są <a class="external external-icon" href="https://github.com/tc39/proposal-class-fields" rel="noopener">funkcjonalnościami eksperymentalnymi (stage 3)</a> zaproponowanymi na <a class="external external-icon" href="https://tc39.github.io/beta/" rel="noopener">TC39</a>.</p>
+
+<p>Wsparcie przeglądarek jest ograniczone, ale ta funkcjonalność może być używana przy użyciu systemów takich jak <a class="external external-icon" href="https://babeljs.io/" rel="noopener">Babel</a>. Zobacz <a href="#Kompatybilność">tabelę kompatybilności</a> poniżej.</p>
+</div>
+</div>
+
+<p>Zarówno statyczne, jak i instancyjne pola publiczne są właściwościami zapisywalnymi, wyliczalnymi i konfigurowalnymi. W przeciwieństwie do ich prywatnych odpowiedników uczestniczą w dziedziczeniu prototypów.</p>
+
+<h2 id="Składnia">Składnia</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithInstanceField {
+  instanceField = 'instance field'
+}
+
+class ClassWithStaticField {
+ static staticField = 'static field'
+}
+
+class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world'
+  }
+}
+</pre>
+
+<h2 id="Przykłady">Przykłady</h2>
+
+<h3 id="Publiczne_pola_statyczne">Publiczne pola statyczne</h3>
+
+<p>Publiczne pola statyczne są użyteczne, gdy chcesz, aby pole istniało tylko raz dla danej klasy, a nie dla każdej tworzonej instancji klasy. Jest to użyteczne w przypadku cache'ów, stałej konfiguracji lub innych danych, które nie muszą być replikowane na wszystkich instancjach.</p>
+
+<p>Publiczne pola statyczne są deklarowane z użyciem słowa kluczowego <code>static</code>. Są dodawane do konstruktora klasy podczas jej wykonywania z użyciem {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Są one dostępne z poziomu konstruktora klasy.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField = 'static field'
+}
+
+console.log(ClassWithStaticField.staticField)
+// expected output: "static field"​
+</pre>
+
+<p>Pola bez inicjalizatorów są ustawiane na <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
+console.log(ClassWithStaticField.staticField)
+// expected output: "undefined"</pre>
+
+<p>Publiczne pola statyczne nie są inicjalizowane ponownie w podklasach, ale można uzyskać do nich dostęp przez łańcuch prototypów.</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)
+// expected output: "sub class field"
+
+console.log(SubClassWithStaticField.baseStaticField)
+// expected output: "base field"</pre>
+
+<p>Przy inicjalizacji pól, <code>this</code> odnosi się do konstruktora klasy. Można się również odwołać przez nazwę i użyć <code>super</code> do otrzymania konstruktora klasy nadrzędnej (jeżeli istnieje).</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)
+// expected output: "base static field"
+
+console.log(SubClassWithStaticField.subStaticField)
+// expected output: "base static method output"
+</pre>
+
+<h3 id="Publiczne_pola_instancyjne">Publiczne pola instancyjne</h3>
+
+<p>Publiczne pola instancyjne istnieją na każdej utworzonej instancji danej klasy. Poprzez zadeklarowanie pola publicznego, można zapewnić, że pole jest zawsze obecne, a definicja klasy jest bardziej samodokumentująca.</p>
+
+<p>Publiczne pola instancyjne są dodawane przy użyciu {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} podczas wykonywania konstruktora klasy, lub po wywołaniu metody <code>super()</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+ instanceField = 'instance field'
+}
+
+const instance = new ClassWithInstanceField()
+console.log(instance.instanceField)
+// expected output: "instance field"</pre>
+
+<p>Pola bez inicjalizatorów są ustawiane na <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)
+// expected output: "undefined"</pre>
+
+<p>Podobnie jak właściwości, nazwy pól mogą być obliczane.</p>
+
+<pre class="brush: js notranslate">const PREFIX = 'prefix'
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field'
+}
+
+const instance = new ClassWithComputedFieldName()
+console.log(instance.prefixField)
+// expected output: "prefixed field"</pre>
+
+<p>Przy inicjalizacji pól <code>this</code> odnosi się do instancji klasy. Tak jak w publicznych metodach instancji, można odnieść się do klasy nadrzędnej, używając <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)
+// expected output: "base field"
+
+console.log(sub.subInstanceField)
+// expected output: "base method output"</pre>
+
+<h3 id="Publiczne_metody">Publiczne metody</h3>
+
+<h4 id="Publiczne_metody_statyczne">Publiczne metody statyczne</h4>
+
+<p>Słowo kluczowe <code><strong>static</strong></code> definiuje metodę statyczną dla klasy. Metody statyczne nie są wywoływane na instancjach klasy, ale na samej klasie. Są to często funkcje użytkowe, takie jak funkcje tworzenia lub klonowania obiektów.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticMethod {
+ static staticMethod() {
+ return 'static method has been called.';
+ }
+}
+
+console.log(ClassWithStaticMethod.staticMethod());
+// expected output: "static method has been called."</pre>
+
+<p>Metody statyczne są dodawane do konstruktora klasy z użyciem {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} podczas wykonania klasy. Te metody są zapisywalne, niewyliczalne i konfigurowalne.</p>
+
+<h4 id="Publiczne_metody_instancyjne">Publiczne metody instancyjne</h4>
+
+<p>Jak nazwa wskazuje, publiczne metody instancji to metody dostępne na instancjach klasy.</p>
+
+<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod {
+ publicMethod() {
+ return 'hello world'
+ }
+}
+
+const instance = new ClassWithPublicInstanceMethod()
+console.log(instance.publicMethod())
+// expected output: "hello worl​d"</pre>
+
+<p>Publiczne metody instancji są dodawane do prototypu klasy z użyciem {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} podczas wykonania klasy. Te metody są zapisywalne, niewyliczalne i konfigurowalne.</p>
+
+<p>Publiczne metody mogą używać async lub być generatorami.</p>
+
+<pre class="brush: js notranslate">class ClassWithFancyMethods {
+ *generatorMethod() { }
+ async asyncMethod() { }
+ async *asyncGeneratorMethod() { }
+}</pre>
+
+<p>Wewnątrz metod instancji, <code>this</code> odnosi się do samej instancji. W podklasach można użyć <code>super</code> do dostępu do prototypu klasy nadrzędnej, umożliwiając wywoływanie metod tej klasy.</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())
+// expected output: "hello worl​d"
+</pre>
+
+<p>Getter'y i setter'y to specjalne metody, które wiążą się z właściwością danej klasy i są wywoływane, gdy właściwość jest odczytywana lub modyfikowana. Do tworzenia getter'ów i setter'ów należy użyć <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Functions/get">get</a> and <a href="https://developer.mozilla.org/pl/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)
+// expected output: "hello worl​d"
+
+instance.msg = 'cake'
+console.log(instance.msg)
+// expected output: "hello cake"
+</pre>
+
+<h2 id="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność_2"><a name="Kompatybilność">Kompatybilność</a></h2>
+
+
+
+<p>{{Compat("javascript.classes.public_class_fields")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li><a href="/pl/docs/Web/JavaScript/Reference/Classes/Private_class_fields">Private 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>
diff --git a/files/pl/web/javascript/reference/classes/static/index.html b/files/pl/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..814c118957
--- /dev/null
+++ b/files/pl/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,138 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+ - Classes
+ - ECMAScript 2015
+ - JavaScript
+ - Static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><span class="seoSummary">Słowo kluczowe <code><strong>static</strong></code> definiuje statyczną metodę lub właściwość klasy. Metody i właściwości statyczne nie są wywoływane na instancjach klasy, a bezpośrednio na samej klasie. Statyczne metody to często funkcje służące na przykład do tworzenia czy klonowania obiektów, a statyczne właściwości są użyteczne do cache'ów, stałej konfiguracji lub innych właściwości, które nie muszą być powielane w instancjach.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+
+
+<h2 id="Składnia">Składnia</h2>
+
+<pre class="syntaxbox notranslate">static nazwaMetody() { ... }
+static nazwaWlasciwosci [=wartosc];
+</pre>
+
+<h2 id="Przykłady">Przykłady</h2>
+
+<h3 id="Używanie_static_w_klasach">Używanie <code>static</code> w klasach</h3>
+
+<p>Poniższy przykład demonstruje kilka rzeczy:</p>
+
+<ol>
+ <li>Jak statyczna metoda lub właściwość jest implementowana w klasie</li>
+ <li>Klasa z metodą lub właściwością statyczną może być dziedziczona</li>
+ <li>Jak metoda lub właściwość statyczna może być wywoływana</li>
+</ol>
+
+<pre class="brush: js notranslate">class Triple {
+ static customName = 'Tripler';
+ static description = 'I triple any number you provide';
+ static triple(n = 1) {
+ return n * 3;
+ }
+}
+
+class BiggerTriple extends Triple {
+ static longDescription;
+ static description = 'I square the triple of any number you provide';
+ static triple(n) {
+ return super.triple(n) * super.triple(n);
+ }
+}
+
+console.log(Triple.description); // 'I triple any number you provide'
+console.log(Triple.triple()); // 3
+console.log(Triple.triple(6)); // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3)); // 81 (not affected by parent's instantiation)
+console.log(BiggerTriple.description); // 'I square the triple of any number you provide'
+console.log(BiggerTriple.longDescription); // undefined
+console.log(BiggerTriple.customName); // 'Tripler'
+
+console.log(tp.triple()); // 'tp.triple is not a function'.
+</pre>
+
+<h3 id="Wywoływanie_metod_statycznych_z_innych_metod_statycznych">Wywoływanie metod statycznych z innych metod statycznych</h3>
+
+<p>W celu wywołania metody lub właściwości statycznej z innej metody statycznej tej samej klasy można użyć słowa kluczowego <code>this</code>.</p>
+
+<pre class="brush: js notranslate">class StaticMethodCall {
+ static staticProperty = 'static property';
+ static staticMethod() {
+ return 'Static method and ' + this.staticProperty + ' has been called';
+ }
+ static anotherStaticMethod() {
+ return this.staticMethod() + ' from another static method';
+ }
+}
+StaticMethodCall.staticMethod();
+// 'Static method and static property has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method and static property has been called from another static method'</pre>
+
+<h3 id="Wywoływanie_metod_statycznych_z_konstruktora_i_innych_metod">Wywoływanie metod statycznych z konstruktora i innych metod</h3>
+
+<p>Metody statyczne nie są dostępne przez this w metodach niestatycznych. Trzeba je wywołać, używając nazwy klasy: <code>CLASSNAME.STATIC_METHOD_NAME()</code> / <code>CLASSNAME.STATIC_PROPERTY_NAME</code> lub jako metody właściwości <code>constructor</code>: <code>this.constructor.STATIC_METHOD_NAME()</code> / <code>this.constructor.STATIC_PROPERTY_NAME</code>.</p>
+
+<pre class="brush: js notranslate">class StaticMethodCall {
+ constructor() {
+  console.log(StaticMethodCall.staticProperty); // 'static property'
+ console.log(this.constructor.staticProperty); // 'static property'
+ console.log(StaticMethodCall.staticMethod()); // 'static method has been called.'
+ console.log(this.constructor.staticMethod()); // 'static method has been called.'
+ }
+
+  static staticProperty = 'static property';
+ static staticMethod() {
+ return 'static method has been called.';
+ }
+}</pre>
+
+<h2 id="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specyfikacja</th>
+ <th scope="col">Status</th>
+ <th scope="col">Komentarz</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Definicja początkowa.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność">Kompatybilność</h2>
+
+
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>