要撰寫有關JavaScript 物件導向程式設計(OOP) 概念和原型的詳細博客，我們將首先介紹一等函數、 -類別實例、繼承、多態性、封裝和抽象，解釋基於類別的 和基於原型的 方法。
JavaScript 的獨特之處在於它可以支援基於類別的 OOP（在 ES6 中引入）和基於原型的 OOP（JavaScript 處理 OOP 的原始方式）。本部落格將深入探討關鍵的OOP 概念，例如一等函數、一等實例、繼承、多態性、封裝和抽象使用這兩種方法。
1.一流的功能
在 JavaScript 中，函數是一等公民。這表示函數可以是：
絕對！讓我們對部落格文章進行分解，以涵蓋在 JavaScript 中使用函數式和基於類別的方法的一流函數和一流實例。這將使您在物件導向程式設計 (OOP) 的背景下清楚地理解這些概念。
函數式方法
範例：一等函數
// 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
登入後複製
登入後複製
登入後複製
說明：
- 函數可以像任何其他值一樣儲存、傳遞和返回，展示一流的函數。
基於類別的方法
雖然函數是一等公民，但我們也可以創造模仿類似行為的類別。
範例：類別上下文中的一流函數
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!
登入後複製
登入後複製
登入後複製
說明：
Greeter 類別透過封裝greet 方法演示了一流的類似函數的行為，該方法可以傳遞給其他函數（如 logGreeting）。 -
2.一級實例
物件或類別的實例也可以被視為
一等公民。它們可以分配給變量，作為參數傳遞，並儲存在集合中。
與函數一樣，物件或類別的實例也可以被視為
一等公民。他們可以是：
- 分配給變數
- 作為參數傳遞
- 從函數回傳
- 儲存在陣列等集合中
函數式方法
範例：第一類實例
// 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
登入後複製
登入後複製
登入後複製
說明：
- 這裡，myCar 和 yourCar 是 Car 函式建構子的實例。它們可以傳遞給函數並儲存在變數中。
基於類別的方法
範例：類別上下文中的第一類實例
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!
登入後複製
登入後複製
登入後複製
說明：
- 在此範例中，myCar 和 yourCar 是 Car 類別的實例，就像函數式方法一樣，它們可以傳遞給函數並進行操作。
3.繼承
基於類別的繼承允許您使用extends關鍵字建立一個從現有類別繼承屬性和方法的新類別。
基於類別的範例：
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
登入後複製
基於原型的範例：
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
登入後複製
說明：
-
基於類別的繼承使用extends從父類別繼承，而基於原型的繼承使用Object.create來連結物件。
4.多態性
多態允許不同的物件定義相同方法的自己的版本，可以在父類型的物件上呼叫。
基於類別的範例：
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.
登入後複製
基於原型的範例：
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.
登入後複製
說明：
-
多態性 允許基於類別和基於原型的物件定義自己的發言方法版本，同時仍從父類型繼承。
5.封裝
封裝涉及隱藏物件的內部細節並僅公開必要的內容。在 JavaScript 中，我們透過在 基於類別的 OOP 中使用私有欄位（帶有 #）或在 基於原型的 OOP 中使用閉包來實現這一點。
基於類別的範例：
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.
登入後複製
基於原型的範例：
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.
登入後複製
說明：
-
基於類別的封裝使用私有欄位（ES6中引入）來隱藏數據，而基於原型的封裝透過閉包實現隱私。
6.抽象
抽象隱藏複雜的邏輯，只暴露必要的細節。它可以透過抽像出內部細節並公開基本方法來實現。
基於類別的範例：
// 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
登入後複製
登入後複製
登入後複製
基於原型的範例：
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!
登入後複製
登入後複製
登入後複製
說明：
- 這兩種方法都封裝了管理電池電量的複雜性，僅公開了必要的互動方法。
結論
了解 JavaScript 中基於類別 和 基於原型 OOP 之間的差異和相似之處可以增強您的程式設計技能。一流的函數和實例、繼承、多態性、封裝和抽象化是基本概念，您可以利用它們來編寫更清晰、更易於維護的程式碼。
雖然現代基於類別的 語法（在ES6 中引入）對於來自其他OOP 語言的開發人員來說更具可讀性和熟悉性，但基於原型 方法對於JavaScript 來說更為基礎潛在行為。
本部落格示範了核心OOP 概念— 第一類函數、第一類實例、繼承、多態性 、封裝和抽象——兩種範式都可以實現。無論您使用類別還是原型，JavaScript 都提供了強大的機制，以靈活且強大的方式實現 OOP。
以上是JavaScript OOP 概念：基於類別與基於原型的詳細內容。更多資訊請關注PHP中文網其他相關文章！
