Cara menggunakan OBJECT.PROTOTYPE pada JavaScript

Semua objek JavaScript mewarisi properti dan metode dari prototype.

Table of Contents Show

Prototype Inheritance
Menambahkan Properti dan Metode ke Objek
Menggunakan Properti prototipe

Di bab sebelumnya, kita telah mempelajari cara menggunakan konstruktor objek.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object</h2>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
" Ayahku " + myFather.age + " Ibuku " + myMother.age; 
</script>

</body>
</html>

Kita juga belajar bahwa kita tidak dapat menambahkan properti baru ke konstruktor objek yang sudah ada.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object</h2>

<p> Anda tidak dapat menambahkan properti baru ke fungsi konstruktor. </p>
<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"Kebangsaan ayah saya adalah " + myFather.nationality; 
</script>

</body>
</html>

Untuk menambahkan properti baru ke konstruktor, Anda harus menambahkannya dengan fungsi konstruktor.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object</h2>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"Kebangsaan ayah saya adalah " + myFather.nationality + ". Kebangsaan ibu saya adalah " + myMother.nationality;
</script>

</body>
</html>

Prototype Inheritance

Semua objek JavaScript mewarisi properti dan metode dari prototype:

Objek date mewarisi dari Date.prototype
Objek array mewarisi dari Array.prototype
Objek person mewarisi dari Person.prototype

Object.prototype berada di bagian atas rantai pewarisan prototype:

Objek date, objek Array, dan objek Person yang diwarisi dari Object.prototype.

Menambahkan Properti dan Metode ke Objek

Terkadang kita ingin menambahkan properti (atau metode) baru ke semua objek yang ada dengan tipe tertentu.

Terkadang kita juga ingin menambahkan properti (atau metode) baru ke konstruktor objek.

Menggunakan Properti prototipe

Properti prototype JavaScript memungkinkan untuk menambahkan properti baru ke konstruktor objek.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object</h2>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"Kebangsaan ayah saya adalah " + myFather.nationality; 
</script>

</body>
</html>

Properti prototipe JavaScript juga memungkinkan untuk menambahkan metode baru ke konstruktor objek.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName
};

var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"Ayahku adalah " + myFather.name(); 
</script>

</body>
</html>

Hanya modifikasi prototype Anda sendiri. Jangan pernah memodifikasi prototype objek JavaScript standar.

25/02/2017 Ekky Ridyanto 2826 Website

Lanjut lagi sekarang kita akan belajar tentang Object Prototype pada Javascript. Object Prototype seperti object blue print yang mana ketika kita ingin membuat objek tapi datanya tidak spesifik artinya data kita sedikit dinamis keuntungannya sendiri kita cukup sekali saja mendeklarasikan nilainya atau pun fungsi fungsinya tapi nanti kita bisa membuat beberapa objek yang sama dengan nilai yang berbeda beda tentu untuk membuatnya kita bisa membuat fungsi seperti biasa dimulai dengan kata function lalu di ikuti dengan namanya

Karena data atau nilainya wajib kita akan isi dibagian fungsinya yaitu parameter satu dan dua yang kita pisahkan dengan koma yang sebagai nilai construct atau nilai awalnya. Lalu didalam fungsinya misalnya saya punya harga dan juga warna atau nilai lainnya lalu untuk mengisinya kita tinggal nulis this.harga lalu nilainya dari parameter satu begitu juga untuk warnanya didapatkan dari parameter dua.

Sekali lagi kata kunci this ini akan mengacu pada fungsi atau objeknya artinya nama_komputer ini punya harga yang saya deklarasikan disebelah kiri dan disebelah kanannya adalah nilainya. Nilainya sendiri kita ingin buat flexsibel yang berasal dari parameter yang mana nilainya akan di isi ketika kita mendeklarasikan satu objek. Berikutnya kita akan membuat objeknya dengan nama variabel Lenovo lalu lenovo ini sebagai nama_komputer yang memiliki harga dan warna

Kita pastikan bila saya cetak Lenovo.harga maka harga Lenovonya akan tampil disana begitu pun untuk warnanya.

dan bila saya ingin membuat nama komputer yang kedua maka kita tinggal tulis objek fungsinya yaitu nama_komputer dengan nilai yang berbeda-beda

Jadi teman teman tidak terbatas hanya satu boleh membuat beberapa objek hanya dengan mendeklarasikan satu fungsi saja. Itu dia keuntungan membuat objek prototype. Sebelum diakhiri saya akan tambahkan lagi satu hal penting ketika kita ingin menambahkan satu property baru diluar fungsi objectnya kita hanya menulis nama fungsinya lalu prototype lalu di ikuti dengan nama propertynya yaitu type yang saya isi seperti ini

dan bila saya tulis Lenovo.type maka otomatis kita akan melihat type komputernya disana. Itu dia cara menambahkan property diluar objek fungsinya dengan kata kunci prototype. Terima kasih

Web Design, Javascript