Heim >Web-Frontend >js-Tutorial >Beherrschen von JavaScript-Klassen: Ein vollständiger Leitfaden für modernes OOP
JavaScript-Klassen sind ein syntaktischer Zucker über ihrem prototypischen Vererbungssystem. Klassen wurden in ES6 eingeführt und bieten eine klare und strukturierte Möglichkeit, Objekte zu definieren und mit Vererbung in JavaScript zu arbeiten, wodurch der Code lesbarer und organisierter wird.
Sie können eine Klasse mit dem Schlüsselwort class definieren.
Beispiel:
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); person1.greet(); // Hello, my name is Alice and I am 25 years old.
Beispiel:
class Car { constructor(brand) { this.brand = brand; } } const myCar = new Car("Toyota"); console.log(myCar.brand); // Toyota
Beispiel:
class Animal { sound() { console.log("Animal makes a sound"); } } const dog = new Animal(); dog.sound(); // Animal makes a sound
Beispiel:
class MathUtils { static add(a, b) { return a + b; } } console.log(MathUtils.add(3, 5)); // 8
Beispiel:
class Rectangle { constructor(width, height) { this.width = width; this.height = height; } get area() { return this.width * this.height; } } const rect = new Rectangle(10, 5); console.log(rect.area); // 50
Vererbung ermöglicht es einer Klasse, Eigenschaften und Methoden von einer anderen Klasse mithilfe des Schlüsselworts „extends“ zu erwerben.
Beispiel:
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a sound.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } const dog = new Dog("Rex"); dog.speak(); // Rex barks.
Private Felder und Methoden, die in ES2022 eingeführt wurden, beginnen mit einem # und können außerhalb der Klasse nicht aufgerufen werden.
Beispiel:
class BankAccount { #balance; constructor(initialBalance) { this.#balance = initialBalance; } deposit(amount) { this.#balance += amount; console.log(`Deposited: ${amount}`); } getBalance() { return this.#balance; } } const account = new BankAccount(100); account.deposit(50); // Deposited: 50 console.log(account.getBalance()); // 150 // console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class
Klassen können auch als Ausdrücke definiert und Variablen zugewiesen werden.
Beispiel:
const Rectangle = class { constructor(width, height) { this.width = width; this.height = height; } getArea() { return this.width * this.height; } }; const rect = new Rectangle(10, 5); console.log(rect.getArea()); // 50
Obwohl Klassen syntaktischer Zucker sind, können Sie sie dennoch mit der prototypbasierten Vererbung von JavaScript kombinieren.
Beispiel:
class Person {} Person.prototype.sayHello = function () { console.log("Hello!"); }; const person = new Person(); person.sayHello(); // Hello!
Kapselung:
Verwenden Sie private Felder, um sensible Daten zu schützen.
Wiederverwendbarkeit:
Nutzen Sie die Vererbung, um Code über mehrere Klassen hinweg wiederzuverwenden.
Überkomplikationen vermeiden:
Verwenden Sie Kurse nur bei Bedarf. Für kleine Aufgaben können einfache Objekte oder Funktionen ausreichen.
Konsistenz:
Befolgen Sie zur besseren Lesbarkeit die Namenskonventionen für Methoden und Eigenschaften.
JavaScript-Klassen bieten eine saubere und effiziente Möglichkeit, die objektorientierte Programmierung in JavaScript zu verwalten. Mit Funktionen wie Vererbung, statischen Methoden, privaten Feldern und Kapselung bieten sie leistungsstarke Tools zum Strukturieren und Verwalten von Code und erleichtern so die Erstellung skalierbarer und wartbarer Anwendungen.
Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachkenntnissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.
Das obige ist der detaillierte Inhalt vonBeherrschen von JavaScript-Klassen: Ein vollständiger Leitfaden für modernes OOP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!