JavaScript - Prototipe Asli

Selamat datang, para pemula dalam programming! Hari ini, kita akan mendalami dunia menarik dari JavaScript Prototipe Asli. Jangan khawatir jika Anda baru dalam programming - saya akan memandu Anda dalam perjalanan ini secara langkah demi langkah, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Mari kita mulai petualangan ini bersama!

Prototipe Asli

Bayangkan Anda berada di sebuah perpustakaan ajaib tempat setiap buku memiliki kekuatan khusus. Dalam JavaScript, buku "ajaib" ini adalah objek asli kita, dan "kekuatan khusus" mereka adalah metode dan properti yang mereka miliki secara inheren. Ini adalah apa yang kita sebut Prototipe Asli.

Apa Itu Prototipe Asli?

Prototipe asli adalah prototype bawaan untuk objek standar JavaScript seperti Array, String, Number, dan Object. Mereka menyediakan set metode yang dapat digunakan oleh semua instance dari objek ini.

mari lihat contoh:

let myString = "Hello, World!";
console.log(myString.toUpperCase());

Output:

HELLO, WORLD!

Dalam contoh ini, toUpperCase() adalah metode yang disediakan oleh prototype String. Meskipun kita tidak mendefinisikan metode ini sendiri, kita dapat menggunakannya pada setiap string yang kita buat. Itu seperti setiap string yang kita buat datang dengan sebuah kotak peralatan bawaan metode yang berguna!

Mengeksplor Prototipe Asli

mari eksplor lebih banyak metode prototype asli:

// Metode prototype Array
let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 3
console.log(fruits.join(", "));  // "apple, banana, cherry"

// Metode prototype Number
let num = 3.14159;
console.log(num.toFixed(2));  // "3.14"

// Metode prototype Object
let person = { name: "Alice", age: 30 };
console.log(Object.keys(person));  // ["name", "age"]

Setiap metode ini (length, join, toFixed, keys) berasal dari prototype asli masing-masing. Mereka seperti pisau Wenger - selalu ada saat Anda membutuhkannya!

Memperbarui Prototipe Asli

Sekarang, apa bila kita ingin menambahkan "kekuatan khusus" sendiri ke buku-buku ajaib ini? Kita dapat melakukan itu dengan memperbarui prototype asli. Tetapi ingat, dengan kekuatan yang besar datang tanggung jawab yang besar!

Menambahkan Metode ke Prototipe Asli

mari tambahkan metode baru ke prototype String:

String.prototype.greet = function() {
return `Hello, ${this}!`;
};

let name = "Alice";
console.log(name.greet());  // "Hello, Alice!"

Di sini, kita menambahkan metode greet ke semua string. Itu seperti memberikan setiap string dalam program kita kemampuan untuk berkata halo!

Bahaya Mengubah Prototipe Asli

Meskipun ini tampak menarik, mengubah prototype asli bisa berisiko. Itu seperti mengubah aturan permainan saat semua orang sedang bermain - itu bisa menyebabkan kebingungan dan perilaku yang tak terduga. Dalam lingkungan profesional, umumnya disarankan untuk menghindari mengubah prototype asli.

Menambahkan Metode ke Fungsi Konstruktor

Alternatif yang lebih aman adalah menambahkan metode ke fungsi konstruktor Anda sendiri. mari buat sebuah Person constructor:

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

Person.prototype.sayHello = function() {
return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
};

let alice = new Person("Alice", 30);
console.log(alice.sayHello());  // "Hello, my name is Alice and I'm 30 years old."

Dengan cara ini, kita menambahkan kemampuan baru ke "buku ajaib" kita sendiri tanpa mengganggu koleksi asli perpustakaan.

rantai Prototype JavaScript

Sekarang, mari bicarakan tentang rantai prototype. Bayangkan sebuah pohon keluarga di mana anak-anak mewarisi ciri-ciri dari orang tua mereka. Dalam JavaScript, objek dapat mewarisi properti dan metode dari objek lain melalui rantai prototype.

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

Animal.prototype.makeSound = function() {
return "Some generic animal sound";
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
return "Woof!";
};

let myDog = new Dog("Buddy");
console.log(myDog.name);  // "Buddy"
console.log(myDog.makeSound());  // "Some generic animal sound"
console.log(myDog.bark());  // "Woof!"

Dalam contoh ini, Dog mewarisi dari Animal. Itu seperti mengatakan semua anjing adalah hewan, tetapi tidak semua hewan adalah anjing. Rantai prototype Dog terlihat seperti ini: myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null.

Ringkasan Metode Prototype Asli

Berikut adalah tabel dari beberapa metode prototype asli yang umum digunakan:

Tipe Objek	Metode	Deskripsi
Array	push()	Menambahkan satu atau lebih elemen ke akhir array
Array	pop()	Menghapus elemen terakhir dari array
Array	slice()	Mengembalikan salinan dangkal bagian array
String	toLowerCase()	Mengubah string menjadi huruf kecil
String	trim()	Menghapus spasi dari kedua ujung string
Number	toFixed()	Memformat sebuah angka menggunakan notasi titik tetap
Object	hasOwnProperty()	Mengembalikan boolean yang menunjukkan apakah objek memiliki properti tertentu

Ingat, ini hanya beberapa contoh. Setiap tipe objek asli datang dengan banyak metode lain yang Anda dapat eksplor dan gunakan dalam perjalanan programming Anda!

Dalam kesimpulan, prototype asli adalah blok bangunan dari objek JavaScript. Memahaminya adalah seperti membuka peti harta karun dari peralatan yang kuat yang dapat membuat kode Anda lebih efisien dan ekspresif. Sebagai Anda terus menjalankan perjalanan programming Anda, Anda akan menemukan diri Anda mencari tools ini secara berkala. Selamat coding, dan ingat - di dunia JavaScript, Anda selalu hanya satu prototype jauh dari sesuatu yang menakjubkan!

Credits: Image by storyset