JavaScript のオブジェクト指向プログラミング (OOP) の概念と プロトタイプ について詳細(xì)なブログを書くには、ファーストクラス関數(shù)、最初に説明します。 - クラスインスタンス、継承、ポリモーフィズム、カプセル化、および抽象化、クラスベース および プロトタイプベース のアプローチ。

---

JavaScript は、

クラスベースの OOP (ES6 で導(dǎo)入) と プロトタイプベースの OOP (JavaScript が OOP を処理する元の方法) の両方をサポートできるという點(diǎn)で獨(dú)特です。このブログでは、ファーストクラス関數(shù)、ファーストクラス インスタンス、継承、ポリモーフィズム、 などの主要な OOP 概念について詳しく説明します。カプセル化と抽象化の両方のアプローチを使用します。

1.第一級(jí)関數(shù)

JavaScript では、関數(shù)は

第一級(jí)市民です。これは、関數(shù)が次のとおりであることを意味します。

変數(shù)に代入
引數(shù)として渡されます
他の関數(shù)から返された

もちろんです！ブログ投稿を分解して、JavaScript の関數(shù)ベースのアプローチとクラスベースのアプローチの両方を使用して、

ファーストクラス関數(shù) と ファーストクラス インスタンス の両方をカバーしましょう。これにより、オブジェクト指向プログラミング (OOP) のコンテキストにおけるこれらの概念を明確に理解できるようになります。

機(jī)能的アプローチ

例: 第一級(jí)関數(shù)

// 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

説明:

関數(shù)は、他の値と同じように保存、渡し、返すことができ、
• 第一級(jí)関數(shù)を示します。

クラスベースのアプローチ

関數(shù)は第一級(jí)市民ですが、同様の動(dòng)作を模倣するクラスを作成することもできます。

例: クラスコンテキスト內(nèi)のファーストクラス関數(shù)

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 クラスは、他の関數(shù) (logGreeting など) に渡すことができる、greet メソッドをカプセル化することで、ファーストクラスの関數(shù)のような動(dòng)作を示します。

---

2.ファーストクラスのインスタンス

オブジェクトまたはクラスのインスタンスは、

第一級(jí)市民として扱うこともできます。これらは、変數(shù)に割り當(dāng)てたり、引數(shù)として渡したり、コレクションに保存したりできます。

関數(shù)と同様に、オブジェクトやクラスのインスタンスも

第一級(jí)市民として扱うことができます。それらは次のとおりです:

• 変數(shù)に代入
• 引數(shù)として渡されます
• 関數(shù)から返されたもの
• 配列などのコレクションに格納されます

機(jī)能的アプローチ

例: ファーストクラスのインスタンス

// 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 関數(shù)コンストラクターのインスタンスです。これらは関數(shù)に渡したり、変數(shù)に保存したりできます。

クラスベースのアプローチ

例: クラスコンテキスト內(nèi)のファーストクラスインスタンス

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 クラスのインスタンスであり、関數(shù)型アプローチと同様に、関數(shù)に渡して操作できます。

---

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.ポリモーフィズム

ポリモーフィズムにより、さまざまなオブジェクトが同じメソッドの獨(dú)自のバージョンを定義でき、親型のオブジェクトに対して呼び出すことができます。

クラスベースの例:

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.

説明:

• ポリモーフィズムにより、クラスベースのオブジェクトとプロトタイプベースのオブジェクトの両方が、親の型から継承しながら、獨(dú)自のバージョンのspeakメソッドを定義できます。

---

5.カプセル化

カプセル化には、オブジェクトの內(nèi)部の詳細(xì)を隠し、必要なものだけを公開することが含まれます。 JavaScript では、クラスベースの OOP のプライベート フィールド (# 付き) または プロトタイプ ベースの OOP のクロージャーを使用してこれを?qū)g現(xiàn)します。

クラスベースの例:

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 で導(dǎo)入) を使用してデータを非表示にしますが、プロトタイプ ベースのカプセル化はクロージャを通じてプライバシーを?qū)g現(xiàn)します。

---

6.抽象化

抽象化 は、複雑なロジックを隠し、必要な詳細(xì)のみを公開します。これは、內(nèi)部の詳細(xì)を抽象化し、重要なメソッドを公開することで実現(xiàn)できます。

クラスベースの例:

// 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!

説明:

• どちらのアプローチもバッテリー レベル管理の複雑さをカプセル化し、対話に必要なメソッドのみを公開します。

---

結(jié)論

JavaScript における クラスベース と プロトタイプベース OOP の違いと類似點(diǎn)を理解すると、プログラミング スキルが向上します。ファーストクラスの関數(shù)とインスタンス、継承、ポリモーフィズム、カプセル化、抽象化は、よりクリーンで保守しやすいコードを作成するために活用できる基本的な概念です。

最新の クラスベース 構(gòu)文 (ES6 で導(dǎo)入) は他の OOP 言語(yǔ)から來(lái)た開発者にとって読みやすく親しみやすいものですが、プロトタイプベース のアプローチは JavaScript のより基本的なものです。根本的な動(dòng)作。

このブログでは、OOP の中心的な概念、ファーストクラス関數(shù)、ファーストクラス インスタンス、継承、ポリモーフィズム、カプセル化と抽象化 — どちらのパラダイムでも実現(xiàn)できます。クラスを使用しているかプロトタイプを使用しているかに関係なく、JavaScript は柔軟かつ強(qiáng)力な方法で OOP を?qū)g裝するための堅(jiān)牢なメカニズムを提供します。

---

以上がJavaScript OOP の概念: クラスベースとプロトタイプベースの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。