JavaScript OOP の概念: クラスベースとプロトタイプベース-jsチュートリアル-php.cn

JavaScript OOP Concepts: Class-Based vs. Prototype-Based 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!

ログイン後にコピー

説明:

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.

ログイン後にコピー

説明:

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

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 中国語 Web サイトの他の関連記事を参照してください。