首頁 > web前端 > js教程 > 在JS中class屬性需要如何使用

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

php中世界最好的语言
發布: 2017-12-04 14:36:52
原創
4139 人瀏覽過

今天來教大家在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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板