aboutsummaryrefslogtreecommitdiff
path: root/files/sv-se/web/javascript/reference
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:43:23 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:43:23 -0500
commit218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
treea9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/sv-se/web/javascript/reference
parent074785cea106179cb3305637055ab0a009ca74f2 (diff)
downloadtranslated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip
initial commit
Diffstat (limited to 'files/sv-se/web/javascript/reference')
-rw-r--r--files/sv-se/web/javascript/reference/classes/extends/index.html172
-rw-r--r--files/sv-se/web/javascript/reference/classes/index.html383
-rw-r--r--files/sv-se/web/javascript/reference/classes/static/index.html179
-rw-r--r--files/sv-se/web/javascript/reference/index.html51
4 files changed, 785 insertions, 0 deletions
diff --git a/files/sv-se/web/javascript/reference/classes/extends/index.html b/files/sv-se/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..c72398e470
--- /dev/null
+++ b/files/sv-se/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,172 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+ - ECMAScript 2015
+ - JavaScript
+ - Klasser
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Nyckelorder <strong><code>extends</code></strong> används i <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">klassdeklarationer</a> eller <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">klassuttryck</a> för att skapa en klass som är barn till en annan klass.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Beskrivning">Beskrivning</h2>
+
+<p>Nyckelordet <code>extends</code> kan användas för att subklassa anpassade klasser såväl som inbyggda objekt.</p>
+
+<p><code>.prototype</code> vid användning av <code>extends</code> måste vara en {{jsxref("Object")}} eller {{jsxref("null")}}.</p>
+
+<h2 id="Exempel">Exempel</h2>
+
+<h3 id="Använda_extends">Använda <code>extends</code></h3>
+
+<p>Första exemplet skapar en klass som heter <code>Square</code> från en klass kallad <code>Polygon</code>. Exemplet är extraherat från denna <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">(källkod)</a>.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+ constructor(length) {
+ // Här anropas föräldraklassens constructor med längd
+ // angiven för Polygons bredd och höjd
+ super(length, length);
+ // Notera: i underliggande klasser, måste super() anropas innan du
+ // kan använda 'this'. Utelämnande av detta kommer orsaka ett "reference error".
+ this.name = 'Square';
+ }
+
+ get area() {
+ return this.height * this.width;
+ }
+
+ set area(value) {
+  this.height = this.width = Math.sqrt(value);
+ this.area = value;
+ }
+}</pre>
+
+<h3 id="Användning_av_extends_med_inbyggda_objekt">Användning av <code>extends</code> med inbyggda objekt</h3>
+
+<p>Detta exempel utökar det inbyggda objektet {{jsxref("Date")}}. Exemplet är extraherat från denna <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">(källkod)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+ constructor() {
+ super();
+ }
+
+ getFormattedDate() {
+ var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+ return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+ }
+}</pre>
+
+<h3 id="Utökning_av_null">Utökning av <code>null</code></h3>
+
+<p>Utökning från {{jsxref("null")}} fungerar som en normal klass, förutom att prototype objektet inte ärver från {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+ constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="Specifikationer">Specifikationer</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-class-definitions', 'extends')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilitet">Browserkompabilitet</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ <td>{{CompatGeckoDesktop(45)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Array subclassing</td>
+ <td>{{CompatChrome(43.0)}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome for Android</th>
+ </tr>
+ <tr>
+ <td>Bassupport</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(45)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ </tr>
+ <tr>
+ <td>Array subklassning</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(43.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Se_även">Se även</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/sv-se/web/javascript/reference/classes/index.html b/files/sv-se/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..d3ac6aca7f
--- /dev/null
+++ b/files/sv-se/web/javascript/reference/classes/index.html
@@ -0,0 +1,383 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+ - Classes
+ - Constructors
+ - ECMAScript 2015
+ - Inheritance
+ - Intermediate
+ - JavaScript
+ - NeedsTranslation
+ - TopicStub
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>JavaScript classes introduced in ECMAScript 2015 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is <strong>not</strong> introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.</p>
+
+<h2 id="Defining_classes">Defining classes</h2>
+
+<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p>
+
+<h3 id="Class_declarations">Class declarations</h3>
+
+<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Polygon" here).</p>
+
+<pre class="brush: js">class Polygon {
+ constructor(height, width) {
+ this.height = height;
+ this.width = width;
+ }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+</pre>
+
+<h3 id="Class_expressions">Class expressions</h3>
+
+<p>A <strong>class expression</strong> is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body.</p>
+
+<pre class="brush: js">// unnamed
+var Polygon = class {
+ constructor(height, width) {
+    this.height = height;
+    this.width = width;
+ }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+</pre>
+
+<p><strong>Note:</strong> Class <strong>expressions</strong> also suffer from the same hoisting issues mentioned for Class <strong>declarations</strong>.</p>
+
+<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2>
+
+<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructors.</p>
+
+<h3 id="Strict_mode">Strict mode</h3>
+
+<p>The bodies of <em>class declarations</em> and <em>class expressions</em> are executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h3 id="Constructor">Constructor</h3>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p>
+
+<p>A constructor can use the <code>super</code> keyword to call the constructor of a parent class.</p>
+
+<h3 id="Prototype_methods">Prototype methods</h3>
+
+<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>
+
+<pre class="brush: js">class Polygon {
+ constructor(height, width) {
+ this.height = height;
+ this.width = width;
+ }
+
+  get area() {
+ return this.calcArea();
+  }
+
+  calcArea() {
+  return this.height * this.width;
+  }
+}
+
+const square = new Polygon(10, 10);
+
+console.log(square.area);</pre>
+
+<h3 id="Static_methods">Static methods</h3>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and are also <strong>not </strong>callable when the class is instantiated. Static methods are often used to create utility functions for an application.</p>
+
+<pre class="brush: js">class Point {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+
+ static distance(a, b) {
+ const dx = a.x - b.x;
+ const dy = a.y - b.y;
+
+ return Math.sqrt(dx*dx + dy*dy);
+ }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));</pre>
+
+<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3>
+
+<p>When a static or prototype method is called without an object valued "this" (or with "this" as boolean, string, number, undefined or null), then the "this" value will be <strong><code>undefined</code></strong> inside the called function. Autoboxing will not happen. The behaviour will be the same even if we write the code in non-strict mode.</p>
+
+<pre class="brush: js">class Animal {
+  speak() {
+  return this;
+  }
+  static eat() {
+  return this;
+  }
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // undefined
+
+let eat = Animal.eat;
+eat(); // undefined</pre>
+
+<p>If we write the above code using traditional function based classes, then autoboxing will happen based on the "this" value overwhich the function was called.</p>
+
+<pre class="brush: js">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>
+
+<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p>
+
+<pre class="brush: js">class Animal {
+ constructor(name) {
+  this.name = name;
+  }
+
+  speak() {
+ console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+ speak() {
+ console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak();
+</pre>
+
+<p>If there is a constructor present in sub-class, it needs to first call super() before using "this".</p>
+
+<p>One may also extend traditional function-based "classes":</p>
+
+<pre class="brush: js">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.');
+ }
+}
+
+var d = new Dog('Mitzie');
+d.speak();
+</pre>
+
+<p>Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js">var Animal = {
+ speak() {
+ console.log(this.name + ' makes a noise.');
+ }
+};
+
+class Dog {
+ constructor(name) {
+ this.name = name;
+ }
+ speak() {
+ console.log(this.name + ' barks.');
+ }
+}
+
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+var d = new Dog('Mitzie');
+d.speak();
+</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p>
+
+<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+ // Overwrite species to the parent Array constructor
+ 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="Super_class_calls_with_super">Super class calls with <code>super</code></h2>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call functions on an object's parent.</p>
+
+<pre class="brush: js">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.');
+  }
+}
+</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p>
+
+<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p>
+
+<pre class="brush: js">var calculatorMixin = Base =&gt; class extends Base {
+ calc() { }
+};
+
+var randomizerMixin = Base =&gt; class extends Base {
+ randomize() { }
+};
+</pre>
+
+<p>A class that uses these mix-ins can then be written like this:</p>
+
+<pre class="brush: js">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ES6')}}</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="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Edge</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+ {{CompatChrome(49.0)}}</td>
+ <td>{{CompatGeckoDesktop(45)}}</td>
+ <td>13</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatSafari(9.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome for Android</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(45)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>9</td>
+ <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+ {{CompatChrome(49.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</p>
+
+<h2 id="See_also">See also</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/sv-se/web/javascript/reference/classes/static/index.html b/files/sv-se/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..515f4fbfec
--- /dev/null
+++ b/files/sv-se/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,179 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+ - Klasser
+ - Metoder
+ - Statiska funktioner
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Nyckelordet <strong>static</strong> definierar en statisk metod för en klass.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">static methodName() { ... }</pre>
+
+<h2 id="Beskrivning">Beskrivning</h2>
+
+<p>Anrop på statiska metoder är gjorda direkt på klassen och kan inte göras genom instanser av klassen. Statiska metoder är ofta använda för att göra verktygsfunktioner.</p>
+
+<h2 id="Att_anropa_statiska_metoder">Att anropa statiska metoder</h2>
+
+<h3 id="Från_en_annan_statisk_metod">Från en annan statisk metod</h3>
+
+<p>För att anropa en statisk metod från en annan statisk metod av samma klass, kan du använda "<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>".</code></p>
+
+<pre class="brush: js">class StaticMethodCall {
+ static staticMethod() {
+ return 'En statisk metod har blivit anropad';
+ }
+ static anotherStaticMethod() {
+ return this.staticMethod() + ' från en annan statisk metod!';
+ }
+}
+StaticMethodCall.staticMethod();
+// 'En statisk metod har blivit anropad'
+
+StaticMethodCall.anotherStaticMethod();
+// 'En statisk metod har blivit anropad från en annan statisk metod!'</pre>
+
+<h3 id="Från_en_klasskonstruktor_och_andra_metoder">Från en klasskonstruktor och andra metoder</h3>
+
+<p>Statiska metoder är inte tillgängliga genom att använda "<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>"</code> från icke statiska metoder. Du behöver anropa dem genom att antingen använda klassnamnet: ClassName.staticMethodName() eller genom att anropa metoden som en egendom av konstruktorn: this.constructor.staticMethodName().</p>
+
+<pre class="brush: js">class StaticMethodCall {
+ constructor() {
+ console.log(StaticMethod.staticMethod());
+ // 'En statisk metod har blivit anropad.'
+
+ console.log(this.constructor.staticMethod());
+ // 'En statisk metod har blivit anropad.'
+ }
+
+ static staticMethod() {
+ return 'En statisk metod har blivit anropad.';
+ }
+}</pre>
+
+<h2 id="Exempel">Exempel</h2>
+
+<p>Det följande exemplet visar flera saker:</p>
+
+<ol>
+ <li>Hur en statisk metod implementeras på en klass.</li>
+ <li>Att en klass med en statisk medlem kan vara sub-klassad.</li>
+ <li>Hur en statisk metod kan och inte kan bli anropad.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+ static triple(n) {
+ if (n === undefined) {
+ n = 1;
+ }
+ return n * 3;
+ }
+}
+
+class BiggerTriple extends Triple {
+ static triple(n) {
+ return super.triple(n) * super.triple(n);
+ }
+}
+
+console.log(Triple.triple()); // 3
+console.log(Triple.triple(6)); // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (Påverkas inte av förälderns instans.)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+</pre>
+
+<h2 id="Specifikationer">Specifikationer</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specifikation</th>
+ <th scope="col">Status</th>
+ <th scope="col">Kommentar</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Första definition.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Funktion</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Grundlig support</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ <td>{{CompatGeckoDesktop(45)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Funktion</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ <th>Chrome for Android</th>
+ </tr>
+ <tr>
+ <td>Grundlig support</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile(45)}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatChrome(42.0)}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Läs_också">Läs också</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>
diff --git a/files/sv-se/web/javascript/reference/index.html b/files/sv-se/web/javascript/reference/index.html
new file mode 100644
index 0000000000..4205970b93
--- /dev/null
+++ b/files/sv-se/web/javascript/reference/index.html
@@ -0,0 +1,51 @@
+---
+title: JavaScript reference
+slug: Web/JavaScript/Reference
+tags:
+ - JavaScript
+ - NeedsTranslation
+ - TopicStub
+ - 'l10n:priority'
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p>
+
+<h2 id="Global_Objects">Global Objects</h2>
+
+<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div>
+
+<h2 id="Statements">Statements</h2>
+
+<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div>
+
+<h2 id="Expressions_and_operators">Expressions and operators</h2>
+
+<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div>
+
+<h2 id="Functions">Functions</h2>
+
+<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li>
+</ul>
+
+<h2 id="Additional_reference_pages">Additional reference pages</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li>
+</ul>