JavaScript : Class

ES 6に追加されたオブジェクト向け言語の1つ.
これは,従来用いられていたオブジェクト向け言語の方式を大きく変えた.
classはテンプレートに属し、このテンプレートを使用します.
objectにデータを入れて作成する
このようなクラスがない場合は、関数を使用してオブジェクトを作成して使用します.

クラス宣言とオブジェクトの作成

classを宣言する方法は、次の例で簡単に理解できます.

class Person {
	//constructor
	constructor(name, age) {
		// fields
		this.name = name;
		this.age = age;
	}

	//method
	speak() {
		console.log(`${this.name}: hello!`);
}

// ocject
const pangho = new person('pangho', 25);

console.log(pangho.name);
console.log(pangho.age);
pangho.speak();

// 결과값으로는 pangho, 25, pangho: hello!가 출력된다.

classを使用してPersonというクラスを作成します.constructorを使用してオブジェクトを作成するときに使用されるデータを渡します.
さらに、これらのデータは、thisというフィールドに割り当てられる.
ここでは関数(method)を追加することもできます.
作成したclassをobjectとして作成する場合
常にnewで始まり、class name(Person)とデータを入れればよい.

getterとsetter

オブジェクトの作成中に誤ったデータを入力してしまった
これは、標準に基づいて変更するのに役立つコードです.

class User {
	constructor(firstName, lastName, age) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
}

	get age() {
		return this._age
	}

	set age(value) {
		this._age = value < 0 ? 0 : value;
	}
}

const user1 = new User('Steve', 'job', -1);
console.log(user1.age);

上記の例では、ユーザデータのSteveJobの年齢を
うっかり-1をメモしました.
ただしgetを定義しage thisを呼び出す.ageに出力
setを定義し、ageのvalueを呼び出し、valueを0に変更します.
this._年齢の変数であることがわかる.
このようにage値が0未満の場合、無条件に0とすることができる.

クラスの継承

あるクラスで使用されるコードが別のクラスで使用されるコードと同じである場合、
クラスのコードは継承して使用できます.

class Shape {
	constructor(width, height, color) {
	this.width = width;
	this.height = height;
	this.color = color;
	}
	
	draw() {
		console.log (`deawing ${this.color} color!`)
	}

	getArea() {
	return this.width * this.height;
	}
}

class Rectangle extends Shape {}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();

// 결과 값은 drawing blue color!

上の例では、Shapeで定義されているクラスコードについて説明します.
Rectangleがextendsを使用して継承していることがわかります.
したがって、object作成時にRectangleclassを使用しても
Shape classと同じ値が得られます.
この方式はclassの再利用を容易にする
コードの作成やメンテナンスが容易な利点があります.

class Shape {
	constructor(width, height, color) {
	this.width = width;
	this.height = height;
	this.color = color;
	}
	
	draw() {
		console.log (`deawing ${this.color} color!`)
	}

	getArea() {
	return this.width * this.height;
	}
}

class Rectangle extends Shape {}
class Triangle extends shape {
	getArea() {
		return (this.widht * this.height) /2;
	}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Rectangle(20, 20, 'red');
console.log (triangle.getArea());

// 결과값은 200

上のclass Triangleの場合、Shapeのclassを継承します.
余分なgetAreaが二つに分かれているのが見えます.
これらの継承クラスに必要な関数のみ
再定義可能な使用の多様性があります.
このように再定義することをオーバーライドと呼ぶ.
しかし、このように再定義された関数は
親関数を削除して定義します.
親の関数を残して再定義したいなら
superを使えばいいです.
superを使用する場合は、常に継承者のみです.
this.使用前にのみ使用できます.

チェックカテゴリ

使用する変数はどのclassを使用しますか?
確認の方法としてinstanceofが用いられていることがわかる.
instanceofを使用する場合、座標値は
優項のclassが使用されているかどうかをboolean値で表します.
いずれのクラスもObjectと比較してtrue値であることに注意してください.

console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);

// 결과값은 ture, false, true, true, true

上記の例ではinstanceofを用いた.
ここに最後の三角形のinstanceofのclassをオブジェクトとして入力します.
結果値出力がtrueであることがわかります.