aboutsummaryrefslogtreecommitdiff
path: root/files/id/web/javascript/reference/classes
diff options
context:
space:
mode:
Diffstat (limited to 'files/id/web/javascript/reference/classes')
-rw-r--r--files/id/web/javascript/reference/classes/constructor/index.html162
-rw-r--r--files/id/web/javascript/reference/classes/extends/index.html112
-rw-r--r--files/id/web/javascript/reference/classes/index.html383
3 files changed, 0 insertions, 657 deletions
diff --git a/files/id/web/javascript/reference/classes/constructor/index.html b/files/id/web/javascript/reference/classes/constructor/index.html
deleted file mode 100644
index 8da1df9428..0000000000
--- a/files/id/web/javascript/reference/classes/constructor/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: constructor
-slug: Web/JavaScript/Reference/Classes/constructor
-translation_of: Web/JavaScript/Reference/Classes/constructor
----
-<div>{{jsSidebar("Classes")}}</div>
-
-<p>Metode dengan nama "constructor" adalah metode spesial untuk pembuatan dan penginisialisasian objek yang dibuat dengan kelas.</p>
-
-<h2 id="sintaks">sintaks</h2>
-
-<pre class="syntaxbox">constructor([arguments]) { ... }</pre>
-
-<h2 id="Deskripsi">Deskripsi</h2>
-
-<p>Hanya boleh ada satu metode spesial dengan nama "constructor" dalam sebuah kelas. {{jsxref("SyntaxError")}}  akan dilemparkan jika suatu kelas memiliki lebih dari satu metode konstruktor.</p>
-
-<p>Konstruktor dapat menggunakan kata kunci {{jsxref("Operators/super", "super")}} untuk memanggil konstruktor orang-tua.</p>
-
-<p>Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka  kontruktor asali yang akan digunakan.</p>
-
-<h2 id="Contoh">Contoh</h2>
-
-<h3 id="Menggunakan_metode_constructor">Menggunakan metode <code>constructor</code></h3>
-
-<p>Potongan kode ini diambil dari <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">contoh kelas</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demostrasi langsung</a>).</p>
-
-<pre class="brush: js">class Square extends Polygon {
- constructor(length) {
- // Di sini, akan memanggil konstruktor orang-tua dengan panjang
- // diberikan untuk panjang dan tinggi Polygon
- super(length, length);
- // Catatan: di kelas turunan, super() harus dipanggil sebelum
- // bisa menggunakan kata kunci 'this'. Meninggalkan pemanggilan ini di awal
- // akan menyebabkan kesalahan referensi.
- this.name = 'Square';
- }
-
- get area() {
- return this.height * this.width;
- }
-
- set area(value) {
- this.area = value;
- }
-}</pre>
-
-<h3 id="Konstruktor_asali">Konstruktor asali</h3>
-
-<p>Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka kontruktor asali yang akan digunakan. Untuk konstruktor asali untuk kelas dasar adalah:</p>
-
-<pre class="brush: js">constructor() {}
-</pre>
-
-<p>Konstruktor asali untuk kelas turunan adalah:</p>
-
-<pre class="brush: js">constructor(...args) {
- super(...args);
-}</pre>
-
-<h2 id="Spesifikasi">Spesifikasi</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-static-semantics-constructormethod', 'Constructor Method')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Definisi awal</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</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>Default constructors</td>
- <td>{{CompatUnknown}}</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>Feature</th>
- <th>Android</th>
- <th>Android Webview</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>{{CompatChrome(42.0)}}</td>
- <td>{{CompatGeckoMobile(45)}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatChrome(42.0)}}</td>
- </tr>
- <tr>
- <td>Default constructors</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatGeckoMobile(45)}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Lihat_Pula">Lihat Pula</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/id/web/javascript/reference/classes/extends/index.html b/files/id/web/javascript/reference/classes/extends/index.html
deleted file mode 100644
index c6def454fe..0000000000
--- a/files/id/web/javascript/reference/classes/extends/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: extends
-slug: Web/JavaScript/Reference/Classes/extends
-tags:
- - ECMAScript 2015
- - JavaScript
- - Kelas
-translation_of: Web/JavaScript/Reference/Classes/extends
----
-<div>{{jsSidebar("Classes")}}</div>
-
-<p>Kata kunci <strong><code>extends</code></strong> digunakan pada <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a> atau <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> untuk membuat sebuah class yang merupakan turunan dari class lain.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div>
-
-<p class="hidden">Sumber kode dari contoh interaktif ini disimpan di repositori GitHub. Jika Anda tertarik untuk berkontribusi dengan proyek contoh interaktif, silahkan menduplikasi repositori <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimkan ke kami dengan pull request.</p>
-
-<h2 id="Sintaks">Sintaks</h2>
-
-<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
-
-<h2 id="Deskripsi">Deskripsi</h2>
-
-<p>Kata kunci <code>extends</code> dapat digunakan untuk subclass custom classes dan built-in objects.</p>
-
-<p><code>.prototype</code> dari suatu ekstensi harus berupa sebuah {{jsxref("Object")}} atau {{jsxref("null")}}.</p>
-
-<h2 id="Contoh">Contoh</h2>
-
-<h3 id="Menggunakan_extends">Menggunakan <code>extends</code></h3>
-
-<p>Contoh pertama membuat sebuah class bernama <code>Square</code> dari kelas bernama <code>Polygon</code>. Contoh ini diambil dari <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
-
-<pre class="brush: js">class Square extends Polygon {
- constructor(length) {
- // Disini, obyek dari Square memanggil konstruktor dari parent class dengan argumen lengths yang tersedia
- // untuk width dan height pada Polygon
- super(length, length);
- // Catatan: Pada kelas turunan, super() harus dipanggil sebelum Anda
- // dapat menggunakan 'this'. Pengabaian terhadap hal tersebut akan menyebabkan reference error.
- this.name = 'Square';
- }
-
- get area() {
- return this.height * this.width;
- }
-}</pre>
-
-<h3 id="Menggunakan_extends_dengan_built-in_objects">Menggunakan <code>extends</code> dengan built-in objects</h3>
-
-<p>Contoh berikut mewarisi built-in {{jsxref("Date")}} object. Contoh ini diambil dari <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
-
-<pre class="brush: js">class myDate extends Date {
- constructor() {
- super();
- }
-
- getFormattedDate() {
- var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
- return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
- }
-}</pre>
-
-<h3 id="Extending_(Pewarisan)_null">Extending (Pewarisan) <code>null</code></h3>
-
-<p>Extending/pewarisan dari {{jsxref("null")}} bekerja layaknya seperti normal class, dengan pengecualian prototype object tidak mewarisi dari {{jsxref("Object.prototype")}}.</p>
-
-<pre class="brush: js">class nullExtends extends null {
- constructor() {}
-}
-
-Object.getPrototypeOf(nullExtends); // Function.prototype
-Object.getPrototypeOf(nullExtends.prototype) // null
-
-new nullExtends(); //ReferenceError: this is not defined
-</pre>
-
-<h2 id="Spesifikasi">Spesifikasi</h2>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Spesifikasi</th>
- <th scope="col">Status</th>
- <th scope="col">Komentar</th>
- </tr>
- <tr>
- <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Initial definition.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2>
-
-<div class="hidden">Tabel kompatibilitas pada halaman ini hasil pengolahan dari data terstruktur. Jika Anda tertarik untuk berkontribusi pada data, Silahkan cek <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami pull request.</div>
-
-<p>{{Compat("javascript.classes.extends")}}</p>
-
-<h2 id="Cek_juga">Cek juga</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>
- <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/id/web/javascript/reference/classes/index.html b/files/id/web/javascript/reference/classes/index.html
deleted file mode 100644
index 3a8a71f562..0000000000
--- a/files/id/web/javascript/reference/classes/index.html
+++ /dev/null
@@ -1,383 +0,0 @@
----
-title: Classes
-slug: Web/JavaScript/Reference/Classes
-tags:
- - Classes
- - Constructors
- - ECMAScript6
- - Inheritance
- - Intermediate
- - JavaScript
- - NeedsTranslation
- - TopicStub
-translation_of: Web/JavaScript/Reference/Classes
----
-<div>{{JsSidebar("Classes")}}</div>
-
-<p>Kelas di JavaScript diperkenalkan pada ECMAScript 6 seperti pemanis dari prototype-based JavaScript yang sudah ada. Syntax dari kelas tidak menggunakan model object-oriented inheritance yang baru. JavaScript kelas menyediakan syntax yang lebih sederhana dan rapi untuk membuat object-object dan mengatasi / dealing dengan turunan / inheritance.</p>
-
-<h2 id="Definisi_kelas">Definisi kelas</h2>
-
-<p>Kelas seperti "fungsi istimewa", dan seperti kamu bisa mendeklarasikan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">ekspresi fungsi </a>(function expressions) dan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">deklarasi fungsi </a> (function declarations), syntax kelas sendiri mempunyai dua komponen: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">ekspresi kelas</a> (class expressions) dan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">deklarasi kelas</a> (class declarations).</p>
-
-<h3 id="Deklarasi_Kelas">Deklarasi Kelas</h3>
-
-<p>Salah satu cara untuk mendefinisikan kelas adalah dengan menggunakan <strong>class declaration / deklarasi kelas</strong>. Untuk mendeklarasikan kelas, kamu bisa menggunakan kata kunci <code>class</code> sebagai contoh class "Polygon" di bawah ini.</p>
-
-<pre class="brush: js notranslate">class Polygon {
- constructor(height, width) {
- this.height = height;
- this.width = width;
- }
-}</pre>
-
-<h4 id="Hoisting">Hoisting</h4>
-
-<p>Perbedaan penting antara <strong>deklarasi</strong><strong> f</strong><strong>ungsi</strong><strong> </strong>(function declarations)<strong> </strong>dan<strong> </strong><strong>deklarasi</strong><strong> kelas</strong> (class declarations) adalah deklarasi fungsi  {{Glossary("Hoisting", "hoisted")}} dan  deklarasi class tidak. Pertama-tama k<span style="background-color: #f6d5d9;">amu </span>harus mendeklarasikan kelas dan mengaksesnya, jika tidak maka kode seperti berikut akan menampilkan {{jsxref("ReferenceError")}}:</p>
-
-<pre class="brush: js example-bad notranslate">var p = new Polygon(); // ReferenceError
-
-class Polygon {}
-</pre>
-
-<h3 id="Ekspresi_Kelas">Ekspresi Kelas</h3>
-
-<p><strong>Ekspresi kelas </strong>(class expression) adalah cara lain untuk mendefinisikan sebuah class. Class expression bisa bernama ataupun tidak. Nama yang diberikan berbentuk lokal berada di body class.</p>
-
-<pre class="brush: js notranslate">// 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>Catatan:</strong> <strong>Ekspresi </strong>kelas (Class expressions) juga mempunyai masalah yang sama terkait hoisting seperti pada <strong>Deklarasi kelas</strong> (Class declarations).</p>
-
-<h2 id="Tubuh_Kelas_class_body_and_definisi_metode">Tubuh Kelas (class body) and definisi metode</h2>
-
-<p>Tubuh atau body sebuah kelas berada didalam kurung {}. Disitu kamu dapat mendefinisikan isi kelas seperti method atau konstruktor.</p>
-
-<h3 id="Strict_mode">Strict mode</h3>
-
-<p>Body atau bagian badan dari <em>kelas deklarasi</em> dan <em>kelas ekspresi</em> di eksekusi pada <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
-
-<h3 id="Konstruktor">Konstruktor</h3>
-
-<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">konstruktor</a></code> adalah metode (method) khusus untuk membuat dan inisialisasi sebuah objek yang dibuat dengan  <code>class</code>. Hanya ada satu metode khusus dengan nama "konstruktor" di kelas. Sebuah {{jsxref("SyntaxError")}} akan tampil jika kelas berisi lebih dari satu method <code>constructor</code>.</p>
-
-<p>Sebuah konstruktor dapat digunakan keyword <code>super</code> untuk memanggil kostruktor dari kelas <em>parent</em> nya.</p>
-
-<h3 id="Prototipe_method">Prototipe method</h3>
-
-<p>Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definisi method</a></p>
-
-<pre class="brush: js notranslate">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="Metode_Statis">Metode Statis</h3>
-
-<p>Kata kunci <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">statis</a></code> mendefinisikan metode statis untuk suatu kelas. Metode statis dipanggil tanpa membuat <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();"'>instance </a>kelasnya dan <strong>tidak</strong> bisa dipanggil ketika kelas tersebut dipakai. Metode statis sering digunakan untuk membuat fungsi utilitas untuk suatu aplikasi.</p>
-
-<pre class="brush: js notranslate">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="Mem-binding_this_dengan_prototipe_dan_metode_statis">Mem-binding <code>this</code> dengan prototipe dan metode statis</h3>
-
-<p>Ketika metode statis atau prototipe dipanggil tanpa objek yang bernilai "this" (atau "this" sebagai boolean, string, angka, <strong><code>tidak terdefinisi</code></strong> atau null), maka nilai "this" akan ditentukan dalam fungsi yang digunakan. Autoboxing tidak akan berjalan. Hal tersebut juga berlaku ketika kita menulis kode dalam mode non-strict.laku akan sama bahkan jika kita menulis kode dalam mode tidak ketat.</p>
-
-<pre class="brush: js notranslate">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>Jika kita menulis kode diatas menggunakan fungsi tradisional berdasarkan kelas, maka autoboxing akan berjalan sesuai dengan nilai "this" pada fungsi yang dipanggil.</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>
-
-<h2 id="Sub_kelas_dengan_extends">Sub kelas dengan <code>extends</code></h2>
-
-<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> digunakan pada <em>deklarasi kelas</em> atau <em>kelas expresi</em> untuk membuat suatu kelas sebagai turunan dari kelas lain.</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 {
- speak() {
- console.log(this.name + ' barks.');
-  }
-}
-
-var d = new Dog('Mitzie');
-d.speak();
-</pre>
-
-<p>Jika terdapat constructor pada sub kelas saat ini, maka pertama dibutuhkan untuk memanggil super() sebelum menggunakan "this".</p>
-
-<div>Seseorang juga dapat mengextend "kelas" berbasis fungsi tradisional:</div>
-
-<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.');
- }
-}
-
-var d = new Dog('Mitzie');
-d.speak();
-</pre>
-
-<p>Perhatikan bahwa kelas tidak dapat di extend pada objek reguler atau biasa (non-constructible) . Jika ingin mewarisi regurel object,  maka dapat menggunakan {{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;
- }
- 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>Kamu dapat mengembalikan objek {{jsxref("Array")}}  di kelas array yang diturunkan <code>MyArray</code>. Pola spesies memungkinkan Kamu <em>overide</em> konstruktor default.</p>
-
-<p>Contohnya, ketika menggunakan method seperti {{jsxref("Array.map", "map()")}} yang mana mengembalikan konstruktor default, kamu butuh method yang dapat mengembalikan objek parent <code>Array</code>, bukan dari objek <code>MyArray</code>. Simbol {{jsxref("Symbol.species")}} memungkinkan untuk melakukan:</p>
-
-<pre class="brush: js notranslate">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="Memanggil_Kelas_Super_dengan_keyword_super">Memanggil Kelas Super dengan keyword <code>super</code></h2>
-
-<p>Keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> digunakan untuk memanggil fungsi pada objek parent nya.</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.');
-  }
-}
-</pre>
-
-<h2 id="Mix-ins">Mix-ins</h2>
-
-<p>Subkelas Abstrak or <em>mix-ins </em>adalah template untuk kelas. Kelas berbasis  ECMAScript hanya dapat memiliki satu superclass (Kelas super), jadi inheritence berganda dari kelas tool sebagai contohnya, itu tidak memungkinkan. Fungsionalitas harus disediakan oleh superclass.</p>
-
-<p>Sebuah fungsi dengan superclass sebagai inputanya dan sukelas as input and a subclass extend superclass sebagai output dapat mengimplemtasikan pada  ECMAScript sebagai berikut:</p>
-
-<pre class="brush: js notranslate">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 notranslate">class Foo { }
-class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>
-
-<h2 id="Spesifikasi">Spesifikasi</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="Kompatibilitas_Browser">Kompatibilitas Browser</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="Lihat_Juga">Lihat Juga</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>