path: root/files/id/web/javascript/reference/classes/index.html

---
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>