ES6 class的靜態(tài)方法、屬性和實例屬性

摘自:https://blog.csdn.net/qq_30100043/article/details/53542966

類相當(dāng)于實例的原型, 所有在類中定義的方法, 都會被實例繼承。 如果在一個方法前, 加上static關(guān)鍵字, 就表示該方法不會被實例繼承, 而是直接通過類來調(diào)用, 這就稱為“ 靜態(tài)方法”。

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關(guān)鍵字, 表明該方法是一個靜態(tài)方法, 可以直接在Foo類上調(diào)用( Foo.classMethod()), 而不是在Foo類的實例上調(diào)用。 如果在實例上調(diào)用靜態(tài)方法, 會拋出一個錯誤, 表示不存在該方法。
父類的靜態(tài)方法, 可以被子類繼承。

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

上面代碼中, 父類Foo有一個靜態(tài)方法, 子類Bar可以調(diào)用這個方法。
靜態(tài)方法也是可以從super對象上調(diào)用的。

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

靜態(tài)屬性
靜態(tài)屬性指的是 Class 本身的屬性, 即Class.propname, 而不是定義在實例對象( this) 上的屬性。

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

上面的寫法為Foo類定義了一個靜態(tài)屬性prop。
目前, 只有這種寫法可行, 因為 ES6 明確規(guī)定, Class 內(nèi)部只有靜態(tài)方法, 沒有靜態(tài)屬性。

//  以下兩種寫法都無效  
class Foo {  
    //  寫法一  
    prop: 2  
        //  寫法二  
    static prop: 2  
}  
Foo.prop // undefined  

ES7 有一個靜態(tài)屬性的提案, 目前 Babel 轉(zhuǎn)碼器支持。
這個提案對實例屬性和靜態(tài)屬性, 都規(guī)定了新的寫法。
( 1) 類的實例屬性
類的實例屬性可以用等式, 寫入類的定義之中。

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

上面代碼中, myProp就是MyClass的實例屬性。 在MyClass的實例上, 可以讀取這個屬性。
以前, 我們定義實例屬性, 只能寫在類的constructor方法里面。

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

上面代碼中, 構(gòu)造方法constructor里面, 定義了this.state屬性。
有了新的寫法以后, 可以不在constructor方法里面定義。

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

這種寫法比以前更清晰。
為了可讀性的目的, 對于那些在constructor里面已經(jīng)定義的實例屬性, 新寫法允許直接列出。

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

(2) 類的靜態(tài)屬性
類的靜態(tài)屬性只要在上面的實例屬性寫法前面, 加上static關(guān)鍵字就可以了。

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

同樣的, 這個新寫法大大方便了靜態(tài)屬性的表達。

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

上面代碼中, 老寫法的靜態(tài)屬性定義在類的外部。 整個類生成以后, 再生成靜態(tài)屬性。 這樣讓人很容易忽略這個靜態(tài)屬性, 也不符合相關(guān)代碼應(yīng)該放在一起的代碼組織原則。 另外, 新寫法是顯式聲明( declarative), 而不是賦值處理, 語義更好。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • class的基本用法 概述 JavaScript語言的傳統(tǒng)方法是通過構(gòu)造函數(shù),定義并生成新對象。下面是一個例子: ...
    呼呼哥閱讀 4,207評論 3 11
  • Class 的基本語法 簡介 JavaScript 語言中,生成實例對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)。下面是一個例子。...
    huilegezai閱讀 614評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,659評論 19 139
  • 我是個特別偏執(zhí)的人,堅持著自己的老套思想。偏執(zhí)體現(xiàn)在生活方方面面。 與朋友交 我這樣的人,交朋友首先的看三觀...
    張拾九閱讀 352評論 0 0

友情鏈接更多精彩內(nèi)容