js的靜態方法和靜態屬性

什么是靜態方法

定義在類上，而不是定義在類的原型上，類可以調用，類的實例不能調用的方法就叫做靜態方法

看代碼

function Foo() {

}
//定義在Foo類上
Foo.static = function () {
   console.log('static fun')
}
//定義在Foo原型上
Foo.prototype.test = function () {
  console.log('test fun')
}

var fun = new Foo()
fun.test() //實例可以調用
Foo.static() //類可以調用
fun.static() //實例不可以調用

fun.static()會報錯

以上的寫法是es6之前的老寫法，es6定義了class注冊類的方式，static關鍵字也成為注冊靜態方法的方式

看代碼

class Foo {
  static classMethod (){
    console.log('static fun')
  }
  //定義在原型上的方法
  commonMethod (){
    console.log('commonMethod')
  }
}
Foo.classMethod() //類可以調用
var foo = new Foo()
foo.commonMethod() //實例可以調用
foo.classMethod() //實例不可以調用
Foo.commonMethod() //類不可以調用

es6只是換了一種聲明方式，道理是一樣的

static方法是可以被繼承的

class Foo {
      static classMethod (){
        console.log('static fun')
      }
}
class Son extends Foo{
      
}
Son.classMethod()//子類調用父類的靜態方法

還可以用super調用

   class Foo {
      static classMethod (){
        console.log('static fun')
      }
    }
    class Son extends Foo{
       static sonMethod(){
         super.classMethod()
       }
    }
    Son.sonMethod() //super調用

靜態屬性

靜態屬性指的是 Class 本身的屬性， 即Class.propname， 而不是定義在實例對象（ this） 上的屬性。

class Foo {}
Foo.prop = 1;
console.log(Foo.prop) // 1

目前只支持這樣寫，因為es6規定只能在方法前面用static關鍵字

es7 提議了靜態屬性，並且現在得到了Babel 轉碼器支持

   class Foo {
      static prop=2 //靜態屬性
    }

並且也對實例屬性的聲明方式做了簡化，es6在實例屬性必須在constructor中進行聲明

   class Foo {
      static prop = 2 //靜態屬性
      constructor(){
        this.state ='name' //定義在實例上的屬性
      }
    }

es7可以直接在class中用等式聲明實例屬性

   class Foo {
      static prop = 2 //靜態屬性
      state ='name' //定義在實例上的屬性
      //靜態方法
      static classMethod (){
        console.log('static fun')
      }
      //定義在原型上的方法
      commonMethod (){
        console.log('commonMethod')
      }
    }
    var foo = new Foo()
    console.log(foo.state)

這樣看着方便簡潔了很多