web関連

【javascript】es5とes6のクラスの違い(個人用)

2020/10/13

勉強してたらes6からクラスが追加されたって言ってて「あれ?es5で聞いた気がするんだけど違うの?」ってなったので備忘録

クラスの定義

es5にはクラスはなかったみたい
だから疑似的なクラスを作っていたみたいでes6でクラスが実装されたみたい

// es5
var Character = function() {

}

// es6
class Character{

}
クラス名は頭文字を大文字にしろってどっかでか聞いた

プロパティ定義

// es5
var Character = function(name) {
	this.name = name;
}

// es6
class Character{
	constructor (name){
		this.name = name;
	}
}
constructor()はインスタンスを生成するときに実行したい処理を書く
es5だとfunction()に当たる部分っぽい、コンストラクタ関数って呼んでる記事あったし

メソッドの書き方

// es5
var Character = function(name) {
	this.name = name;
	// メソッド
	this.greet = function() {
		console.log("こんにちは" + this.name);
	}
}

// es6
class Character{
	constructor (name){
		this.name = name;
	}
	// メソッド
    greet() {
        console.log("こんにちは" + this.name);
    }
}
ちなみにthisはクラスCharacterを指してる
だからクラス内にキーと値とメソッドを追加してることになる

インスタンス生成方法とメソッドの実行方法

// es5
var Character = function(name) {
	this.name = name;
	// メソッド
	this.greet = function() {
		console.log("こんにちは" + this.name);
	}
}
var tanaka = new Character("田中");// インスタンス生成
tanaka.greet();// こんにちは田中

// es6
class Character{
	constructor (name){
		this.name = name;
	}
	// メソッド
    greet() {
        console.log("こんにちは" + this.name);
    }
}
const tanaka = new Character("田中");// インスタンス生成
tanaka.greet();// こんにちは田中
インスタンス生成の部分は変わらないみたい
ただ、ぱっと見es6の方がわかりやすいね

とりあえず自分が理解できるようにまとめた
まだまだes5にはprototypeとかいうのがあったりするみたいでそれがes6ではどうなるのかとか継承とかよくわからんものがあるけど、頭痛くなるのでとりあえずここまで