es6中class類的靜態方法、實例方法、實例屬性、(靜態屬性)

關於類有兩個概念，1，類自身,；2，類的實例對象

總的來說：靜態的是指向類自身，而不是指向實例對象，主要是歸屬不同，這是靜態屬性的核心。

難點1：靜態方法的理解

class Foo { static classMethod() { return 'hello'; } }

靜態方法使用：在方法前加上static關鍵字

為什么使用靜態方法：阻止方法被實例繼承，類的內部相當於實例的原型，所有在類中直接定義的方法相當於在原型上定義方法，都會被類的實例繼承，但是使用static靜態方法定義的不會被實例繼承，而且可以被實例直接應用Foo.classMethod()，此時寫成new Foo.classMethod()會提示不存在此方法

靜態方法中this指向：this指向類而不是類的實例

class Foo { static bar () { this.baz(); } static baz () { console.log('hello'); } baz () { console.log('world'); } } Foo.bar() // hello

繼承相關：靜態方法可以被子類繼承，也可以被super調用      (要與實例區分開)

-----------------------------------------------------------------------------------------------------------------------

難點2：靜態屬性的理解，以及和實例屬性的區別

理解了靜態的本質就知道靜態屬性是class類自身的屬性

相對的實例屬性是指類的實例的屬性，調用時使用 new Foo().'屬性名'

定義實例屬性的方法：2種

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

1，在類中定義

class MyClass { myProp = 42; constructor() { console.log(this.myProp); // 42
 } } //上面代碼中，myProp就是MyClass的實例屬性。在MyClass的實例上，可以讀取這個屬性。

2，在constructor中定義（react中經典寫法）

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

定義靜態屬性，

1，就和普通的Object添加屬性一樣，object.a = a;（目前唯一一種方法）

     缺點：老寫法的靜態屬性定義在類的外部。整個類生成以后，再生成靜態屬性。容易忽略

2，靜態屬性的提案： 相對於實例方法定義，在定義實例方法的前面加上static關鍵字，該方法未發布

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

 

下面練習個小例子

　　　　class F{
           constructor(){//實例化時會被調用
               this.a="父類的實例屬性";
               console.log(this);//指向類本身
           }
           static fun(){
               console.log("父類的靜態方法");
               console.log(this);//執行類自身
               console.log(this.b);//"父類的靜態屬性"
           }
           fun2(){
                console.log(this);//指向實例
                console.log(this.a);
           }
       }
       F.b="父類的靜態屬性";//給F類加靜態方法
       F.fun();
       var f=new F;
        //f.fun();//fun not a function
       f.fun2();