Techstart news

Berita Informasi Teknologi Mancanegara Terbaru dan Terupdate

Javascript

Cara Membuat Instance di Dalam Class Javascript

ByTechStartNews

Apr 27, 2022 #ai, #anda, #ES6 class and instance, #ini, #JavaScript class instance, #JavaScript constructor, #JavaScript ES6 class, #JavaScript OOP, #rog, #yang

Introduction

Di JavaScript, class adalah template atau blueprint untuk membuat objek dengan properti dan metode tertentu. Instance adalah objek yang dibuat berdasarkan class. Membuat instance dari sebuah class adalah langkah pertama dalam menggunakan konsep object-oriented programming (OOP) di JavaScript. Dalam artikel ini, kita akan membahas cara membuat instance dalam class di JavaScript, cara kerjanya, dan bagaimana Anda bisa memanfaatkan fitur ini untuk membuat aplikasi yang lebih terstruktur dan mudah dipelihara.

1. Apa Itu Instance dalam Class di JavaScript?

Instance adalah objek yang dibuat berdasarkan class. Sebuah class dapat dianggap sebagai cetak biru atau template, sementara instance adalah objek nyata yang dibuat dengan menggunakan class tersebut. Setiap instance dapat memiliki nilai yang berbeda-beda pada properti yang didefinisikan dalam class.

Sintaks Membuat Instance:

Untuk membuat instance dari sebuah class, Anda harus menggunakan kata kunci new diikuti dengan nama class.

javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

Pada contoh di atas:

  • Person adalah class yang memiliki konstruktor untuk menginisialisasi properti name dan age.
  • person1 dan person2 adalah instance dari class Person, masing-masing dengan nilai name dan age yang berbeda.

2. Membuat Instance Menggunakan Constructor

Setelah Anda mendefinisikan sebuah class, Anda dapat membuat instance dari class tersebut dengan menggunakan kata kunci new. Constructor yang ada di dalam class akan dipanggil secara otomatis ketika Anda membuat instance baru.

Contoh Membuat Instance Menggunakan Constructor:

javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.
person2.greet(); // Output: Hello, my name is Bob and I am 30 years old.

Pada contoh ini:

  • person1 dan person2 adalah dua instance yang dibuat dari class Person.
  • Metode greet() dapat diakses oleh kedua instance dengan nilai yang berbeda sesuai dengan properti mereka.

3. Membuat Instance dengan Nilai Default

Dalam beberapa kasus, Anda mungkin ingin memberikan nilai default jika argumen tidak diberikan saat membuat instance. Ini bisa dilakukan dengan menggunakan default parameters pada konstruktor.

Contoh Instance dengan Nilai Default:

javascript
class Person {
constructor(name = "Anonymous", age = 18) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}

const person1 = new Person("Alice", 25);
const person2 = new Person();

person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.
person2.greet(); // Output: Hello, my name is Anonymous and I am 18 years old.

Di sini, jika Anda tidak memberikan nilai pada saat membuat instance person2, maka nilai default Anonymous dan 18 akan digunakan.

4. Mengakses Properti dan Metode pada Instance

Setelah membuat instance dari sebuah class, Anda dapat mengakses properti dan metode yang ada pada instance tersebut menggunakan notasi titik (.).

Contoh Mengakses Properti dan Metode:

javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}

const person1 = new Person("Alice", 25);
console.log(person1.name); // Output: Alice
console.log(person1.age); // Output: 25
person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.

Pada contoh ini, kita mengakses properti name dan age serta metode greet() dari instance person1.

5. Menggunakan Instance untuk Pewarisan (Inheritance)

Salah satu keuntungan menggunakan class di JavaScript adalah kemampuan untuk me-inherit (mewarisi) properti dan metode dari class lain. Anda dapat membuat instance dari class induk dan class turunan.

Contoh Pewarisan dalam Class:

javascript
class Animal {
constructor(name) {
this.name = name;
}

speak() {
console.log(`${this.name} makes a sound.`);
}
}

class Dog extends Animal {
constructor(name, breed) {
super(name); // Memanggil constructor class induk
this.breed = breed;
}

speak() {
console.log(`${this.name} barks!`);
}
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // Output: Buddy barks!

Pada contoh ini:

  • Dog mewarisi class Animal dan menambahkan properti breed.
  • Dengan menggunakan new Dog(), kita membuat instance baru dari class Dog yang juga mewarisi metode speak() dari class Animal.

6. Membuat Instance dengan Metode Statis

Kadang-kadang, Anda mungkin ingin mendefinisikan metode yang tidak terkait dengan instance, melainkan dengan class itu sendiri. Metode seperti itu disebut metode statis dan diakses menggunakan nama class.

Contoh Metode Statis dalam Class:

javascript
class MathOperations {
static add(a, b) {
return a + b;
}
}

const result = MathOperations.add(5, 3); // Output: 8
console.log(result);

Di sini, add() adalah metode statis, yang dipanggil langsung dari class MathOperations, bukan dari instance.

Kesimpulan

Membuat instance dalam class di JavaScript adalah langkah penting dalam pemrograman berbasis objek. Dengan menggunakan class dan constructor, Anda dapat membuat objek yang memiliki struktur dan perilaku yang konsisten. Penggunaan instance memungkinkan Anda untuk bekerja dengan banyak objek dengan nilai dan metode yang berbeda, tetapi dengan struktur yang sama. Dengan pemahaman yang baik tentang cara membuat dan bekerja dengan instance, Anda dapat menulis kode JavaScript yang lebih terstruktur dan efisien.

By TechStartNews

Related Post

Javascript

Belajar Babel Loader Javascript ES6

May 3, 2022 TechStartNews
Javascript

Contoh Implementasi API dan Fetch API dalam Web Sederhana

Apr 29, 2022 TechStartNews
Javascript

Contoh Implementasi Ajax Menggunakan Fetch API di JavaScript

Apr 29, 2022 TechStartNews

Anda Ketinggalan

AI

Perplexity Luncurkan Asisten AI di Android untuk Tantang Alexa dan ChatGPT

January 24, 2025 TechStartNews
teknologi

Token Kripto Trump Capai Kapitalisasi Pasar $11,7 Miliar, Bitcoin Tembus Rekor

January 20, 2025 TechStartNews
AI

Perplexity AI Merger dengan TikTok AS: Era Digital Baru Dimulai

January 20, 2025 TechStartNews
Inovasi Masa Depan

O3 Mini oleh OpenAI: Perangkat AI Kompak dengan Fitur Canggih

January 18, 2025 TechStartNews
gunung388gunung388gunung388scatter hitamslot viralidncash slot onlineidntogel slot maxwindwi cahyo nugroho dibantu dukun kongosolusi terbaik imlek 2025 meraih maxwin aktortogelrekomendasi game terbaik di aktortogelkesaksian pemain aktortogel anti rungkadmenanti tanpa kepastian menang besar aktortogelrahasia orang tua sederhana jutawan aktortogeltukang bakso jadi jutawan maxwin petir 1000xviral cowok diputusin dapat maxwin aktortogelcinta semalam jackpot aktortogel5 menit main sweet bonanza x1000 langsung menang 300 jutagebrakan awal tahun dari gates of gatot kaca x1000raih profit maksimal modal kecil menang besar di sugar rush x1000rayakan keseruan bermain mahjong ways 2 dengan putaran turbo mode ontips jitu profit besar di mahjong wins 3 4 simbol scatter hitamcuan cepat main mahjong ways 2 dengan pola putaran naik turunkisah bahagia di bulan januari dari pemain sweet bonanza x1000menang besar modal receh bukan mimpi di gates of olympus x1000princess starlight hadirkan kemenangan maksimal dengan pola matematika bintang 3raih cuan besar mahjong wins 3 adakan event jackpot ganda di gunung388kisah pengemis hebat main olympus aktortogel profit besarkuli jenius penguasa dunia bermain aktortogelmantan tidak tahu saya jutawan aktortogelmenemukan situs miliyader aktortogel untuk imlek nantiperang dewa olympus maxwin aktortogelanak merantau jutawan aktortogeliapa sangka mantan tidak tahu saya jadi jutawan di aktortogelkisah cinta serasi bermain aktortogel hingga maxwinrahasia terbongkar pembantuku lebih kaya karena maxwin di aktortogelbocah jadi bos anak kecil ini jadi jutawan di aktortogelbeli pajero sport baru setelah maxwin di sugar rush x1000bitcoin meroket di susul tingkat kemenangan mahjong wins 3nikmati cuan besar tanpa rasa ragu di gates of olympus x1000rasakan kemenangan besar di wisdom of athena x1000saldo meroket dalam 5 menit setelah bermain mahjong ways 2kunci sukses trik rumus matematika pada mahjong waysmenang besar bukan cuma mimpi di sweet bonanza x1000mengenal pola rahasia mode turbo on pada mahjong wins 3princes starlight jadi permainan pilihan utama warga bandungraih kemenangan tertinggi ribuan titik jackpot gunung388Nyepin Mahjong Ways GUNUNG388asal usul lahirnya pola mahjong ways2gates of olympus gunung388 game handphone terbaikimlek pekan depan bagi angpao di lucky neko3 shio gampang jepe di mahjong ways tahun ular kayu4 scatter merah tidak akan tertunda di mahjong ways 2bagaimana cara menang besar dalam waktu singkat di sweet bonanza x1000coba pakai pola rahasia lucky neko dari admin pg softsolana di prediksi capai harga tertinggi event berburu jackpot big bass bonanzauji ketahanan samsung galaxy a16 5g cuan besar di mahjong wins 3slot gacorutang melilit coba coba main di aktortogel jadi lunas semuatemanku kaya dari aktortogel kisah sukses yang menginspirasidaftar game terbaik aktortogel hari iniberhasil move on gara gara bermain di aktortogelbalas dendam dengan uang jadi kaya raya karena main di aktortogelbangkit lagi usahaku karena bermain di aktortogel dengan maxwinbos mafia yang merekomendasikan main di aktortogelmelawan kekalahan kemarin dengan maxwin di aktortogelsemalem mimpi maxwin bangun coba main di aktortogel beneran maxwinsiapa sangka hasil jualan es teh jadi jutawan di aktortogel