JSでclass属性を使う方法

今日はJSでのクラスの使い方を説明します。クラス内で定義されたすべてのメソッドは、メソッドの前に静的キーを追加するとインスタンスに継承されます。 は、メソッドがインスタンスに継承されないことを意味します。以下に例を示します。

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
Foo.classMethod()//'hello'
varfoo=newFoo();
foo.classMethod()
//TypeError:foo.classMethodisnotafunction

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

親クラスの静的メソッドはサブクラスに継承できます。

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{}

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

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

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{
staticclassMethod(){
returnsuper.classMethod()+',too';
}
}
Bar.classMethod();静态属性[javascript]view plaincopy
classFoo{}
Foo.prop=1;
Foo.prop//1 上面的写法为Foo类定义了一个静态属性prop。

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

[javascript]view plaincopy
//以下两种写法都无效
classFoo{
//写法一
prop:2
//写法二
staticprop:2
}

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

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

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

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

[javascript]view plaincopy
classMyClass{
myProp=42;
constructor(){
console.log(this.myProp);//42
}
}

上記のコードでは、myProp は MyClass のインスタンス プロパティです。 MyClass のインスタンスでは、このプロパティを読み取ることができます。

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

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
} 上面代码中， 构造方法constructor里面， 定义了this.state属性。
有了新的写法以后， 可以不在constructor方法里面定义。
[javascript]view plaincopy
classReactCounterextendsReact.Component{
state={
count:0
};
}

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

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

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
state;
}

(2) クラスの静的属性

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

[javascript]view plaincopy
//老写法
classFoo{}
Foo.prop=1;
//新写法
classFoo{
staticprop=1;
}

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

JS エンジンは実行時にどのように見えるか

AJAX で非同期同期リクエストを実装する方法

JS 開発で jssplice() メソッドを使用する方法

以上がJSでclass属性を使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。