コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript OOP の概念: クラスベースとプロトタイプベース

JavaScript OOP の概念: クラスベースとプロトタイプベース

Mary-Kate Olsen
リリース： 2024-10-20 14:34:29
オリジナル
550 人が閲覧しました

JavaScript OOP Concepts: Class-Based vs. Prototype-BasedJavaScript のオブジェクト指向プログラミング (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 クラスは、他の関数 (logGreeting など) に渡すことができる、greet メソッドをカプセル化することで、ファーストクラスの関数のような動作を示します。

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

ソース：dev.to
前の記事：JavaScriptでのお約束 次の記事：ust-Have 初心者プログラマー向けの VS Code 拡張機能: 基本を超えたツール
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2357
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2489
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2105
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1985
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2056
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート