Belajar Javascript es5 Dan es6 Part 14 (Object) Constructor Functions, Method & Prototypes

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan berbagi kepada kalian mengenai OOP Javascript. Ada beberapa yang akan kita pelajari hari ini, berikut apa saja yang akan kita pelajari: 
1. Constructor
2. Method
3. Prototypes

1. Constructor & Method

Kita buat folder terlebih dahulu dengan nama #14_constructor_method_prototype, di dalamnya kita membuat file dengan nama latihan1.html
Kodingan-Nya seperti dibawah ini ya
Tampilan-Nya seperti dibawah ini ya

Gambar 1. Tampilan menggunakan constructor & method

Penjelasan : Kita bisa melihat bagian comment-Nya sebenarnya tapi om bewok jelasin kembali. 

function Orang(namaDepan, namaBelakang, tglLahir) {
 this.namaDepan = namaDepan;
 this.namaBelakang = namaBelakang;
 this.tglLahir = new Date(tglLahir);

Kita membuat function seperti biasa lalu membuat 3 parameter namaDepan, namaBelakang, tglLahir. Selanjutnya kita membuat constructor, dengan menggunakan this

The this Keyword In JavaScript, the thing called this is the object that "owns" the code.
The value of this, when used in an object, is the object itself.
In a constructor function this does not have a value. It is a substitute for the new object. The value of this will become the new object when a new object is created. Sumber w3schools 

// method
this.getTahunLahir = function() {
 return this.tglLahir.getFullYear();
}

// method
this.getNamadepan = function() {
 return `${this.namaDepan}`;
}

Kita menggunakan method, seperti function expression. 

const Orang1 = new Orang('alfian', 'maulana', '9-8-1993');

Selanjutnya kita membuat object baru.

console.log(Orang1.getTahunLahir());
console.log(Orang1.getNamadepan());
console.log(Orang1.namaDepan);

Kita menampilkan ke browser dengan cara nama object.namaMethod

2. Prototypes

Banyak yang bilang dengan menggunakan seperti no 1 kurang recommended jadi kita menggunakan prototypes. kodingan-Nya seperti di bawah ini ya
Tampilan-Nya seperti dibawah ini ya

Gambar 2. Tampilan menggunakan prototypes

Perbedaan-Nya hanya pada bagian method saja, tapi juga tampilan pada console.log juga berbeda juga kita bisa di izinkan untuk membuat properties baru di luar constructor.

Source Code Github

Tutorial Series Belajar Javascript es5 & es6