{{ message }}

Belajar Javascript OOP Versi ES6 Harmony

30/07/2017 | Javascript
Belajar Javascript OOP Versi ES6 Harmony

ES 6 atau kepanjangan dari Ecma Script 6 juga disebut Harmony ataupun sering disebut juga ES 2015 adalah versi Javascript baru dengan tambahan fitur baru. Salah satunya dengan didukungnya pemrograman OOP dengan menggunakan Class. Bagi Anda yg terbiasa dalam menggunakan OOP di bahasa pemrograman lain ini adalah satu terobosan yg bagus. Karena pada umumnya di bahasa pemrograman lain OOP diimplementasikan dengan Class. Tidak seperti di versi Javascript sebelumnya (ES 5) yg menggunakan prototype dalam mengimplementasikan pemrograman berorientasi objek.

Sebelum membaca artikel ini, jika Anda belum memahami OOP Anda dapat membaca artikel belajar dasar OOP dengan PHP. Karena disini saya tidak menguraikan penjelasan mendetail tentang OOP, namun hanya bentuk syntax OOP baru dari Ecma Script 6.

Pada artikel kali ini kita akan mengulas fitur Class pada ES6, sebagai informasi saya sudah mencoba fitur ini di versi web browser Firefox dan Chrome yg terbaru. Hasilnya kode Javascript ini dapat berjalan dengan baik;

"use strict";
 
class Mobil {
 
  constructor(jenis) {
    console.log('Inisialisasi');
    
    this.jenis = jenis;
    this.warna = 'hitam';
  }
 
  setWarna(warna) {
    this.warna = warna;
  }
 
  bunyikanKlakson() {
    console.log('Mobil ' + this.jenis + ' ' + this.warna + ': tin! tin!');
  }
}
 
var mobilSedan = new Mobil('Sedan');
mobilSedan.setWarna('Merah');
mobilSedan.bunyikanKlakson();
 
// Hasil outpunya adalah;
// Inisialisasi
// Mobil Sedan Merah: tin! tin!

Dari kode program diatas yg perlu diperhatikan adalah sebagai berikut;

  1. Pentingnya meletakan “use strict” di line 1, karena jika Anda menjalankan program ini di web browser Chrome ataupun yg berbasis webkit (NodeJS juga berbasi webkit), fitur-fitur ES6 saat ini belum dapat berjalan tanpa keyword “use strict” ini.
  2. Pendefinisian variable yg akan digunakan dalam lingkup Class (this…) diinisialisasikan di dalam constructor. Pada saat ini ES 6 tidak mendukung pendefinisian variable (global terhadap Class) diluar method.

Inheritance

Untuk melakukan pewarisan di ES 6 adalah sebagai berikut;

class Mobil {
 
  constructor(jenis) {
    console.log('Inisialisasi');
    
    this.jenis = jenis;
    this.warna = 'hitam';
  }
 
  setWarna(warna) {
    this.warna = warna;
  }
 
  bunyikanKlakson() {
    console.log('Mobil ' + this.jenis + ' ' + this.warna + ': tin! tin!');
  }
}
 
// Inheritance dapat dilakukan dengan perintah extends
class Sedan extends Mobil {
 
  constructor(jenis) {
    // Disini kita dapat menginisialisasi konstruktor milik parent Class
    super(jenis);
  }
 
  klaksonDanTancapGas() {
    // Method milik parent telah diwariskan
    this->bunyikanKlakson();
 
    console.log('brem..brem..');
  }
 
}

Begitulah kira-kira penerapan Class pada Javascript – Ecma Script 6, lebih mudah bukan daripada metode prototype yg di terapkan Ecma Script 5. Untuk referensi lebih lengkapnya silakan buka dokumentasi Javascript Mozilla Foundation.