21.7.20 TIL(オブジェクト、プロトタイプ向け)

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

オブジェクト向けプログラミング(OOP,Object-oriented programming)データと機能を組み合わせて処理する
属性とメソッドは、JavaScript内蔵タイプのオブジェクトとは異なり、クラス(class)と呼ばれる「オブジェクト」の概念に含まれます.
oopでは,オブジェクトはデータと機能をクラスにカプセル化したコンピュータリソースの集合であり,オブジェクトと呼ばれる.

オブジェクト向けプログラミングは、モデルを作成するブルーレイと、青写真ベースのオブジェクトのプログラミングモードです.
図に示すように、インスタンスオブジェクトを作成するときにnewキーを使用します.
classを定義する場合、一般関数とは異なり、大文字、一般名詞と名前を付けます.

クラス、インスタンスの定義

// ES5 문법으로 정의한 클래스
function Car(brand, name, color) {
	// 인스턴스 객체가 만들어질 때 실행되는 코드
}

// ES6 문법으로 정의한 클래스
class Car {
  constructor(brand, name, color) {
 	// 인스턴스 객체가 만들어질 때 실행되는 코드   
  }
}  

図に示すように、最近es 6構文を使用してクラスを定義しました.
インスタンスを作成すると、コンストラクション関数(コンストラクション関数)内部で実行されます(コンストラクション関数は戻り値を作成しません)

let avante = new Car('hyundai', 'avante', 'black')

インスタンスの作成時にnewキーを使用して、クラスの設計に似た変数に新しいインスタンスオブジェクトを割り当てます.
インスタンスにはCarクラスの一意のプロパティとメソッドがあります.

このキーワード

これは、作成するインスタンスオブジェクトを意味します.

class Car {
  constructor(brand, name, color) {
	this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

パラメータによって渡されるブランド、名前、色は、インスタンスの作成時に指定した値です.
thisに割り当てるとは、作成したインスタンスに対応するブランド、名前、色を割り当てることを意味します.

メソッド定義

es 5ではprototypeキーワードでメソッドを定義できます

// es5문법으로 클래스에 메소드 정의
function Car(brand, name, color) {
  
}
Car.prototype.refuel = function() {
  
}
Car.prototype.drive = function() {
  
}


// es6문법으로 클래스에 메소드 정의
class Car {
  constructor(brand, name, color) {
  
  }
  refuel() {
    
  }
  drive() {
    
  }
}

Carクラスにメソッドを追加するには、es 5構文ではCar.prototype.refuelなどのprototypeを使用します.
es 6では、コンストラクション関数とともにclassキーワードでグループ定義され、reful(){}、drive(){}

インスタンスでのプロパティとメソッドの使用

let avante = new Car('hyundai', 'avante', 'black')
avante.color   // 'black'
avante.drive();   // 메소드 사용

객체.메소드()の形式でオブジェクトでメソッドを呼び出す