Rumah >hujung hadapan web >tutorial js >Memahami Kelas dan Warisan dalam JavaScript

Memahami Kelas dan Warisan dalam JavaScript

DDD
DDDasal
2024-12-22 17:37:11302semak imbas

Understanding Classes and Inheritance in JavaScript

Kelas dan Warisan dalam JavaScript

Kelas JavaScript menyediakan cara moden untuk mengendalikan konsep pengaturcaraan berorientasikan objek (OOP) seperti pewarisan, enkapsulasi dan polimorfisme. Dalam panduan ini, kami akan meneroka cara membuat kelas, cara warisan berfungsi dalam JavaScript dan cara melanjutkan kelas untuk mencipta objek yang lebih kompleks.


1. Kelas dalam JavaScript

Dalam ES6, JavaScript memperkenalkan sintaks yang lebih bersih dan lebih intuitif untuk mencipta objek menggunakan kata kunci kelas.

Sintaks untuk Menentukan Kelas:

class ClassName {
  constructor() {
    // Initialization code
  }
  methodName() {
    // Method code
  }
}

Contoh Kelas Asas:

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal('Buddy', 'Dog');
dog.speak();  // Output: Buddy makes a sound.

Perkara Utama:

  • Kaedah Pembina: Kaedah pembina ialah fungsi khas yang digunakan untuk memulakan objek yang dicipta daripada kelas.
  • Kaedah Contoh: Fungsi yang ditakrifkan dalam kelas ialah kaedah tika, yang boleh dipanggil pada tika kelas.

2. Warisan dalam JavaScript

Warisan membolehkan satu kelas mewarisi sifat dan kaedah daripada kelas lain. Dalam JavaScript, ini boleh dicapai menggunakan kata kunci lanjutan.

Sintaks untuk Warisan:

class ChildClass extends ParentClass {
  constructor() {
    super(); // Calls the parent class constructor
    // Additional initialization code for child class
  }
}

Contoh Warisan:

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call the parent class constructor
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name}, the ${this.breed}, barks.`);
  }
}

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

Perkara Utama:

  • super(): Kata kunci super memanggil pembina kelas induk untuk memulakan sifat yang diwarisi.
  • Kaedah Mengatasi: Kelas anak boleh mengatasi kaedah daripada kelas induk, seperti yang dilihat dalam kaedah speak() di atas.

3. Pewarisan dan Penggantian Kaedah

Dalam JavaScript, apabila kelas kanak-kanak mengatasi kaedah kelas induk, versi kelas kanak-kanak kaedah itu digunakan. Ini dikenali sebagai kaedah mengatasi.

Contoh Penggantian Kaedah:

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

class Cat extends Animal {
  speak() {
    console.log(`${this.name} meows.`);
  }
}

const cat = new Cat('Whiskers');
cat.speak();  // Output: Whiskers meows.

Perkara Utama:

  • Apabila kelas kanak-kanak menyediakan pelaksanaan kaedahnya sendiri, ia mengatasi kaedah kelas induk.
  • Kelas anak masih boleh memanggil kaedah kelas induk menggunakan super.method().

4. Warisan Berbilang (Tidak Disokong Langsung)

JavaScript tidak menyokong berbilang warisan secara langsung, bermakna kelas tidak boleh mewarisi daripada berbilang kelas secara serentak. Walau bagaimanapun, anda boleh mengatasi had ini dengan menggunakan mixin.

Contoh Mixin:

class ClassName {
  constructor() {
    // Initialization code
  }
  methodName() {
    // Method code
  }
}

Perkara Utama:

  • Mixins ialah satu cara untuk menambah kefungsian pada kelas tanpa menggunakan warisan.
  • Anda boleh "mencampurkan" sifat dan kaedah daripada satu objek ke objek lain menggunakan Object.assign().

5. Kaedah dan Sifat Statik

Kaedah dan sifat statik tergolong dalam kelas itu sendiri dan bukannya tika kelas. Mereka dipanggil terus di kelas.

Contoh Kaedah Statik:

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal('Buddy', 'Dog');
dog.speak();  // Output: Buddy makes a sound.

Perkara Utama:

  • Kaedah statik berguna untuk fungsi utiliti yang tidak memerlukan data khusus contoh.

6. Getters and Setters

Pengambil dan penetap membolehkan anda menentukan kaedah khas untuk mendapatkan dan menetapkan sifat objek. Ini biasanya digunakan untuk merangkum keadaan objek.

Contoh Getters dan Setter:

class ChildClass extends ParentClass {
  constructor() {
    super(); // Calls the parent class constructor
    // Additional initialization code for child class
  }
}

Perkara Utama:

  • Getter: Mentakrifkan cara nilai hartanah diakses.
  • Penetap: Mentakrifkan cara nilai harta benda dikemas kini.

7. Ringkasan

  • Kelas menyediakan cara moden untuk mencipta objek dan mengurus gelagatnya menggunakan kaedah.
  • Warisan membenarkan satu kelas mewarisi sifat dan kaedah daripada yang lain, menjadikannya lebih mudah untuk melanjutkan fungsi.
  • Penggantian kaedah membenarkan kelas kanak-kanak menukar atau melanjutkan tingkah laku daripada kelas induk.
  • JavaScript juga menyokong kaedah statik, campuran dan fungsi getter/setter untuk kefungsian dan enkapsulasi yang dipertingkatkan.

Kelas dan warisan ialah konsep penting dalam pengaturcaraan berorientasikan objek, dan memahaminya akan membantu anda menulis kod JavaScript yang lebih bersih dan boleh diselenggara.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Memahami Kelas dan Warisan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn