Chapter[オブジェクト向け]


[クラスを使用したモジュール化]


1.オブジェクト向けプログラミングとは?


抽象的なプログラミングに必要なデータによって状態と動作を持つオブジェクトを作成し、これらのオブジェクト間の有機的なインタラクションによって論理を組織するプログラミング方法.

2.クラス関数


クラスのデフォルトルールを作成します.通常クラスは大文字と一般名詞で構成されます.
class Rectangle {
  constructor(brand, name, color){
}
constructor(생성자)=クラスにオブジェクトを作成するときに呼び出す

3.newキーワードでクラスのインスタンスを作成できます。

const avante = new Car('hyundai', 'avante', 'blak');
const mini = new Car('bmw', 'mini', 'white')

4.属性


属性はブランド、車名、現在のガソリン状態、最高速度
class Rectangle{
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}
ここで、thisはインスタンスオブジェクトを表し、パラメータのブランド、名前、色などはインスタンス作成時に指定された値である.
thisに割り当てるとは、作成したインスタンスに対応するブランド、名前、色を割り当てることを意味します.
関数を実行するときにscopeごとに作成される一意の実行コンテキスト.
newキーを使用してインスタンスを作成すると、このインスタンスはthisの値になります.

5.方法


方法(オブジェクトに伴う関数)は、ガソリン注入、速度設定、運転を含む
class Rectangle{
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  refuel(){
  }
  drive(){
  }
}

6.Instrusでの使用

const avante = new Car('hyundai', 'avante', 'blak');
avante.color; // 'black'
avante.drive(); // 아반떼가 운전을 시작합니다

const mini = new Car('bmw', 'mini', 'white');
mini.brand; // 'bmw'
mini.refuel(); // 미니에 연료를 공급합니다

[ Prototype ]


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


OOPとは?

  • 人が世界をどう見理解するかの方法論
  • すべては「客体」に分類されます.
  • 4の主要概念によって再利用性が得られる.

  • カプセル化

  • データ(プロパティ)と機能(メソッド)を組み合わせる

  • 非表示:非表示実装、露出アクション

  • 分散結合に有利:いつでも変更可能

  • ばらばら結合結合は、コードの実行順序に従ってステップ別にコードを記述することを意味するのではなく、コードが表す実際の状況に従ってコードを組み合わせることを意味する.

  • コードの複雑さを軽減し、再利用性を向上

  • 継承

  • 子は親のフィーチャーを継承します

  • 不要なコードを減らし、再利用性を高める.

  • 抽象化

  • 内部実施は非常に複雑だが、実際に露出している部分は簡単だ.

  • インタフェース(メソッドとプロパティのみが定義されている)は簡単になります.

  • クラスを使う人は暴露方法などを必要とせず,簡単な名前で定義することに重点を置いている.

  • コードをシンプル化し、変更の影響を最小限に抑える

  • たけいせい

  • 「多様な形態」がある.

  • if/else ifなどの条件文ではなく、オブジェクトの特性と異なる条件文を同じ方法で作成できます.
  • 2.クラスとプロトタイプ


  • JavaScriptはプロトコルベースの言語です.ここで、「プロトタイプ」(Prototype)はプロトタイプオブジェクトを表します.

  • JavaScriptのクラスは、プロトコルタイプを使用して実装されます.
  • class Human {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
    
      sleep() {
        console.log(`${this.name}은 잠에 들었습니다`);
      }
    }
    
    let kimcoding = new Human('김코딩', 30);
    
    Human.prototype.constructor === Human; // true
    Human.prototype === kimcoding.__proto__; // true
    Human.prototype.sleep === kimcoding.sleep; // true
  • Humanという名前のクラスとインスタンスおよびプロトタイプの関係
  • アレイクラスとインスタンスとプロトコルタイプの関係

  • 3.プロトタイプチェーン

  • class構文継承
  • //부모 클래스 + 슈퍼 클래스
    class Rectangle{
      constructor(width, height){
        this.width = width
        this.height = height
      }
    
      getArea(){
        return this.width * this.height
      }
    
      getPerimeter(){
        return 2 * (this.width + this.height)
      }
    }
    
    //자식 클래스 + 서브 클래스
    class Square extends Rectangle {
      constructor(width){
        super() // super(width, width)
        this.width = width;
        this.height = width;
      }
    }
    
     - 하위 클래스를 만드려면 Javascript에서 extends 키워드를 통해 상속 받을 클래스를 명시
    
     - 상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드
    
    const rect = new Rectangle(20, 10)
    console.log(`넓이: ${rect.getArea()}`)
    console.log(`둘레: ${rect.getPerimeter()}`)
    
    const square = new Square(10, 10)
    console.log(`넓이: ${square.getArea()}`)
    console.log(`둘레: ${square.getPerimeter()}`)
  • インスタンスの__proto__を使用して、親のプロトタイプ、または「親の親」のプロトタイプを探索します.