diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/javascript/reference/classes | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pl/web/javascript/reference/classes')
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 & 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 => 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 => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => 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 world"</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 world✨" +</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 world"</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 world" +</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 world" + +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> |