cari
Rumahhujung hadapan webtutorial jsMemahami Kelas dan Warisan dalam JavaScript

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
Rangka Kerja JavaScript: Menguasai Pembangunan Web ModenRangka Kerja JavaScript: Menguasai Pembangunan Web ModenMay 02, 2025 am 12:04 AM

Kuasa rangka kerja JavaScript terletak pada pembangunan yang memudahkan, meningkatkan pengalaman pengguna dan prestasi aplikasi. Apabila memilih rangka kerja, pertimbangkan: 1.

Hubungan antara JavaScript, C, dan penyemak imbasHubungan antara JavaScript, C, dan penyemak imbasMay 01, 2025 am 12:06 AM

Pengenalan Saya tahu anda mungkin merasa pelik, apa sebenarnya yang perlu dilakukan oleh JavaScript, C dan penyemak imbas? Mereka seolah -olah tidak berkaitan, tetapi sebenarnya, mereka memainkan peranan yang sangat penting dalam pembangunan web moden. Hari ini kita akan membincangkan hubungan rapat antara ketiga -tiga ini. Melalui artikel ini, anda akan mempelajari bagaimana JavaScript berjalan dalam penyemak imbas, peranan C dalam enjin pelayar, dan bagaimana mereka bekerjasama untuk memacu rendering dan interaksi laman web. Kita semua tahu hubungan antara JavaScript dan penyemak imbas. JavaScript adalah bahasa utama pembangunan front-end. Ia berjalan secara langsung di penyemak imbas, menjadikan laman web jelas dan menarik. Adakah anda pernah tertanya -tanya mengapa Javascr

Aliran node.js dengan typescriptAliran node.js dengan typescriptApr 30, 2025 am 08:22 AM

Node.js cemerlang pada I/O yang cekap, sebahagian besarnya terima kasih kepada aliran. Aliran memproses data secara berperingkat, mengelakkan beban memori-ideal untuk fail besar, tugas rangkaian, dan aplikasi masa nyata. Menggabungkan sungai dengan keselamatan jenis typescript mencipta powe

Python vs JavaScript: Pertimbangan Prestasi dan KecekapanPython vs JavaScript: Pertimbangan Prestasi dan KecekapanApr 30, 2025 am 12:08 AM

Perbezaan prestasi dan kecekapan antara Python dan JavaScript terutamanya dicerminkan dalam: 1) sebagai bahasa yang ditafsirkan, Python berjalan perlahan tetapi mempunyai kecekapan pembangunan yang tinggi dan sesuai untuk pembangunan prototaip pesat; 2) JavaScript adalah terhad kepada benang tunggal dalam penyemak imbas, tetapi I/O multi-threading dan asynchronous boleh digunakan untuk meningkatkan prestasi dalam node.js, dan kedua-duanya mempunyai kelebihan dalam projek sebenar.

Asal JavaScript: Meneroka Bahasa PelaksanaannyaAsal JavaScript: Meneroka Bahasa PelaksanaannyaApr 29, 2025 am 12:51 AM

JavaScript berasal pada tahun 1995 dan dicipta oleh Brandon Ike, dan menyedari bahasa itu menjadi C. 1.C Language menyediakan keupayaan pengaturcaraan prestasi tinggi dan sistem untuk JavaScript. 2. Pengurusan memori JavaScript dan pengoptimuman prestasi bergantung pada bahasa C. 3. Ciri lintas platform bahasa C membantu JavaScript berjalan dengan cekap pada sistem operasi yang berbeza.

Di sebalik tabir: Apa bahasa JavaScript?Di sebalik tabir: Apa bahasa JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript berjalan dalam penyemak imbas dan persekitaran Node.js dan bergantung pada enjin JavaScript untuk menghuraikan dan melaksanakan kod. 1) menjana pokok sintaks abstrak (AST) di peringkat parsing; 2) menukar AST ke bytecode atau kod mesin dalam peringkat penyusunan; 3) Laksanakan kod yang disusun dalam peringkat pelaksanaan.

Masa Depan Python dan JavaScript: Trend dan RamalanMasa Depan Python dan JavaScript: Trend dan RamalanApr 27, 2025 am 12:21 AM

Trend masa depan Python dan JavaScript termasuk: 1. Kedua -duanya akan terus mengembangkan senario aplikasi dalam bidang masing -masing dan membuat lebih banyak penemuan dalam prestasi.

Python vs JavaScript: Persekitaran dan Alat PembangunanPython vs JavaScript: Persekitaran dan Alat PembangunanApr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod