私の React の旅: 15 日目

Dec 16, 2024 am 12:47 AM

My React Journey: Day 15

オブジェクト指向プログラミング (OOP)
オブジェクト指向プログラミングは、オブジェクトの概念に基づいたプログラミング パラダイムです。

OOP の主要原則
1.カプセル化:

  • 関連する変数と関数をオブジェクトにグループ化します。
  • 関数内のパラメータを減らし、複雑さを軽減します。 例:
function Circle(radius) {
    this.radius = radius;
    this.draw = function() {
        console.log('draw');
    };
}
const circle = new Circle(5);
console.log(circle.radius); // Access encapsulated property
circle.draw(); // Call encapsulated method
ログイン後にコピー

2.抽象化:

詳細と複雑さを隠し、オブジェクトの必要な部分のみを公開します。
インターフェースを簡素化し、基礎となるコードの変更による影響を軽減します。
例: 内部ロジックを非表示にしてメソッドを抽象化します。

3.継承:

クラス (子) が別のクラス (親) からプロパティとメソッドを継承できるようにします。
冗長なコードを削減します。
例:

class Animal {
    eat() {
        console.log("This animal is eating.");
    }
}
class Dog extends Animal {
    bark() {
        console.log("The dog is barking.");
    }
}
const dog = new Dog();
dog.eat(); // Inherited from Animal
dog.bark();
ログイン後にコピー

4.ポリモーフィズム:

さまざまな形をとるオブジェクトを指します。
さまざまなオブジェクト タイプに統一されたインターフェイスを許可し、コードの再利用と柔軟性を実現します。
例:

class Animal {
    sound() {
        console.log("This animal makes a sound.");
    }
}
class Dog extends Animal {
    sound() {
        console.log("The dog barks.");
    }
}
const animal = new Animal();
const dog = new Dog();
animal.sound(); // Output: This animal makes a sound.
dog.sound();    // Output: The dog barks.
ログイン後にコピー

OOP の重要性

  • カプセル化: 複雑さを軽減し、再利用性を高めます。
  • 抽象化: 実装の詳細を非表示にし、対話を簡素化します。
  • 継承: コードの重複を排除し、再利用を促進します。
  • ポリモーフィズム: 柔軟性と合理化されたコード構造を可能にします。

実践例
クラスとコンストラクター

  • オブジェクトを作成するための構造化された明確な方法。
  • 例:
class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    displayProduct() {
        console.log(`Product: ${this.name}`);
        console.log(`Price: $${this.price.toFixed(2)}`);
    }

    calculateTotal(salesTax) {
        return this.price + this.price * salesTax;
    }
}

const product1 = new Product("Laptop", 1200);
product1.displayProduct();
console.log(`Total Price: $${product1.calculateTotal(0.1).toFixed(2)}`);
ログイン後にコピー

動物との遺伝

  • 再利用性とメソッドのオーバーライドを示します。
  • 例:
class Animal {
    eat() {
        console.log("This animal eats food.");
    }
}

class Bird extends Animal {
    fly() {
        console.log("This bird can fly.");
    }
}

const bird = new Bird();
bird.eat();
bird.fly();
ログイン後にコピー

反省
学んだこと:

  • 中心的な OOP 原則: カプセル化、抽象化、継承、ポリモーフィズム。
  • コードの複雑さを軽減し、再利用性を高めるための実用的な使用例。
  • コンストラクター、メソッド、継承を適用​​して現実世界の問題を解決します。

OOP は別のレベルです。

明日また行きます!

以上が私の React の旅: 15 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

10 jQuery構文蛍光物

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

10 JavaScript&JQuery MVCチュートリアル

See all articles