diff options
Diffstat (limited to 'files/id/web/javascript/reference/classes/index.html')
| -rw-r--r-- | files/id/web/javascript/reference/classes/index.html | 383 |
1 files changed, 0 insertions, 383 deletions
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 => 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 => class extends Base { - calc() { } -}; - -var randomizerMixin = Base => 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> |