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

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

コンピュータプログラミングモードはいろいろありますが、オブジェクト向けプログラミングはその一つです.初期のプログラミング言語は、プログラムプログラミング順序コマンドの組合せである.プログラムプログラミングでは,コードが長ければ長いほど複雑になり,各コード間の依存性が高くなるという問題が起こりやすい.しかし,オブジェクト向けプログラミングモードの出現に伴い,データモデルの青写真を作成し,データと機能を組み合わせて処理することができる.

//절차적(procedural) 프로그래밍: 변수들과 함수로 분리된 형태
let baseSalary = 30_000;
let overtime = 10;
let rate = 20;

function getWage(baseSalary, overtime, rate){
  return baseSalary + (overTime * rate);
}

//OOP
let employee = {
  baseSalary: 30_000,
  overtime: 10,
  rate: 20,
  getWage: function(){
    return this.baseSalary + (this.overtime * this.rate);
  }
}
employee.getWage();

OOPの4つの特徴

パッヶージ

は、関連する属性および方法を1つのユニット

に組み合わせる.
隠蔽

:隠蔽実施、暴露動作

は緩やかな結合に有利であり、いつでも変更して実施することができる.

抽象抽象

は複雑な内部実装とは異なり、実際に露出する部分は

簡単になる.

遺産を相続する

親/ベースクラス(ベースクラス)のフィーチャーextendキーワードとsuper()を使用して子/派生クラス(派生クラス)を継承

super():親クラスのコンストラクション関数

を呼び出す

super.prop || super.prop():親の属性またはメソッド

を継承する

しゅうたいたけいせい

の親から継承する方法を上書きし、

を異なる方法で実現する.

class Shape{
  constructor(width,height,color){
    this.width = width;
    this.height = height;
    this.color = color;
  }
  draw(){
    console.log(`${color} shape!`);
  }
  getArea(){
    return this.width * this.height;
  }
}
class Rectangle extends Shape{}

//Shape 클래스로부터 상속받은 메소드를 덮어씀으로써(override) 같은 메소드가 부모클래스와 다른 기능을 수행하게 되었다.
//draw 메소드를 override하고 부모객체의 draw 메소드를 불러올 수 있다.
class Triangle extends Shape{
  draw(){
    super.draw();
    console.log('now drawing');
  getArea(){
    return (this.width * this.height)/2;
  }
}
    

classの定義方法

ES 5関数でクラスとメソッドを定義する

//함수로 클래스 정의하기
//클래스 정의 함수의 첫글자는 대문자로 쓰고, 명사형으로 써서 
//일반 함수의 소문자, 동사형과 구분할 수 있도록 한다.
function Student(name, age, grade, school){
  this.name = name;
  this.age = age;
  this.grade = grade;
  this.school = school;
}
//메소드 정의하기
Student.prototype.study = function(){}
Student.prototype.read = function(){}

//new 키워드로 인스턴스 객체 만들기
let senior = new Student('kim','19','A','high');

//배열을 정의하는 것은 Array의 인스턴스를 만드는 것과 동일하다
let arr = new Array ('first','second','third');
let arr = ['first','second','third'];

ES 6クラスキーワードでクラスとメソッドを定義する

//클래스 키워드로 클래스 정의하기
//클래스의 이름은 ES5에서 클래스 정의함수 이름과 마찬가지로 대문자로 시작하며 명사형으로 쓴다.
class Student{
  constructor(name, age, grdade, school){
    this.name = name;
    this.age = age;
    this.grade = grade;
    this.school = school;
  }
  //메소드 정의하기
  study(){}
  read(){}
}

//new 키워드로 인스턴스 객체 만들기
let senior = new Student('kim','19','A','high');

Arrayのインスタンスの作成

//지금까지 배열을 생성하여 요소들을 할당하고, length 속성과 push 메소드를 사용해왔다.
let arr = ['hello','world','javascript'];
arr.length; //3
arr.push('algorithm');

//배열을 정의하는 것은 Array의 인스턴스를 생성하는 것과 동일하다.
let arr = new Array('hello','world','javascript');
arr.length; //3
arr.push('algorithm');

理解表現

Class ES 6の追加
OOPでいうクラスは、簡単に言えば製造対象の工場です.属性値は割り当てられておらず、メモリにもアップロードされていません.

インスタンス(オブジェクト)
classに基づいて作成されたオブジェクトはメモリに格納されます.

コンストラクタ

newキーワードを使用してインスタンスオブジェクトを作成する場合(初期化時)に自動的に実行されるコンストラクション関数で、戻り値は作成されません.

パラメータとして渡された値はクラスフィールドに割り当てられます.

コンストラクタは省略でき、その結果、コンストラクタ(){}を含む動作と同じであり、空のオブジェクトを生成する.したがって、インスタンスにプロパティを追加するには、インスタンスの作成後にプロパティを動的に追加する必要があります.

classフィールド(データ・メンバーまたはメンバー変数)
クラス内のカプセル化変数.クラスフィールドは、インスタンスのpropertyであってもよい.簡単に言えば、クラスベースのオブジェクト向け言語では、JavaScriptのコンストラクション関数によってthis(インスタンス)に追加されるPropertyをクラスフィールドと呼ぶ.

this
newキーワードで呼び出されたコンストラクション関数によって作成されたインスタンスオブジェクトを指します.