aboutsummaryrefslogtreecommitdiff
path: root/files/sv-se/web/javascript/reference/classes/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/sv-se/web/javascript/reference/classes/index.html')
-rw-r--r--files/sv-se/web/javascript/reference/classes/index.html383
1 files changed, 0 insertions, 383 deletions
diff --git a/files/sv-se/web/javascript/reference/classes/index.html b/files/sv-se/web/javascript/reference/classes/index.html
deleted file mode 100644
index d3ac6aca7f..0000000000
--- a/files/sv-se/web/javascript/reference/classes/index.html
+++ /dev/null
@@ -1,383 +0,0 @@
----
-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>