JavaScriptのOOPSパラダイムの理解

皆さんこんにちは.
このポストでは、JavaScriptのオブジェクト指向プログラミングパラダイムを調査します.OOPはすべてがオブジェクトで管理されるパラダイムです.
JavaScriptのオブジェクトを扱うには、次の4つの方法があります.

オブジェクトの作成方法.

プロトタイプを作成する方法.

オブジェクトの作成の擬似クラシックパターン.

クラス

オブジェクトで動作する最善の方法はクラスです.我々は、どのようにクラスの作品を正確に学びます.それぞれの方法を一つずつ探求しましょう.

ファクトリーオブジェクトの作成方法
複数の学生オブジェクトを作成する必要があるとしましょう.工場の方法で、我々は手動でそれらのすべてのオブジェクトを作成する必要はありません.コンストラクタ関数を作成します.

function creteStudent(name, batch, marks, maxMarks) {
    let obj = {};
    obj.name = name;
    obj.batch = batch;
    obj.marks = marks;
    obj.maxMarks = maxMarks;
    obj.percentage = function() {
        return `${(marks*100)/maxMarks}%`;
    };

    return obj;
}

次に生徒を作る必要があるときはいつでも、上記の関数をコールしなければなりません.

let student1 = createStudent("Swastik", 9, 95, 100);
let student2 = createStudent("Rahul", 8, 90, 100);

student1.percentage() // 95%

これはオブジェクトを作成するファクトリの方法です.

プロトタイプオブジェクトの作成方法
プロパティがオブジェクト内で見つからない場合、プロトタイプのチェーンでそれを探す.これはオブジェクトの原型的性質です.

ではプロトタイプを作成しましょう.

オブジェクトを使用してオブジェクトを作成します.create ()を使用します.

このメソッドを使用してください.

オブジェクトを必ず返します.

let studentMethod = {
  percentage: function() {
    return `${this.marks*100 / this.maxMarks}%`;
  }
}

function createStudent(name, batch, marks, maxMarks) {
  let obj = Object.create(studentMethod);
  obj.name = name;
  obj.batch = batch;
  obj.marks = marks;
  obj.maxMarks = maxMarks;

  return obj;
}

let student1 = createStudent("Swastik", 9, 99, 100);
student1.percentage(); // 99%

オブジェクト.CREATEオブジェクトをパラメーターとして受け取り、そのパラメータをdunder protoに設定します.たとえば、上記のコードスニペットパーセンテージメソッドがdunder protoに追加された場合、メインオブジェクトには含まれません.

オブジェクトの疑似古典的パターン
疑似クラシカルパターンは、コンストラクタ関数を持つ新しいキーワードを使用してオブジェクトを作成します.新しいキーワードは3つのことを行います.

は暗黙のうちに新しいオブジェクトを作成します.

は新しいオブジェクトをこれを関数プロトタイプに置きます.

は暗黙のうちにobj (これ)を返します.

新しいキーワードを使うとき、プロトタイプからのメソッドはdunder protoに行きます.

これは

です.Proto = CreateStudent.プロトタイプ

はobj(この)

を返します
例えば:

function CreateStudent(name, batch, marks, maxMarks) {
  this.name = name;
  this.batch = batch;
  this.marks = marks;
  this.maxMarks = maxMarks;
}

CreateStudent.prototype = {
  percentage: function() {
    return `${this.marks*100 / this.maxMarks}%`;
  }
}

let student1 = new CreateStudent("Swastik", 9, 100, 100);
student1.percentage(); // 100%

newキーワードは暗黙的にオブジェクトを作成し、メソッドをdunder protoに設定し、暗黙的にオブジェクトを返します.

クラス
クラスは、オブジェクトを作成する構文上の砂糖です.最後の例では、学生を作成するパーセンテージメソッドを追加しました.手動でプロトタイプ.クラスのすべてが自動的に行われます.

newキーワードはコンストラクターを呼び出し、暗黙的にこのオブジェクトを作成して返します.

クラスはメソッド(関数)のみを受け付けます.

オブジェクトのdunder protoでメソッドを見つけます.

インストール時:

class CreateStudent {
  constructor(name, batch, marks, maxMarks) {
    this.name = name;
    this.batch = batch;
    this.marks = marks;
    this.maxMarks = maxMarks;
  }

  percentage() {
    return `${this.marks*100 / this.maxMarks}%`;
  }
}

let student1 = new CreateStudent("Swastik", 9, 89, 100);
student1.percentage(); // 89%
student1.percentage === CreateStudent.prototype.percentage; // true

それで、それは我々がクラスでオブジェクトを作成する方法です.クラスメソッドの列挙フラグはデフォルトではfalseに設定されています.なぜなら、ループ内のメソッドを望まないからです.

クラス継承
クラス継承は既存のものの上に新しい機能を作成する方法です.動物のクラスと動物のクラスに基づくウサギクラスがあると言いましょう.

// Animal Class
class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stands still.`);
  }
}

let animal = new Animal("My animal");

// Rabbit Class
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

ウサギクラスには、実行方法がありませんが、それは動物からアクセスすることができます.ウサギクラスを拡張したプロトタイプ.


スーパーキーワード
スーパーキーワードでは、拡張クラスで親メソッドとコンストラクターを呼び出すことができます.

スーパーメソッド()親メソッドを呼び出します.

スーパーだ親コンストラクタを呼び出します.

例えば:

class Rabbit extends Animal {
  constructor() {
    super(); // calls the parent constructor
  }

  hide() {
    alert(`${this.name} hides`);
  }

  stop() {
    super.stop(); // calls stop method of parent
    this.hide()
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stands still. White Rabbit hides!

上記のコードスニペットでは、RabbitクラスはSuperメソッドを使用してSuperメソッドをSuperメソッドと呼びます.

静的メソッド
また、クラス自体にメソッドを割り当てることもできます.このような方法を静的方法と呼ぶ.静的キーワードでprependedされます.

class User {
  static staticMethod() {
    console.log(this === User);
  }
}

User.staticMethod(); // true

静的メソッドは、クラス全体に属する機能に使用されます.これは、具体的なクラスインスタンスには関係ありません.
静的プロパティとメソッドが継承されます.クラスBのために、クラスB自体のプロトタイプはA : B [[プロトタイプ]] = Aを示します.

プロパティとメソッド

保護されたフィールドは、で始まる.プロテクトフィールドは、そのクラスとクラスの継承クラスからのみアクセス可能です.プロテクトフィールドは言語レベルでサポートされません.

プライベートフィールドは、△で始まる.プライベートフィールドは、クラス内からのみアクセスできます.

class CoffeeMachine {
    #waterAmount = 0;

    set waterAmount(value) {
        if (value < 0) {
            value = 0;
        }
        this.#waterAmount = value;
    }

    get waterAmount() {
        return this.#waterAmount;
    }

    constructor(power) {
        this.power = power;
    }
}

let coffeeMachine1 = new CoffeeMachine(100);
coffeeMachine1.#waterAmount; // Error - Private method cannot be accessed outside of the class.
coffeeMachine1.waterAmount; // 0;
coffeeMachine1.waterAmount = -20;
coffeeMachine1.waterAmount; // 0;

プライベートメソッドは、ウォーターウォーターは、クラス自体の中でのみアクセス可能です.

このキーワード
このキーワードは、それが属するオブジェクトを参照します.このキーワードが参照している場所を識別する4つの規則があります.

fn () ->ウィンドウ

obj.fn () -> objを参照.関数がこれを使用するならば、これは(-)の左側のオブジェクトになります.

bind、call、apply -> "this "値を指定します.

newキーワードは暗黙のうちにこれを作成して返します.

これは実行時に変更されます.
🙌 私の毎週のニュースレターに参加してサポート.
これがこのポストです.私はあなたが役に立つならば、それが役に立つならば、共有をして、私があなたのskillsetを造ることに関するEpic毎週の内容を共有する私の8020 Newsletterに応募してください.
ありがとう!