JavaScript-OOP-Konzepte: klassenbasiert vs. prototypbasiert

Um einen ausführlichen Blog über die Konzepte und Prototypen der objektorientierten Programmierung (OOP) von JavaScript zu schreiben, gehen wir zunächst erstklassige Funktionen, durch -Klasseninstanzen, Vererbung, Polymorphismus, Kapselung und Abstraktion, wobei beides klassenbasiert und prototypbasierte Ansätze.

---

JavaScript ist insofern einzigartig, als es sowohl

klassenbasiertes OOP (eingeführt in ES6) als auch prototypbasiertes OOP (die ursprüngliche Art und Weise, wie JavaScript mit OOP umgegangen ist) unterstützen kann. Dieser Blog befasst sich mit wichtigen OOP-Konzepten wie Erstklassige Funktionen, Erstklassige Instanzen, Vererbung, Polymorphismus, Kapselung und Abstraktion unter Verwendung beider Ansätze.

1. Erstklassige Funktionen

In JavaScript sind Funktionen

erstklassige Bürger. Dies bedeutet, dass Funktionen sein können:

Variablen zugewiesen
Als Argumente übergeben
Zurückgekehrt von anderen Funktionen

Absolut! Lassen Sie uns den Blog-Beitrag aufschlüsseln, um sowohl

erstklassige Funktionen als auch erstklassige Instanzen abzudecken und dabei sowohl funktionale als auch klassenbasierte Ansätze in JavaScript zu verwenden. Dadurch erhalten Sie ein klares Verständnis dieser Konzepte im Kontext der objektorientierten Programmierung (OOP).

Funktioneller Ansatz

Beispiel: Erstklassige Funktionen

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Erklärung:

Funktionen können wie jeder andere Wert gespeichert, übergeben und zurückgegeben werden und stellen
• erstklassige Funktionen dar.

Klassenbasierter Ansatz

Obwohl Funktionen erstklassige Bürger sind, können wir auch Klassen erstellen, die ein ähnliches Verhalten nachahmen.

Beispiel: Erstklassige Funktionen im Klassenkontext

class Greeter {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Erklärung:

Die Greeter-Klasse zeigt ein erstklassiges funktionsähnliches Verhalten, indem sie die Greet-Methode kapselt, die an andere Funktionen (wie logGreeting) übergeben werden kann.

---

2. Erstklassige Instanzen

Instanzen von Objekten oder Klassen können auch als

Bürger erster Klasse behandelt werden. Sie können Variablen zugewiesen, als Argumente übergeben und in Sammlungen gespeichert werden.

Wie Funktionen können auch Instanzen von Objekten oder Klassen als

Bürger erster Klasse behandelt werden. Sie können sein:

• Variablen zugewiesen
• Als Argumente übergeben
• Zurückgegeben von Funktionen
• In Sammlungen wie Arrays gespeichert

Funktioneller Ansatz

Beispiel: Erstklassige Instanzen

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Erklärung:

• Hier sind myCar und yourCar Instanzen des Car-Funktionskonstruktors. Sie können an Funktionen übergeben und in Variablen gespeichert werden.

Klassenbasierter Ansatz

Beispiel: Erstklassige Instanzen im Klassenkontext

class Greeter {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Erklärung:

• In diesem Beispiel sind myCar und yourCar Instanzen der Car-Klasse und können genau wie der funktionale Ansatz an Funktionen übergeben und manipuliert werden.

---

3. Vererbung

Klassenbasierte Vererbung ermöglicht es Ihnen, eine neue Klasse zu erstellen, die mithilfe des Schlüsselworts „extends“ Eigenschaften und Methoden von einer vorhandenen Klasse erbt.

Klassenbasiertes Beispiel:

function Car(make, model) {
  this.make = make;
  this.model = model;

  this.startEngine = function() {
    console.log(`${this.make} ${this.model} engine started.`);
  };
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla

Prototypenbasiertes Beispiel:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  startEngine() {
    console.log(`${this.make} ${this.model} engine started.`);
  }
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla

Erklärung:

• Klassenbasierte Vererbung verwendet Erweiterungen, um von einer übergeordneten Klasse zu erben, während Prototyp-basierte Vererbung Object.create verwendet, um Objekte zu verknüpfen.

---

4. Polymorphismus

Polymorphismus ermöglicht es verschiedenen Objekten, ihre eigenen Versionen derselben Methode zu definieren, die für Objekte eines übergeordneten Typs aufgerufen werden kann.

Klassenbasiertes 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 myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.

Prototypenbasiertes Beispiel:

function Animal(name) {
  this.name = name;
}

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

function Dog(name) {
  Animal.call(this, name);  // Inherit properties
}

Dog.prototype = Object.create(Animal.prototype);  // Inherit methods
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.

Erklärung:

• Polymorphismus ermöglicht es sowohl klassenbasierten als auch prototypbasierten Objekten, ihre eigene Version der Speak-Methode zu definieren und gleichzeitig von einem übergeordneten Typ zu erben.

---

5. Kapselung

Kapselung beinhaltet das Verbergen der internen Details eines Objekts und das Offenlegen nur des Notwendigen. In JavaScript erreichen wir dies durch die Verwendung privater Felder (mit #) in klassenbasiertem OOP oder Abschlüssen in prototypbasiertem OOP.

Klassenbasiertes Beispiel:

class Animal {
  speak() {
    console.log("Animal makes a sound.");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks.");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows.");
  }
}

const animals = [new Dog(), new Cat()];

animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.

Prototypenbasiertes Beispiel:

function Animal() {}

Animal.prototype.speak = function() {
  console.log("Animal makes a sound.");
};

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.speak = function() {
  console.log("Dog barks.");
};

function Cat() {}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.speak = function() {
  console.log("Cat meows.");
};

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.

Erklärung:

• Klassenbasierte Kapselung verwendet private Felder (eingeführt in ES6), um Daten auszublenden, während prototypbasierte Kapselung Privatsphäre durch Abschlüsse erreicht.

---

6. Abstraktion

Abstraktion verbirgt komplexe Logik und legt nur notwendige Details offen. Dies kann erreicht werden, indem interne Details abstrahiert und wesentliche Methoden offengelegt werden.

Klassenbasiertes Beispiel:

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Prototypenbasiertes Beispiel:

class Greeter {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Erklärung:

• Beide Ansätze fassen die Komplexität der Verwaltung des Batteriestands zusammen und legen nur die notwendigen Methoden für die Interaktion offen.

---

Fazit

Das Verständnis der Unterschiede und Gemeinsamkeiten zwischen klassenbasiertem und prototypbasiertem OOP in JavaScript verbessert Ihre Programmierkenntnisse. Erstklassige Funktionen und Instanzen, Vererbung, Polymorphismus, Kapselung und Abstraktion sind grundlegende Konzepte, die Sie nutzen können, um saubereren und wartbareren Code zu schreiben.

Während die moderne klassenbasierte-Syntax (eingeführt in ES6) für Entwickler aus anderen OOP-Sprachen besser lesbar und vertraut ist, ist der prototypbasierte-Ansatz für JavaScript grundlegender zugrunde liegendes Verhalten.

Dieser Blog zeigt, wie zentrale OOP-Konzepte – erstklassige Funktionen, erstklassige Instanzen, Vererbung, Polymorphismus, Kapselung und Abstraktion – können in beiden Paradigmen erreicht werden. Unabhängig davon, ob Sie Klassen oder Prototypen verwenden, bietet JavaScript robuste Mechanismen, um OOP auf flexible und leistungsstarke Weise zu implementieren.

---

Das obige ist der detaillierte Inhalt vonJavaScript-OOP-Konzepte: klassenbasiert vs. prototypbasiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!