JavaScriptのクラス(Class)

8834 ワード
ES6 テキストリンク
1.クラスの意味
クラスは、独立したタイプのオブジェクトを作成する設計図面と見なすことができます.
フナフレームのように、クラスによってオブジェクトが持つべき属性と方法を定義します.
この動作は、クラスで作成されたすべてのインスタンスで実行できます.
次のコード例では、カートクラスを作成し、アイテムをロードする方法を作成します.
インスタントカーを何枚か撮ります.
2.ショッピングカート
class ShoppingCart {
  constructor() {
    this.store = {};
  }

  addItem(item) {
  this.store[item.id] = item;
  }
  
  getItem(id) {
    return this.store[id]
  }
}
  
const cart1 = new ShoppingCart();

cart1.addItem(id: 0, name: "coffee Dripper")
console.log(cart1.store) // {0: {id: 0, name: "coffee Dripper"}}

const clone = cart1.getItem(0);
console.log(clone); // "coffee Dripper"

  • クラスキーを使用してShoppingCartクラスを定義します.クラス名の後ろに括弧を付け、内部(クラスボディ)を記入します.

  • まず,コンストラクション関数はクラスのコンストラクション関数であり,クラス内部には1つのコンストラクション関数しか存在しない.ここでは定義されていませんが、必要に応じてパラメータを定義し、newキーでオブジェクトを作成するときに呼び出して内部コードを実行することもできます.

  • addItemとgetItemはメソッドを定義します.newキーワードで作成されるオブジェクトは一般的で、例で作成する方法の機能は非常に簡単で、説明しません.

  • 新しいキーワードを使用してShoppingCartクラスのインスタンスCart 1オブジェクトが作成され、生成されたインスタンスCart 1がShoppingCartクラスを自由に使用できる方法が見られます.
    • クラス継承
    次の例のコードでは、プロトタイプベースの継承と全く同じクラス継承を生成する方法を示します.
    
class Canvas {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  draw() {
    console.log('draw something');
  }
}


class Eraser extends Canvas {
  constructor(width, height) {
    super(width, height)
  }
  
  clean() {
    this.draw();
    console.log(`make ${this.width} X ${this.height} canvas clean`);
  }
}


const sheet1 = new Eraser(100, 100);
sheet1.clean(); // 'draw something'
                  // 'make 100 X 100 canvas clean'

  • Canvasクラスが定義されています.クラスを呼び出すと、コンストラクション関数(コンストラクション関数)が実行されます.このクラスにはdrawメソッドが含まれており、特定の文字列をコンソールに出力します.

  • 次に、Canvasクラスを継承するEraserクラスを定義します.extendsキーを使用して継承関係を設定します.

  • Eraserクラスは入力パラメータを用いてsuper()を実行する.superはその親クラスのコンストラクション関数で、Canvasクラスのコンストラクション関数を表します.

  • Eraserクラスのcleanメソッドは、親クラスのdraw()を呼び出すことができます.前のthisはEraserクラスを表しています.

  • (100100)パラメータをEraserクラスに渡す際に、インスタンステーブル1が定義される.次にcleanメソッドを呼び出すと、親クラスのdrawメソッドが安全に使用されていることがわかります.
    • Openrestyフロントエンド開発入門四のRedis編
    プロジェクト進行時エラーの解決方法