es6のクラスには静的属性がありますか?

es6 のクラスには静的属性がありません。静的属性はクラス自体の属性、つまりクラス (Class.propname) 内で直接定義された属性であり、インスタンス化する必要はありません。ただし、ES6 では、Class 内には静的メソッドのみが存在し、静的属性は存在しないと規定されています。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES6 では、オブジェクトのテンプレートとして class (クラス) が導入され、class キーワードを通じてクラスを定義できるようになりました。

クラスの本質は関数です。

これは、オブジェクト プロトタイプの記述をより明確にし、オブジェクト指向プログラミングの構文に近づける構文糖とみなすことができます。

ES6 クラスの静的メソッド、プロパティ、インスタンス プロパティ

クラスはインスタンスのプロトタイプに相当し、クラス内で定義されているすべてのメソッドインスタンスの継承になります。メソッドの前に static キーワードを付けた場合、そのメソッドはインスタンスに継承されず、クラスを通じて直接呼び出されることを意味し、これを「静的メソッド」と呼びます。

class Foo {
	static classMethod() {
		return 'hello';
	}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
	// TypeError: foo.classMethod is not a function

上記のコードでは、クラス Foo の classMethod メソッドの前に static キーワードがあります。これは、メソッドが静的メソッドであり、クラス Foo (Foo.classMethod()) ではなく直接呼び出すことができることを示しています。 on class Foo インスタンスで呼び出されます。静的メソッドがインスタンスで呼び出される場合、メソッドが存在しないことを示すエラーがスローされます。
親クラスの静的メソッドはサブクラスに継承できます。

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {}
Bar.classMethod(); // 'hello'

上記のコードでは、親クラス Foo には静的メソッドがあり、サブクラス Bar はこのメソッドを呼び出すことができます。

静的メソッドはスーパー オブジェクトから呼び出すこともできます。

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {
	static classMethod() {
		return super.classMethod() + ', too';
	}
}
Bar.classMethod();

静的プロパティ

静的プロパティは、インスタンス オブジェクト (this) で定義されたプロパティではなく、クラス自体のプロパティ、つまり Class.propname を参照します。

class Foo {}
Foo.prop = 1;
Foo.prop // 1

上記の記述方法は、Foo クラスの静的プロパティ prop を定義します。

ES6 ではクラス内には静的メソッドのみが存在し、静的属性は存在しないと明確に規定されているため、現時点ではこの書き方のみが可能です。

//  以下两种写法都无效
class Foo {
	//  写法一
	prop: 2
		//  写法二
	static prop: 2
}
Foo.prop // undefined

ES7 には静的プロパティの提案があり、現在 Babel トランスコーダでサポートされています。

この提案では、インスタンス属性と静的属性の両方について新しい記述方法を規定しています。

(1) クラスのインスタンス属性

クラスのインスタンス属性は、方程式を使用してクラスの定義に書き込むことができます。

class MyClass {
	myProp = 42;
	constructor() {
		console.log(this.myProp); // 42
	}
}

上記のコードでは、myProp は MyClass のインスタンス属性です。 MyClass のインスタンスでは、このプロパティを読み取ることができます。
以前は、インスタンス属性を定義するときは、クラスのコンストラクター メソッドにのみ記述することができました。

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
}

上記のコードでは、this.state 属性がコンストラクターで定義されています。
新しい書き方では、コンストラクターメソッドで定義する必要がありません。

class ReactCounter extends React.Component {
	state = {
		count: 0
	};
}

この書き方は以前よりもわかりやすくなりました。

読みやすくするために、新しい記述方法では、コンストラクターで定義されたインスタンス プロパティを直接リストできるようになりました。

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
	state;
}

(2) クラスの静的属性

クラスの静的属性は、上記のインスタンス属性の記述方法の前に static キーワードを追加するだけです。

class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myProp); // 42
}
}

同様に、この新しい記述方法により、静的属性の表現が大幅に容易になります。

//  老写法
class Foo {}
Foo.prop = 1;
//  新写法
class Foo {
	static prop = 1;
}

上記のコードでは、古い書き方の静的プロパティがクラスの外部で定義されています。クラス全体が生成された後、静的属性が生成されます。これにより、この静的属性が無視されやすくなり、関連するコードをまとめるべきであるというコード編成の原則に準拠しなくなります。さらに、新しい記述方法は代入処理ではなく明示的な宣言 (宣言型) であり、セマンティクスが向上しています。

以上がes6のクラスには静的属性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。