Semua objek JavaScript mewarisi properti dan metode dari prototype.
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>
Section Artikel
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.
