Rumah > hujung hadapan web > tutorial js > JavaScript + OOP

JavaScript + OOP

WBOY
Lepaskan: 2024-07-18 10:34:53
asal
706 orang telah melayarinya

JavaScript + OOPs

OOP — atau Pengaturcaraan Berorientasikan Objek — boleh membantu anda menyusun kod anda dengan cara yang lebih logik dan terurus, dan ia boleh memudahkan penggunaan semula dan melanjutkan kod anda pada masa hadapan.

Dalam JavaScript, pengaturcaraan berorientasikan objek (OOP) ialah paradigma pengaturcaraan yang berdasarkan konsep "objek", yang merupakan koleksi data dan fungsi yang bekerjasama untuk melaksanakan tugas tertentu.

Dalam OOP, objek dicipta daripada "kelas", iaitu templat yang mentakrifkan sifat dan kaedah objek yang mereka cipta.

Kelebihan OOP

Salah satu kelebihan utama menggunakan OOP dalam JavaScript ialah ia membolehkan anda menyusun kod anda dengan cara yang lebih logik dan terurus. Dengan OOP, anda boleh mencipta kelas yang mewakili objek dunia sebenar dan mentakrifkan sifat dan kaedah yang ada pada objek tersebut. Ini menjadikannya lebih mudah untuk memahami dan berfungsi dengan kod anda, terutamanya apabila ia semakin rumit.

Satu lagi faedah OOP dalam JavaScript atau pengaturcaraan ialah ia membenarkan penggunaan semula dan kebolehlanjutan kod.

Setelah anda menentukan kelas, anda boleh mencipta seberapa banyak objek daripada kelas itu yang anda perlukan. Ini boleh menjimatkan banyak masa dan usaha anda kerana anda tidak perlu menulis kod yang sama berulang kali untuk setiap objek.

Selain itu, anda boleh membuat kelas baharu yang diwarisi daripada kelas sedia ada, yang membolehkan anda menggunakan semula dan melanjutkan fungsi kod sedia ada.

Bermula dengan OOP
Untuk bermula dengan OOP dalam JavaScript, anda perlu memahami konsep kelas terlebih dahulu. Dalam JavaScript, kelas ialah templat yang mentakrifkan sifat dan kaedah objek yang diciptanya. Berikut ialah contoh kelas ringkas yang mewakili seseorang:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
Salin selepas log masuk

Dalam contoh ini, kelas Orang mempunyai dua sifat: nama dan umur. Ia juga mempunyai satu kaedah, greet(), yang mengeluarkan ucapan kepada konsol.

Untuk mencipta objek daripada kelas ini, anda menggunakan kata kunci baharu diikuti dengan nama kelas, seperti ini:

const person1 = new Person("John", 25);
const person2 = new Person("Jane", 30);
Salin selepas log masuk

Setelah anda mencipta objek, anda boleh mengakses sifat dan kaedahnya menggunakan notasi titik, seperti ini:

OOP Warisan dalam JavaScript
Selain mentakrifkan kelas dan mencipta objek, OOP dalam JavaScript juga membenarkan pewarisan. Ini bermakna anda boleh mencipta kelas baharu yang mewarisi sifat dan kaedah kelas sedia ada. Sebagai contoh, katakan anda ingin membuat kelas Pelajar yang mewakili pelajar di sekolah. Kelas Pelajar boleh mewarisi daripada kelas Orang, seperti ini:

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}
Salin selepas log masuk

Empat Tiang OOPS
Empat tiang pengaturcaraan berorientasikan objek (OOP) dalam JavaScript ialah:

Encapsulation:
Enkapsulasi merujuk kepada idea membungkus data dan fungsi bersama-sama di dalam objek. Dalam OOP, objek ialah blok binaan asas kod anda, dan setiap objek mempunyai sifat dan kaedahnya sendiri. Ini membolehkan anda menyusun kod anda dengan cara yang memudahkan untuk difahami dan digunakan.

Sebagai contoh, anda mungkin membuat kelas Orang yang mempunyai sifat seperti nama dan umur serta kaedah seperti greet() dan introduce().

Abstraksi:

Abstraksi ialah proses menyembunyikan butiran pelaksanaan objek dan hanya mendedahkan maklumat yang diperlukan kepada pengguna. Dalam OOP, anda boleh menggunakan abstraksi untuk menjadikan kod anda lebih modular dan fleksibel.

Sebagai contoh, anda boleh mentakrifkan kelas abstrak yang menyediakan antara muka biasa untuk sekumpulan objek berkaitan, tanpa menyatakan cara objek tersebut dilaksanakan.

Warisan:
Warisan ialah proses mencipta kelas baharu yang mewarisi sifat dan kaedah kelas sedia ada. Ini membolehkan anda menggunakan semula dan melanjutkan kod sedia ada, yang boleh menjimatkan masa dan usaha anda.

Contohnya, jika anda mempunyai kelas Orang yang mentakrifkan sifat dan kaedah biasa untuk seseorang, anda boleh mencipta kelas Pelajar yang mewarisi daripada kelas Orang dan menambah kefungsian tambahan.

Polimorfisme:
Polimorfisme ialah keupayaan objek yang berbeza untuk bertindak balas kepada panggilan kaedah yang sama dengan cara yang berbeza. Dalam OOP, polimorfisme membolehkan anda mencipta objek yang berkongsi antara muka yang sama, tetapi mempunyai pelaksanaan yang berbeza. Ini menjadikan kod anda lebih fleksibel dan membolehkan anda menulis kod yang lebih mudah diselenggara dan diperluaskan.

Sebagai contoh, anda boleh mencipta kelas Shape yang mentakrifkan kaedah draw() biasa, dan kemudian buat subclass untuk jenis bentuk yang berbeza (cth. Bulatan, Rectangle, dsb.) yang masing-masing melaksanakan kaedah draw() dalam mereka sendiri cara.

Berikut ialah contoh cara tiang OOP ini boleh digunakan dalam program JavaScript:

// Encapsulation: define a Person class with properties and methods
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Inheritance: define a Student class that inherits from the Person class
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

// Abstraction: define an abstract Shape class with a common draw() method
abstract class Shape {
  abstract draw(): void;
}

// Polymorphism: define subclasses of Shape that implement the draw() method in their own way
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle...");
  }
}
class Rectangle extends Shape {
  draw() {
    console.log("Drawing a rectangle...");
  }
}

Salin selepas log masuk

Wrapping Up
Object-oriented programming is a fundamental concept in JavaScript and can greatly improve the structure and organization of your code. By understanding and implementing concepts such as encapsulation, inheritance, and polymorphism, you can create more efficient and maintainable programs.

Whether you’re a beginner or an experienced developer, taking the time to master OOP in JavaScript will pay off in the long run. Thanks for reading, and happy coding.

Atas ialah kandungan terperinci JavaScript + OOP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan