31. OOP(Object-oriented programing) in Javascript


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


オブジェクト向けプログラミング(英語:オブジェクト向けプログラミング、OOP)は、コンピュータプログラミングのモデルの一つです.オブジェクト向けプログラミングは,コンピュータプログラムを命令リストと見なす観点から,複数の独立したユニット,すなわち「オブジェクト」の集合と理解する.各オブジェクトは、メッセージの送受信とデータの処理を行うことができます.
オブジェクト向けプログラミングはプログラムを柔軟に変化させるため,大規模なソフトウェア開発によく用いられる.プログラミングの学習が容易で、ソフトウェアの開発とメンテナンスが容易で、コード分析が直感的であるなどの利点もあります.しかし、過度な番組対象化傾向は、真実の世界を反映できないという批判を受けている.ウィキペディア-
独立した「オブジェクト」を作成するために、Classはモデルの青写真として機能します.クラスに基づいて作成されたオブジェクトはInstanceと呼ばれます.

Class and Instance


Class


クラスを作成する方法は、ES 6を使用する前の方法で通常の関数を定義し、ES 6から導入されたクラスキーワードを使用してクラスを作成する方法です.
クラス名はpascal caseで命名されます.
classキーワードを使用する方法を指します!!
//class 키워드 사용
class Fruit {
  constructor(name, color) { //constructor를 이용하여 생성될 객체의 속성을 정의한다.
    this.name = name;  // this의 값은 new 키워드를 통해 생성될 Instance가 된다.
    this.color = color;
  }

  taste() { //function을 생략한 형태로 함수를 생성하여 메서드를 만들어 줄 수 있다.
    return `${this.name} is good taste!`;
  }
}

const fruitA = new Fruit('apple', 'red'); // Instance를 생성할대는 new 키워드 + class 를 사용 한다. Intance = fruitA
console.log(fruitA); // > Fruit {name: 'apple', color: 'red'}
console.log(fruitA.taste());// > apple is good taste!

const fruitB = new Fruit('banana', 'yellow'); //Intance = fruitB
console.log(fruitB); // > Fruit {name: 'banana', color: 'yellow'}
console.log(fruitB.taste()); // > banana is good taste!


// 사용을 지양하는 지양하는 지양하는 함수를 정의하듯 만드는 class, ES6 이전 방법.
// class 키워드를 사용한 방식과 동일한 결과를 나타낸다.
function Fruit(name, color) { //함수를 이용해 Class를 만들고,
  this.name = name;
  this.color = color;
}

Fruit.prototype.taste = function () { //Class의 prototype으로 메서드를 추가하는 방식이다.
  return `${this.name} is good taste!`;
};

オブジェクト向けプログラムのプロパティ


•パッケージ


属性と方法をばらばらに結合し,データと機能を1つのオブジェクトに配置して組み合わせる概念には,隠匿化の特徴も含まれている.隠匿化は,内部データや内部実装が外部に露出することを防止するためである.

•継承


子供は親の特徴を受け継ぐ.上にはFruitという名前のclassが作成されています.Fruitoriinという名前のclassを作成し、属性でoriginを追加しようとすると、重複した属性name、colorを再実現するのではなく、Fruitで継承できる概念です.
class FruitOrigin extends Fruit { // extends 키워드를 통해 상속받을 class를 가저온다.
  constructor(name, color, origin) {
    super(name, color); // super 키워드를 통해 상속받을 속성을 지정한다.
    this.origin = origin; //속성을 추가한다.
  }
}
const fruitC = new FruitOrigin('citrus', 'amber', 'jeju');
console.log(fruitC); // > FruitOrigin {name: 'citrus', color: 'amber', origin: 'jeju'}
console.log(fruitC.taste()); // > citrus is good taste! 메서드또한 동일한 이름의 메서드를 새로 지정하지 않으면 부모 class의 메서드를 사용한다.

•抽象的


内部は非常に複雑な構造であるが,露出した部分は非常に簡単な概念である.たとえば、ボタンタグをクリックすると、内部で選択プログラムに接続されたイベントリスナーがHandler関数を実行して特定の操作を実行します.しかし、ボタンを押すときは内部の動きを気にする必要はありません.これはインタフェースを簡略化することができる.

•多形性ポリマー


複数の形状を表し、同じclassで生成されたInstanceオブジェクトを表す同じ方法も異なる方法で実現できる.
//위이 Instance를 참고하면 동일한 메서드를 사용했지만 결과값은 다른것을 확인 할 수 있다.
console.log(fruitA.taste());// > apple is good taste!
console.log(fruitB.taste()); // > banana is good taste!

プロトタイプ


prototypeは、そのオブジェクトの親と考えられます.
上記で作成したフルーツAのDOMをconsoleウィンドウで確認すると、プロトタイプが表示されます.
console.log(fruitA); // > Fruit {name: 'apple', color: 'red'} 객체를 보면 state 메서드가 없지만 정상적으로 동작한다.
console.log(fruitA.taste());// > apple is good taste!
オブジェクトにメソッドがない場合は、プロトタイプ内をナビゲートすると、この操作が実行されます.継承された概念に関連する部分があるようです.prototypeでない場合は、より高いprototype順に検索します.

プロトタイプチェーン


FRTOタイプがなければ、上流のPROTOタイプを検索し続けることができます.これがPROTOタイプチェーンです.
軟土タイプで接近する方法は、下図のようにobject.__proto__に接近することができる.