js的静态方法和静态属性

js的静态方法和静态属性

• 在有些面向对象的编程语言中，我们可以通过static关键词来声明静态属性，这一点，在Javascript中可以通过**“模拟”**的方式实现。

1、定义静态属性

基本语法：类名.属性（静态属性）其访问时也是通过类名.属性进行访问的。

特别注意：在Javascript中，Math数学类下的所有属性和方法都是静态的。

在Javascript中，有两种属性：

对象.属性（实例属性），属于某个对象的属性

类.属性（静态属性），静态属性是所有对象公有的属性

静态属性指的是 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)

2、定义静态方法

• 什么是静态方法

定在在类上，而不是定义在类的原型上，类可以调用，类的实例不能调用的方法就叫做静态方法

在实际应用中，静态方法主要用于操作静态属性。定义语法：

类名.属性 = function() {}

例3：使用静态方法操作静态属性

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() //实例不可以调用  会报错

以上的写法是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() //类不可以调用

• 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调用