Javascriptoo Merupakan Situs Yang memberikan Informasi Tentang Komputer dan Java Scrypt

Konstruktor vs Prototipe dalam JavaScript: Apa Perbedaannya?

Konstruktor vs Prototipe dalam JavaScript: Apa Perbedaannya?Saat pertama kali mempelajari JavaScript, mungkin membingungkan untuk membedakan antara konstruktor dan prototipe. Seringkali, mereka digunakan secara bergantian untuk menggambarkan konsep yang serupa, tetapi sebenarnya mereka adalah hal yang berbeda yang melayani tujuan yang berbeda.

Konstruktor vs Prototipe dalam JavaScript: Apa Perbedaannya?

javascriptoo – Dalam posting blog ini, kami akan mengungkap kedua istilah ini dan menjelaskan perbedaan di antara keduanya.

Tentang konstruktor

Konstruktor adalah fungsi yang digunakan untuk membuat objek. Saat Anda memanggil fungsi konstruktor dengan newkata kunci, itu akan membuat objek baru dan mengembalikannya.

Jika Anda berasal dari latar belakang OOP, paling mudah untuk membandingkan fungsi konstruktor dengan kelas. Sama seperti dalam bahasa lain, konstruktor memungkinkan Anda membuat objek baru dan menentukan properti dan metodenya.

Sebagai contoh, mari kita bandingkan kelas Java sederhana dan bagaimana kita dapat mencapai hal yang sama dalam JavaScript menggunakan konstruktor.

Baca Juga : 10 Keanehan Dan Rahasia Tentang JavaScript

Java:

public class Person {
private String name;

public Person(String name) {
this.name = name;
}

public void sayHello() {
System.out.println(“Hello, my name is ” + this.name);
}
}

Person person = new Person(“John”);

person.sayHello(); // Hello, my name is John

JavaScript:

Dalam JavaScript, kita dapat membuat Personfungsi konstruktor dengan properti dan metode yang sama:

function Person(name) {
this.name = name;
}

Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
}

const person = new Person(‘John’);
person.sayHello(); // Hello, my name is John.

Seperti yang Anda lihat, keduanya sangat mirip. Perbedaan utama adalah bahwa dalam JavaScript, kami menggunakan prototypekata kunci untuk menambahkan metode ke fungsi konstruktor kami, sedangkan di Java kami hanya akan menambahkannya di dalam kelas.

Faktanya, sintaks kelas baru yang disertakan dengan ES6 adalah gula sintaksis yang dimaksudkan untuk membuat bekerja dengan fungsi konstruktor lebih mirip dengan bahasa OOP lainnya.

Perhatikan juga bagaimana kita menggunakan this fungsi konstruktor JavaScript. thismengacu pada objek yang dibuat secara implisit saat Anda menggunakan newkata kunci.

Tentang Prototipe

Sekarang mari kita bahas prototipe sedikit lebih detail dan mengapa kita menggunakannya untuk berbagi properti dan metode konstruktor di antara objek yang dibuat.

Dalam JavaScript, fungsi juga merupakan objek JS itu sendiri, dan mereka memiliki properti yang disebut prototipe.

Tujuan dari prototipe adalah untuk berbagi properti dan metode antara objek yang dibuat dari fungsi konstruktor.

Misalnya, dalam fungsi konstruktor Person kami di atas, kami menambahkan sayHellometode ke prototipe. Ini berarti bahwa setiap objek yang dibuat dari konstruktor Person akan memiliki sayHellometode.

Rantai prototipe

Prototipe berbagi properti antar objek dengan cara yang hemat memori. Jika kita menambahkan metode ke prototipe, hanya satu instance dari metode itu yang ada di memori, dan metode itu dibagikan di antara semua objek yang dibuat dari konstruktor.

Jika kita menambahkan sayHello metode secara langsung ke fungsi konstruktor Person, maka setiap objek akan memiliki salinan metode itu sendiri, yang menghabiskan lebih banyak memori.

Ini disebut rantai prototipe, dan ini merupakan bagian penting dari bahasa JavaScript.

Berikut cara kerja rantai prototipe: Saat JavaScript mencari properti pada objek, pertama-tama JavaScript akan memeriksa apakah properti itu ada pada objek itu sendiri. Jika tidak menemukannya, ia akan melihat prototipe objek untuk melihat apakah properti itu ada.

Jika tidak ada, itu akan melihat prototipe prototipe, dan seterusnya sampai kecocokan ditemukan atau akhir dari rantai prototipe tercapai.

Memodifikasi Prototipe setelah objek dibuat

Salah satu manfaat menggunakan fungsi konstruktor dan prototipe adalah kita dapat menambahkan properti dan metode baru ke prototipe setelah objek dibuat.

Misalnya, katakanlah kita ingin menambahkan getName metode ke fungsi konstruktor Person kita:

function Person(name) {
this.name = name;
}

Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
}

const person = new Person(‘John’);

person.sayHello(); // Hello, my name is John

Person.prototype.getName = function() {
return this.name;
}

console.log(person.getName()); // John

Seperti yang Anda lihat, kami dapat menambahkan getName metode ke prototipe setelah personobjek dibuat, dan masih berfungsi seperti yang diharapkan.

Kesimpulan

Kesimpulannya, perbedaan utama antara konstruktor dan prototipe dalam JavaScript adalah bahwa konstruktor digunakan untuk membuat objek, sedangkan prototipe digunakan untuk berbagi properti dan metode antar objek.