在JS中class屬性需要如何使用

今天來教大家在JS中class的使用方法，類別是相當於實例的原型，所有在類別中定義的方法都是會被實例繼承的，如果在一個方法前，加上上static關鍵字， 就表示該方法不會被實例繼承，下面要舉例說明一下。

[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可以呼叫這個方法。

靜態方法也是可以從super物件上呼叫的。

[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 明確規定， Class 內部只有靜態方法， 沒有靜態屬性。

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

Foo.prop//undefined ES7 有一個靜態屬性的提案， 目前 Babel 轉碼器支援。

這個提案對實例屬性和靜態屬性， 都規定了新的寫法。

( 1) 類別的實例屬性

類別的實例屬性可以用等式， 寫入類別的定義之中。

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

上面程式碼中， myProp就是MyClass的實例屬性。 在MyClass的實例上， 可以讀取這個屬性。

以前， 我們定義實例屬性， 只能寫在類別的constructor方法裡面。

[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
};
}

這種寫法比以前更清晰。

為了可讀性的目的， 對於那些在constructor裡面已經定義的實例屬性， 新寫法允許直接列出。

[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;
}

上面程式碼中， 老寫法的靜態屬性定義在類別的外部。 整個類別生成以後， 再產生靜態屬性。 這樣讓人很容易忽略這個靜態屬性， 也不符合相關程式碼應該放在一起的程式碼組織原則。 另外， 新寫法是顯式宣告( declarative)， 而不是賦值處理， 語意更好。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

JS引擎運行時是什麼樣的

AJAX使用中的非同步同步請求怎麼實現

JS開發中jssplice()方法如何使用

以上是在JS中class屬性需要如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！