TILオブジェクト向けプログラミング

12296 ワード

オブジェクト向けプログラミング(OOP)

  • オブジェクト向けプログラミング(Object-Oriented Programming)は、従来のプロセス向けプログラミング(Procedure-Oriented Programming)とは異なり、データと機能を組み合わせて処理するプログラミングである.
    属性とメソッドは、JavaScriptリソースタイプの1つであるオブジェクトとは異なるオブジェクトの「オブジェクト」の概念に含まれます.ここで、オブジェクトはクラスを意味します.
  • JavaScriptにおけるオブジェクト向けプログラミングに関する概念

  • 等級:フナ餅を作る際に使用されるフナ餅の型を等級にたとえるのが一般的である.しかし、ここでは、何かを作りたいときの青写真や設計図として定義します.サンプルコードを以下に示します.
  • class Car {
      constructor(brand, color, name) {
        this.brand = brand;
        this.color = color;
        this.name = name;
      }
    }
  • 例:辞書は「はい」または「例」を意味し、プログラミングの世界でも類似の概念として一般的に用いられている.ここでは、青写真「クラス」に基づいて生成されたオブジェクトと見なすことができます.次のコードを見ると、理解がもっと速くなります.インスタンスを作成するときは必ず「new」と書きます.
  • let abantte = new Car(hyundae, white, abantte)
  • 属性:人間をたとえ、個人の特徴などを属性と呼ぶことができる.
  • class Car {
      constructor(brand, color, name) {
        this.brand = brand;
        this.color = color;
        this.name = name;
      }
    }
    上記のコードで自動車の特性を定義する「brand」、「color」、「name」などを属性と呼ぶ.
  • 方法:人をたとえて、彼のした特定の行為を方法と定義することができます.
  • class Car {
      drive() {
        console.log('Let's drive!')
      }
      refuel() {
        console.log('Refueling...')
      }
    }
    上記のコードのドライブ(){.}は関数と似ています.と「がんばれ()……}」乙法蘇徳と言います.

    オブジェクト向けプログラミングの4つの特徴


  • カプセル化:メソッドとプロパティを個別に定義するのではなく、オブジェクトに配置することを意味します.内部データまたは内部実装は露出しない.(隠匿化)

  • 抽象化:実際の地図と地下鉄路線図を比較すると分かりやすい.実地図は具体的な現実を示しているが、地下鉄路線図は駅と歴史の関係を通じて、目的地に到着した駅をどう行けばいいのか、どこで乗り換えるのかなどを抽象的に示している.

  • 継承:その名の通り、継承された辞書の意味に似ています.これは、子が親の属性とメソッドを継承することを意味します.既存のコードをコピーして貼り付けるのではなく、「extends」と「super」を使用します.以下を参考にして、理解が楽になります.
  • class Person {
      constructor(name, age, nationality) {
        this.name = name;
        this.age = age;
        this.nationality = nationality;
      }
      eat() {
        console.log('I am eating')
      }
    }
    
    class Student extends Person {
      constructor(name, age, nationality, grade) {
        super(name, age, nationality);
        this.grade = grade;
      }
      study () {
        console.log('Study sucks')
      }
    }
    
    let KIM = new Student('KIM', 20, 'ROK', 'A');
  • 多形性:これは、同じ方法でもオブジェクトが異なる可能性があることを意味する.次のコード例では、グラフィック幅を求めるクラスを定義し、新しい長方形と三角形のインスタンスを生成します.三角形と長方形のインスタンスの幅と高さは同じですが、異なる幅が返されます.つまり、オブジェクトは同じメソッドを持ちますが、入力した値が異なると、異なるシェイプが生成されます.
  • class Shape {
      constructor(type, width, height) {
        this.type = type;
        this.width = width;
        this.height = height;
      }
      getArea() {
        return this.width * this.height
      }
    } 
    
    class Rectangle extends Shape {}
    
    class Triangle extends Shape {
      getArea() {
        return this.width * this.height / 2
      }
    }
    
    let rectangle = new Rectangle('rectangle', 20, 20)
    //rectangle.getArea() = 400
    
    let triangle = new Triangle('triangle', 20, 20)
    //triangle.getArea() = 200