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)

这样看着方便简洁了很多