JavaScript - class

公開日：2018-11-29 更新日：2019-05-13

1. 概要

class の使い方です。
class は ECMAScript2015 で導入され、
他の言語のようにクラスを定義できるようになりました。
但し、中身は、今まで通り特殊な関数が動いています。
また、ブラウザによって使用できない場合があるため要注意です。

2.1 クラス(class)

class Test {
	constructor() {
		console.log("コンストラクタ");
	}
	add(value1, value2)  {
		return value1 + value2;
	}
}

var obj = new Test;
console.log( obj.add(1, 2) );

コンストラクタ
3

2.2 継承(extends)

extends で継承できます。
また、super.メソッド名 で、親クラスのメソッドを実行できます。

class Test {
	add(value1, value2)  {
		return value1 + value2;
	}
}

class TestEx extends Test {
	add(value1, value2) {
		var result = super.add(value1, value2);
		console.log(value1 + " + " + value2 + " = " + result);
		return result;
	}
}

var obj = new TestEx;
obj.add(1, 2);

1 + 2 = 3

2.3 staticメソッド

class Test {
	static add(value1, value2)  {
		return value1 + value2;
	}
}

var obj = new Test;
console.log( Test.add(1, 2) );
//console.log( obj.add(1, 2) ); //エラー。オブジェクトからは使えない

3

2.4 メソッドとプロパティの追加

オブジェクト生成後は、普通のオブジェクトと同様に扱えます。

class Test {
	static add(value1, value2)  {
		return value1 + value2;
	}
}

var obj = new Test;
obj.sub = function (value1, value2) {
	this.result = value1 - value2;
}

obj.sub(10, 3);
console.log( obj.result );

7

2.5 アクセサー(getter、setter)

class Test {
	set value(v) {
		console.log("set:" + v);
		this._value = v;
	}

	get value() {
		console.log("get");
		return this._value;
	}
}

var obj = new Test;
obj.value = 5;
console.log( obj.value );

set:5
get
5

2.6 関数から継承

function test() { }
test.prototype.add = function (value1, value2) {
	return value1 + value2;
}

class TestEx extends test {
	sub(value1, value2) {
		return value1 - value2;
	}
}

var obj = new TestEx;
console.log( obj.add(1, 2 ) );  //3
console.log( obj.sub(10, 3 ) ); //7


Tag

New Article