👌

ClassのES7記法

2022/07/21に公開

Property

ES6のClassでは、Propertyをconstructorの中に記入しなければならないです

es6-property.js
class Person {
	constructor() {
		this.myProperty = 'value';
	}
}

ES7ではconstructorの外に記入してもいいようになりました

es7-property.js
class Person {
	constructor() {
	}
	
	myProperty = 'value'
}

カスタムObject

ClassのMethodを説明する前に、まずはカスタムObjectのES5/ES6について見てみましょう

ES5ではカスタムObjectのMethodはこう書きます

es5-object.js
var obj = {
	myMethod: function() { console.log('123')}
}
obj.myMethod(); // 123

ES6はfunctionを省くことができました

es6-object.js
const obj = {
	myMethod() { console.log('123') }
}
obj.myMethod(); // 123

Method

ClassのMethodは、ES6のObject Methodの書き方とは似ています

es6-method.js
class Person {
	myMethod() { console.log('234') }
}
const hi = new Person();
hi.myMethod(); // 234

ES7ではさらにArrow Functionで定義することができました

es7-method.js
class Person {
	myMethod = () => { console.log('234') }
}
const hi = new Person();
hi.myMethod(); // 234

Discussion

ログインするとコメントできます